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

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

wxapp-intro.png

(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 方法的时候同样会调用,所以如果不想在这个时候触发的问题,尽量不要写在这个方法里。