小程序初探之二- 遇到的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