258资源分享网

作为一名勤恳单纯的未来iOS开发者，受迫于对新事物的好奇，便义无反顾地举手加入了团队里一个小程序项目的开发中。

首先要声明一下：

本人对前端了解微浅，微信小程序开发也无深入了解，这里仅作为一篇小程序的项目经验总结文来跟大家分享。 
微信小程序处于发展中，内嵌的方法仍在不断改善与补充，相信一些坑也会在未来的版本中被填平。 
本文基于的基础库版本为1.5.3，内容如有疏漏，欢迎指教。 
Dry goods 【干货】

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

setTimeout(function () {

})

}, duration) // duration: 毫秒(ms)

// 在该作用域里赋值能成功而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,

})

}

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

（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) {

// 尽管这里可能不需要做失败处理，但仍需提供这样的空操作

})

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，注定她们是不安定的。但在这里就不一一展开了。

上述组件嵌套在 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;

}

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

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

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