微信小程序开发的那些坑们（持续更新中...)

微信小程序大热，很多公司都跟着跑，没办法，谁叫微信牛掰，手里握着6个亿+的活跃用户，这个体量没有人会不重视吧！所以我也加入了一探究竟的大军，开始了小程序的摸索，个人还是很喜欢这套技术路线的，在开发领域来说，数据绑定、Nodejs 这些百花齐放而又灵活自如的开发模式越来越受到青睐。但是任何一门技术，趟坑的过程都是必不可少的，作为老技术人员，也乐在其中了。。

(CST) 渲染层网络层错误

版本:

版本库: v1.9.3 devtool: v2018.03.13

问题:

选择本机图片 wx.chooseImage 然后渲染到画布 ctx.drawImage(imagePath,0,0,300,500) 调试区域出现错误，（CST) 渲染层网络层错误。

解决方法：

关闭翻墙工具，然后重启开发工具

BTW:

貌似新版的开发工具已经解决了这个问题，目测已经可以把开发工具和fan-qiang 工具共存了

move-area 和 movable-view 尺寸动态修改后，移动范围不会更新的问题解决

版本:

版本库: v1.9.3 devtool: v2018.03.13

问题:

movable-area 和 movable-view 修改尺寸后，移动范围会出现错误。

解决方法：

这时候需要重新渲染 movable-area 和 movable-view 组件

<block wx:if="{{drawSign==1}}">
    <movable-area>
        <movable-view></movable-view>
        </movable-area>
    </block>
<block wx:else>
    <movable-area>
        <movable-view></movable-view>
    </movable-area>
</block>

通过在 JS 里根据具体逻辑，每次更新和区域尺寸的时候调用如下方法，来强制重新绘制标签。

self.setData({
    drawSign: !self.data.drawSign
})

组件传参数

版本:

版本库: v1.9.3 devtool: v2018.03.13

方法：

在标签里增加

data-变量名

的方式传递参数，这样可以通过绑定用户操作事件之后的

event.currentTarget.dataset.变量名

的方式获取传递的变量

例如在 wxml 里

<image data-变量名="{{value}}" bindtap="tapToSelected"></image>

那么在 JS 文件里从事件方法里获取变量

tapToSelected: function(evt){
    const value =  evt.currentTarget.dataset.变量名;
    console.log(value);
}

设置全局变量

版本:

版本库: v1.9.3 devtool: v2018.03.13

方法：

在 app.js 里声明

globalData: {
    userInfo: null,
    other: null,
}

调用方法

getApp().globalData.userInfo; 
getApp().globalData.other;

修改 input 和 textarea 的 placeholder 的样式

版本:

版本库: v1.9.3 devtool: v2018.03.13

方法：

一般 wxml 里的代码是这样的

<input type="text" placeholder="请输入你的愿望" placeholder-class="placeholder" />

其实很简单，为input设置了一个 placeholder-class 为 placeholder

.placeholder {
    color: #D3D3D3;
}

关于 onHide 方法

版本:

版本库: v1.9.3 devtool: v2018.03.13

问题

这个是小程序提供的页面生命周期函数之一，但是并不是页面离开的时候才会调用这个方法，当模式窗口覆盖的时候也有可能会调用这个方法。
我遇到的坑就是，当我在 onHide 方法里设置一些功能的时候，在调用 wx.chooseImage 方法的时候同样会调用，所以如果不想在这个时候触发的问题，尽量不要写在这个方法里。