小程序初探之二- 遇到的bug

1. border 1px問題

解決方案：

• 改成2px
• 原素更改寬度 1px調整

2. 彈層scroll擊穿底部

解決方案：

• 彈層添加

capture-catch:touchmove="myCatchTouch"
    
    myCatchTouch: function() {
        console.log('stop user scroll it!');
        return;
    },
複製代碼

• 底部添加樣式

style={
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
複製代碼

小程序文檔

3. textarea placeholder 滾動

解決方案： 添加fixed屬性

<textarea placeholder="備註留言"
    maxlength='50'
    fixed
    name="textarea"
    placeholder-style='font-size: 28rpx;color: #C7C7CD;text-align: justify;line-height: 42rpx;border-radius:10rpx !important'
    bindinput='setRemark'
    cursor-spacing='100'/>
複製代碼

4. Do not have hidden handler in current page:

Do not have hidden handler in current page: pages/huodongye/huodongye. Please make sure that hidden handler has been defined in pages/huodongye/huodongye, or pages/huodongye/huodongye has been added into app.json

5. button去除邊框

強制border:none無效 實現方案：

button::after {
  border: none
}
複製代碼

6. 收集多個form_id供推送消息使用

在button 或者input框等可點擊的元素外面嵌套多層form以及button，屢次觸發submit事件便可

7.腳本中使用js方法

項目中須要根據返回的數字顯示漢字，須要在wxml中使用方法。

官方解決方案：WXS

WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，能夠構建出頁面的結構。

注意

• wxs 不依賴於運行時的基礎庫版本，能夠在全部版本的小程序中運行。
• wxs 與 javascript 是不一樣的語言，有本身的語法，並不和 javascript 一致。
• wxs 的運行環境和其餘 javascript 代碼是隔離的，wxs 中不能調用其餘 javascript 文件中定義的函數，也不能調用小程序提供的API。
• wxs 函數不能做爲組件的事件回調。 因爲運行環境的差別，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上兩者運行效率無差別。

示例：

<!--wxml-->
<!-- 下面的 getMax 函數，接受一個數組，且返回數組中最大的元素的值 -->
<wxs module="m1">
  var getMax = function(array) { 
    var max = undefined;
    for (var i = 0; i <array.length; ++i) { 
        max = max === undefined ? array[i] : (max >= array[i] ?
  max : array[i]); 
    } 
    return max; 
  } 
  module.exports.getMax = getMax;
</wxs>

<!-- 調用 wxs 裏面的 getMax 函數，參數爲 page.js 裏面的 array -->
<view>{{m1.getMax(array)}}</view>
複製代碼

8. navigateBack bug

復現： 登陸攔截失敗後應用的redirectTo,用戶登錄成功後 應用navigateBack沒有返回上一級；

解決方法： navigateBack應該與navigateTo配對使用； so, 把redirectTo改成navigateTo，再應用navigateBack({delta: 1})就成功了。

教訓：老孃有史以來寫的最嚴重的線上bug.哎，測試時覺得是後端bug,測試方案沒覆蓋全。小程序接口使用前仍是得快速念一遍啊。

9. e.target與e.currentTarget的區別

e.target涉及事件委託。

10. 關於小程序生命週期，與app.js執行順序

問題描述:init函數須要app.js執行後的全局變量

onLoad: function () {
        console.log('onLoad')
        if (app.globalData.boliSid) {
            if (!app.globalData.isBoundMobile) {
                wx.redirectTo({
                    url: "/pages/binding/binding",
                })
                return false
            }
            this.setData({
                isBinding: true
            })
            this.init()
        } else {
            app.getAuthKey().then(res => {
                if (res.data.code == 200) {
                    app.globalData.boliSid = res.data.data.boli_sid
                    app.globalData.isBoundMobile = res.data.data.is_bound_mobile
                }
                if (!app.globalData.isBoundMobile) {
                    wx.redirectTo({
                        url: "/pages/binding/binding",
                    })
                    return false
                }
                this.setData({
                    isBinding: true
                })
                // 這裏是ajax請求啊
                this.init()
            })
        }
        console.log(app.globalData,'global')
    }
複製代碼

init函數：

init: function(e) {
        let that = this
        console.log(e,'e')
        console.log(app.globalData,'init global')
        let configData = {
            boli_sid: app.globalData.boliSid,
            map_lat:  app.globalData.latitude,
            map_lng: app.globalData.longitude,
            page: 1,
            size: 10,
            type: 0
        }
        console.log(configData,'configData')
        let config = {
            data: configData,
            url: 'https://test.anjuy.cn/@wxapp/logistic/index',
            isLoading: true
        }
        axios(config).then(res => {
            // console.log(res.data,'data')
            if (res.data.code == 200) {
                that.setData({
                    initData: res.data.data
                })
                console.log( this.data.initData,'res')
                wx.showToast({
                    title: '成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        }).catch(e => {
            wx.showModal({
                title: '提示',
                content: '這是一個模態彈窗',
                success(res) {
                    if (res.confirm) {
                        console.log('用戶點擊肯定')
                    } else if (res.cancel) {
                        console.log('用戶點擊取消')
                    }
                }
            })
        })
    },
複製代碼

正常執行； 必須確保app.js全局變量正常才能執行init() 注意同步異步事件

11.onPullDownRefresh not work

onPullDownRefresh觸發條件？？

onPullDownRefresh: function () {
    console.log(this.data.page,'page')
    this.init()
},
onReachBottom: function () {
    this.init()
},
複製代碼

解決方案： 須要json文件進行配置

{
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
}
複製代碼

12. wx.showToast不執行

問題描述：請求成功200後添加代碼，toast組件一直未執行

axios(config).then( res => {
    if(+res.data.code == 200){
            wx.showToast({
                title: '取件成功',
                icon: 'success',
                duration: 1500
            })
        that.search = that.selectComponent('#mySearch');
        that.search.delValue();
        that.init()
    }
}, e => {
    console.log(e)
})
複製代碼

解決方案：

setTimeout(() => {
    wx.showToast({
        title: '取件成功',
        icon: 'success',
        duration: 1500
    })
},300)
複製代碼

13 input框高度

當設置的字體過大，如80rpx，輸入框會發生切割，文字展現不全； 重設input高度，覆蓋默認的height和min-height

input {
    font-size: 80rpx;
    line-height: 90rpx;
    height: 90rpx;
    min-height: 90rpx;
}
複製代碼

14 scroll-view

<scroll-view class="comments" scroll-x="true">
        <view style="display:flex;align-items:top;">
            <view class="item">1</view>
            <view class="item">2</view>
            <view class="item">3</view>
        </view>
    </scroll-view>
複製代碼

1. comments 必須加上 white-space: nowrap;
2. <view style="display:flex;align-items:top;"> 爲了解決內部滾動元素底部對齊問題 3） 內部元素item必須加上display: inline-block; to be solved

1）動畫實現問題

2）appLaunch with an already exist webviewId 1