小程序踩坑填坑

1. caller

data: {
    userInfo: {
        name: 'Emlice',
        company: 'xxxxx',
        caller: 666
    }
} 
复制代码

问题: 在 wxml 模板内 {{ userInfo.caller }} 调用失败。
解决: caller 换成 visitor ,成功访问。
疑问： js 可以获取到, wxml 模板并不能获取并渲染。
原因: 不明。

---

2. 事件传参

<view 
    wx:for="{{ iconList }}" 
    wx:key="*this" 
    class="item {{ item.class }}" 
    data-methods-name="{{ item.methods }}"
    bind:tap="eventTrigger">
    <text class="iconfont {{ item.icon }} icon"></text>
    <text class="text">{{ item.text }}</text>
</view>
复制代码

Page({
    eventTrigger (event) {
        const name = this.currentTarget.dataset.methodsName + 'Trigger';
        this[name]()
    }
})
复制代码

问题: wxml 模板内绑定事件不能进行参数直传
解决: 绑定到 dataset 上通过 event (事件对象) 获取 dataset 的值

---

3. wxs 传参 undefined

<text wx:if="{{ info }}">{{ filters._telFormat(info.tel) }}</text>
复制代码

问题: 小程序的数据加载问题 解决: 通过 wx:if 解决问题 提示: wxs 增强 wxml ,这里使用的的是通过 wxs 实现 filter 效果。

---

4. hidden 失效

问题: 小程序 hidden true 组件并不会隐藏
解决: 1.通过组件设置了 display flex 且权重偏大。 2.通过 style display 解决问题。
提示: hidden 和 wx:if 都能够隐藏元素，但 hidden 具有更高的初始渲染成本, wx:if 具有更高的切换渲染成本。所以推荐不常变化的采用 wx:if, 常变化的使用 hidden。

---

5. transform 无效

问题: 小程序 wxss 使用css3属性transform无效 解决: 写进wxml里面 style 里面，注意 transfrom: translate(xxxrpx) xxx 前面要空格

---

6. 小程序动画卡顿

问题: 如题 解决: 不使用定位点(top, bottom, left, right)去做动画，推荐使用 CSS3 属性操作动画，并使用 GPU 加速渲染。 will-change: transform;

---

7.小程序编译出错造成渲染层错误组件原地爆炸消失 ‘Invalid or unexpected token’

问题: Invalid or unexpected token
解决: 禁止传入非法特殊字符，否则会引起小程序渲染层错误。
详见: developers.weixin.qq.com/community/d…

---

8. 小程序文件项目调用引起栈溢出 Maximum call stack size exceeded

问题: Maximum call stack size exceeded.
解决: 解耦,把b文件的方法放到a文件来直接调用。
戳图:

---

9. 清除 textarea 组件的 value 值失败

问题: IOS 可以，安卓不行
解决: 延迟 300 毫秒再清一次

---

10. iconfont 容器建议使用 view

问题: 使用 icon 组件会有各式各样的样式，如旋转定位不准等
解决: 使用 view 为容器没有这一类问题

---

未完待续！