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

忘是亡心i 2022-03-15 09:50 281阅读 0赞

### 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;
    }
    复制代码

[小程序文档][Link 1]

### 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 设备上二者运行效率无差异。

示例：

<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>
    
    
    <view>{
        {m1.getMax(array)}}</view>
    复制代码

### 8. navigateBack bug ###

复现： 登录拦截失败后应用的`redirectTo`,用户登陆成功后 应用`navigateBack`没有返回上一级；

解决方法： `navigateBack`应该与`navigateTo`配对使用； so, 把`redirectTo`改为`navigateTo`，再应用`navigateBack({delta: 1})`就成功了。

教训：老娘有史以来写的最严重的线上bug.哎，测试时以为是后端bug,测试方案没覆盖全。[小程序接口][Link 2]使用前还是得快速念一遍啊。

### 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()
    },
    复制代码

### 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)
    复制代码

to be solved

#### 1）动画实现问题 ####

#### 2）appLaunch with an already exist webviewId 1 ####

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fview%2Fwxml%2Fevent.html%3Fsearch-key%3D%25E5%2586%2592%25E6%25B3%25A1
[WXS]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fview%2Fwxs%2F
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fwx.navigateBack.html