小程式踩坑填坑

caller

data: {
    userInfo: {
        name: 'Emlice',
        company: 'xxxxx',
        caller: 666
    }
} 
複製程式碼

問題: 在 wxml 模板內 {{ userInfo.caller }} 呼叫失敗。
解決: caller 換成 visitor ,成功訪問。
疑問： js 可以獲取到, wxml 模板並不能獲取並渲染。
原因: 不明。

事件傳參

<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 的值

wxs 傳參 undefined

<text wx:if="{{ info }}">{{ filters._telFormat(info.tel) }}</text>
複製程式碼

問題: 小程式的資料載入問題解決: 通過 wx:if 解決問題提示: wxs 增強 wxml ,這裡使用的的是通過 wxs 實現 filter 效果。

hidden 失效

問題: 小程式 hidden true 元件並不會隱藏
解決: 1.通過元件設定了 display flex 且權重偏大。 2.通過 style display 解決問題。
提示: hidden 和 wx:if 都能夠隱藏元素，但 hidden 具有更高的初始渲染成本, wx:if 具有更高的切換渲染成本。所以推薦不常變化的採用 wx:if, 常變化的使用 hidden。

transform 無效

問題: 小程式 wxss 使用css3屬性transform無效解決: 寫進wxml裡面 style 裡面，注意 transfrom: translate(xxxrpx) xxx 前面要空格

小程式動畫卡頓

問題: 如題解決: 不使用定位點(top, bottom, left, right)去做動畫，推薦使用 CSS3 屬性操作動畫，並使用 GPU 加速渲染。 will-change: transform;

7.小程式編譯出錯造成渲染層錯誤元件原地爆炸消失 ‘Invalid or unexpected token’

問題: Invalid or unexpected token
解決: 禁止傳入非法特殊字元，否則會引起小程式渲染層錯誤。
詳見: developers.weixin.qq.com/community/d…

小程式檔案專案呼叫引起棧溢位 Maximum call stack size exceeded

問題: Maximum call stack size exceeded.
解決: 解耦,把b檔案的方法放到a檔案來直接呼叫。
戳圖:

清除 textarea 元件的 value 值失敗

問題: IOS 可以，安卓不行
解決: 延遲 300 毫秒再清一次

iconfont 容器建議使用 view

問題: 使用 icon 元件會有各式各樣的樣式，如旋轉定位不準等
解決: 使用 view 為容器沒有這一類問題

未完待續！

小程式踩坑填坑

相關文章