前言

，作为一个勤奋简单的未来iOS开发者，被迫对新事物充满好奇，于是他毫不犹豫地举手加入了团队中一个小程序项目的开发。

首先，让我们明确一点：

对前端略知一二，对微信小程序的开发了解不深。在这里，我只作为小程序项目经验的总结与大家分享。微信小程序在发展，嵌入方式还在完善和补充。相信未来的版本会有一些坑被填满。基于本文的基本库的版本是1.5.3。如有遗漏，请告知。

ont-size: 1em; border: 0px; font-weight: normal;">Dry goods 【干货】

一. 值

1. setData

1.setData：是逻辑层(.js)向视图层(.wxml)进行的数据渲染，是一个异步操作，所以可能需要用到延迟执行方法来确保赋值成功后的操作：setTimeout(function () {     }) }, duration) // duration: 毫秒(ms)

2. // 在该作用域里赋值能成功而page的data数据没有更新。但似乎没必要做这样不去刷新页面数据的操作，因为不是视图层需要的数据源没必要写在data中，而且这样可能会污染该值。 this.data.testData = testData // 这是真正需要的赋值操作，刷新值后渲染页面。 that.setData({    testData: testData, })

3.// 在闭包中用到this需首先将其引用，并且需要声明在赋值的作用域外层，否则会报`Cannot read property 'data' of undefined`错误。  var that = this  this.setData({     testData: that.data.testData2,  })// 若setData操作仍在一个闭包内，则同理写成that.setData({})。{ // 闭包  that.setData({     testData: that.data.testData2,  })}

2. 小程序码传参

向后端生成小程序码的请求中传入页面路径path与约定参数(test)，即可同navigator跳转方法获得类似。onLoad: function (options) { var t = options.test }

3. 函数不支持带默认参数，有参数的函数，必须传参，而且必须每一个都传，如果是回调闭包也必须提供空操作。举个...

（network.js）声明的地方// 获取社团详情function getCommunityDetail(communityId, success, fail) {  this.get(url.base + url.communityDetail + communityId,    function (res) {      success(res)    },    function (res) {      fail(res)    })} (communityInfo.js) 用到的地方network.getCommunityDetail(options.communityId,      function(success) {      // Does something...      },      function(fail) {     // 尽管这里可能不需要做失败处理，但仍需提供这样的空操作      })

4. dataset

dataset: 用于组件中传递数据 注意：其设置变量名与取值变量名的格式要求。（文档说明如下）

   （xxx.wxml）<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>    (xxx.js)Page({  bindViewTap:function(event){    event.currentTarget.dataset.alphaBeta === 1 // `-` 会转为驼峰写法    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写  }})

二. 组件

wx tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件。 so，注定她们是不安定的。但在这里就不一一展开了。

1. scroll-view

• 上述组件嵌套在 scroll-view 中设置css属性z-index在真机上不起作用。

• 安卓端bug：scroll-view嵌套在swiper-item中横向滑动不响应，此时可设置scroll-view的css属性overflow : auto;但这又会引来一个美观问题，就是它的横向滚动条冒了出来，此时再设置

// 这会导致整个scroll-view内的滚动条都被隐藏。::-webkit-scrollbar {  width: 0;  height: 0;  color: transparent;}

2. canvas

• 由于canvas的不可 `隐藏性` ，所以想直接生成图片有些阻碍，但也不是不可以，这里提供一种思路。 （需求场景：点击按钮生成一张由下载图片和文字画的canvas，并将其合成为图片，随即预览该图片） 思路：在屏幕所见范围外放置canvas，生成并保存图片后将canvas销毁(wx:if：用此方法销毁)。然而这里有几个让你不得不改变这样的需求的坑： 1：由于绘图方法drawImage未提供回调函数，所以你无法得知何时绘图完成(该回调将在未来版本中添加），对于需要区分图片层级的绘图操作尤为不好。（若图片B在图片A上，则需要先把图片A绘图成功） 2：由于性能问题(最好在安卓真机上测试)，尽管把延迟调的很久让绘图操作执行，但时长会发生绘图失败生成一张空白图片可能，造成用户体验不好。 3：特别是多图合成情况，以上问题尤为突出。 需求改动：将点击直接生成合成图片改为跳转到另一个page去展示并且生成。 当然你会想问，让后台直接返回合成的图片不就ok啦？确实是这样的，这会在后面的版本中改过来。

• drawImage需是项目资源图片或者是图片下载完毕后保存的文件路径，这里要注意的是下载的图片url必须是安全校验的路径，而image标签使用的https必须经过微信签名验证，自签名不行，如本次项目使用的七牛云就出现了这样的bug：图片加载会变得非常慢甚至无法加载，但是预览图片还是会显示出来。

• 顺便说一下图片裁剪方法clip会在未来的版本中添加。

3. button

• 按钮无法直接设置背景图 解决思路：把button嵌套在image中，并把button的opacity设为0，但这里要特别注意：要将button的css属性position设为absolute，设定其绝对位置，否则无法响应点击。

4. textarea

textarea标签的默认输入最大输入长度为140。可设置其css属性maxlength

5. swiper

1. 设置高度时须将每个item的高度都赋值一遍，防止造成内容显示高度不一致（模拟器上显示正常，真机上内容显示有偏差）。
2. 解决swiper-item因内容高度不一致而导致部分item无内容显示的可选方案：切换item时重载数据。

三. util

1. requrie不支持绝对路径，须使用相对路径导入

这个bug确实很让人抓狂。

2. 若需要配置指定page的页面信息，在.json文件中直接配置对应属性即可，而不要写成app.json中配置所有页面信息的格式（如下）

（app.json）：不仅有配置页面信息的`window`属性，还包括注册页面的`pages`等属性。{"pages": [    // register pages  ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "CommunityUnion",    "navigationBarTextStyle": "black"  }}

（页面.json）{   "backgroundTextStyle": "light",   "navigationBarBackgroundColor": "#fff",   "navigationBarTitleText": "页面",    "navigationBarTextStyle": "green"}

3. 设置page背景颜色

// 在page对应的.wss文件中设置page {  background-color: "#f4f5f7";}

在对应page的.json中设置background-color属性不是修改页面的背景颜色，而是修改页面的窗口颜色，即页面下拉时出现的窗口颜色。

后话

开发小程序过程中给人的感觉是开发起来没有太多的自由，留给开发者的空间不够大，可喜的是微信小程序一直在进步与完善，在社区中您会非常欣（nan）喜（shou）地发现，收到的微信官方答复大多数都是：xx功能考虑在未来的版本中加入...