阅读 66

小程序踩坑记

自适应 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

文章分类
前端
文章标签