uni-app 学习笔记

注意事项

1. 背景图片不支持本地图片 支持网络路径/base64格式
2. 字体同上 也不支持本地字体

rpa计算方式

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

快速判断运行环境

uEnvDev、uEnvProd 可以快速生成对应 development、production 的运行环境判定代码。

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

img

img 必须写宽高 不写默认很大

/* 加上这个就可以不写宽高了 mode="widthFix" */
<img src="https://ybboss.oss-cn-beijing.aliyuncs.com/img/banner.png" mode="widthFix" width="100%" alt="">

页面跳转

//关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({
    url: '/pages/index/index',
})
//H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。
uni.reLaunch({
    url: '/pages/index/index'
})

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({ 
    url: '/pages/index/index',
})

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
    url: '/pages/index/index'
})


//关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
uni.navigateBack({
    url: '/pages/index/index'
})

//原文地址：https://uniapp.dcloud.net.cn/api/router.html#navigateto

页面存取

//存
uni.setStorage({
    key: "token",
    data: res.userInfo.avatarUrl
})

//取
uni.getStorageSync("token")   

获取页面参数

小程序 上传文件报错: upload file:fail url not in domain list
解决：因为小程序公众平台没有填写地址

获取页面参数

// 获取当前小程序的页面栈
let pages = getCurrentPages();
// 数组中索引最大的页面--当前页面
let currentPage = pages[pages.length-1];
// 打印出当前页面中的 options
console.log(currentPage.options) // 地址栏传入的值

分享

<button class="share-now" open-type="share">去分享</button>

onShareAppMessage(res) {
     return{
         title: "xxx欢迎你",
         path: "pages/hotDetail/index",
         imageUrl: "https://ybboss.oss-cn-beijing.aliyuncs.com/img/message.png",
         desc: "xxx哈哈哈",
         content: "xxx集团",
         success(res){
             uni.showToast({
                title:'分享成功'
            })
        },
        fail(res){
            uni.showToast({
                title:'分享失败',
                    icon:'none'
                })
            }
        }
},