小程序踩坑记

自适应 rpx

rpx: 可以根据屏幕宽度自适应，规定屏幕宽为750rpx。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

rpx 换算 px (屏幕宽度 / 750)

px 换算rpx (750 / 屏幕宽度)

设计师可以用 750px 作为视觉稿的标准。

iPhone5	        1rpx = 0.42px	1px = 2.34rpx
iPhone6	        1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

数组赋值

tools是数组，数组元素是对象，checked必须要存在，index必须是number类型

var temp = "tools[" + index + "].checked";
this.setData({
    [temp]: false
})

 // this.data.averageVal = sum/(thicks.length)  不生效
this.setData({
    averageVal: (sum/len).toFixed(2)
})

初始化

self.setData({
    tools: []
})

整体赋值

confirmResult是对象数组
this.setData({
    tools: confirmResult
})

对象赋值

itemIndex可以是number何string类型

var temp = "requestStatus." + itemIndex 
this.setData({
[temp]: {
    status: false,
    checked: item.checked
}  
})

import报错

saveToolNo是exports出来的，import肯定报错

module.exports.saveToolNo = saveToolNo; 或
exports.saveToolNo = saveToolNo;

import saveToolNo from '../equip/test.js'

当'../tool/test.js'文件在进入此引入页面的之前页面中没地方使用时，在引入文件中会报错

var common = require('../tool/test.js')

common.saveToolNo();

禁止页面滚动

方法一：

设置要禁止的页面： disablescroll: true

需要配合设置： enablePullDownRefresh: false

disablescroll的优先级小于enablePullDownRefresh

方法二：设置页面的根元素绝对定位

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;

小程序没有数据绑定

小程序没有数据绑定，使用bindblur，更新value

new Date()

new Date()参数应该用时间戳

手机测试小程序不支持new Date("2021-02-07 14:34:03.000+0800")
但支持new Date(1612679643000))

解决回调地狱

loginToGetCode、request1、request2都返回new Promise

比如

 function loginToGetId(self) {
    return new Promise((resolve, reject) => {
        tt.login({
            success(res) {
                resolve(res.code)
                console.log(`login 登录成功 ${res.code}`);
            },
            fail(res) {
                reject(res)
                console.log(`login 调用失败`);
            }
        })
    })
}

 function request1(config, self) {
     let {
        url = '',
        data = {},
        method = 'GET',
        base = ''
    } = {...config}
    return new Promise((resolve, reject) => {
         tt.request({
            url: base || BASE_URL + url,
            method: method,
            data: {...data},
            success: (res) => {
                // tt.hideLoading();
                if(res.code) {
                    resolve(res.data)
                } else {
                    resolve(res)
                }
                
            },
            fail: (res) => {
                // tt.hideLoading();
                reject(res)
            },
    })
}

function loginToGetUserInfo(self){
    return new Promise((resolve, reject) => {
        loginToGetId(self).then((res)=>{
            return request1(res, self);
        }).then((res)=>{
            return request2(res, self);
        }).then((res)=>{
            // console.log('login1 获取用户信息成功:',res)
            resolve(res)
        }).catch((res)=>{
            // console.log('login1 catch res:',res)
            reject(res)
        })
    })

}

input 踩坑

在onblur和onconfirm监听函数中请求接口不能弹出软键盘

在页面中设置禁止滚动

在要设置的页面的json中设置

"disableScroll": true

但是input如果在页面下方，设置了它，就不能弹出软键盘

onShow() 和 onLoad()

第一次打开小程序执行onLoad,弹出页面就会执行onShow