uni-app 个人记录
定义 router 路由拦截
自动构建（pages.json）对应的路由表
getCurrentPages() 获取当前页面栈的实例
通过 getCurrentPages() 函数获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
结合 uni-read-pages 获取对应页面信息 （可以进行数据修改，方法调用等）。
注：默认已进行 uni-read-pages 配置后的方法定义
// pages.json
{
"pages": [
{
"name": "home",
"path": "pages/home/index",
}
}
}
// 获取已缓存页面的相关信息
const getPagesInfo = (name = 'home') => {
return new Promise((resolve, reject) => {
const pages = getCurrentPages();
if (pages.length) {
for (const i in pages) {
const routeArr = pages[i];
if (routeArr === name) {
resolve(pages[i]);
return;
}
}
reject(false);
} else {
reject(false);
}
});
};
- 在 .vue 的模板文件中随意调用, 默认获取 index 页面实例
this.$getPages();
- 修改页面实例的信息
this.$getPages().then((self) => {
// 小程序修改方法
self.$vm.demo = "1";
// h5 修改方法
self.demo = "2";
});
引入公共 js
- 在 index.html 直接引入 js 的问题，直接引入 url 是没问题。
<script
type="text/javascript"
src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"
></script>
- 但如果是直接引入本地的 js 则不行，主要原因还是因为 uni-app 的路由、打包机制问题，所以我们需要另辟蹊径。
- Vue 项目的加载过程 index.html->main.js->app.vue->index.js。所以我们可以在选择在 main.js 内引入本地 js。
- 建议定义 public 公共文件夹目录，而后引入。
// main.js
import "@/public/demo.js";
自定义条件编译平台
HBuilderX 会根据 package.json 的扩展配置，在运行、发行菜单下，生成自定义菜单（自定义名称），路径为【发行】——【自定义发行】——【自定义名称】
/**
package.json其它原有配置
UNI_PLATFORM 仅支持填写 uni-app 默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
BROWSER 仅在 UNI_PLATFORM 为 h5 时有效, 目前仅限如下枚举值：Chrome、Firefox、IE、Edge、Safari、HBuilderX
*/
{
"uni-app": { // 扩展配置
"scripts": {
"custom-platform": { //自定义编译平台配置，可通过cli方式调用 custom-platform 为自定义名称
"title": "自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
"BROWSER":"", //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
"env": { //环境变量
"UNI_PLATFORM": "", //基准平台
"MY_TEST": "", // ... 其他自定义环境变量，key\value都可自定义
},
"define": { //自定义条件编译
"CUSTOM-CONST": true //自定义条件编译常量，建议为大写
}
}
}
}
}
小程序更新提示
checkUpdate() {
if (uni.canIUse("getUpdateManager")) {
const updateManager = uni.getUpdateManager();
updateManager.onCheckForUpdate((res1) => {
if (res1.hasUpdate) {
updateManager.onUpdateReady((res2) => {
uni.showModal({
title: "更新提示",
content: "新版本已经准备好，是否重启应用？",
success: (res3) => {
if (res3.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
} else if (res3.cancel) {
uni.showModal({
title: "温馨提示",
content: "本次更新可能会导致旧版本无法使用，请更新至新版本。",
success: (res4) => {
if (res4.confirm) {
updateManager.applyUpdate();
} else if (res4.cancel) {
this.checkUpdate();
}
},
});
}
},
});
});
}
});
updateManager.onUpdateFailed((res) => {
// 新的版本下载失败
uni.showModal({
title: "温馨提示",
content: "新版本已经上线，请您删除当前小程序，重新打开。",
});
});
} else {
uni.showModal({
title: "温馨提示",
content: "当前微信版本过低，无法使用该功能，请升级最新微信版本后重试。",
});
}
}
下载图片
uni.downloadFile({
url: "地址",
success: (res) => {
const tips = () => {
uni.showToast({
title: "保存失败",
duration: 2000,
});
}
if (!res.tempFilePath) {
tips()
return
}
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: "保存成功",
duration: 2000,
});
},
fail: () => {
tips()
},
});
},
fail: (res) => {
uni.showToast("保存失败");
},
});
（微信）小程序授权权限
uni.getSetting({
success: (res) => {
// scope 信息可参考 scope 列表
if (res.authSetting["scope.writePhotosAlbum"])
return console.log("已获得相册权限，执行后续代码");
uni.authorize({
scope: "scope.writePhotosAlbum",
success: () => {
console.log("已获得相册权限，执行后续代码");
},
fail: () => {
uni.showModal({
title: "提示",
content: "请授权相册权限",
showCancel: false,
success: (sss) => {
if (sss.confirm) uni.openSetting();
},
});
},
});
},
});
获取元素信息
const query = uni.createSelectorQuery().in(this);
query.select(`#id`).boundingClientRect();
query.exec((res) => {
console.log(res);
});
分包 and 分包预加载
监听网络状态
// App.vue
export default {
onShow: function() {
this.networkChange()
},
globalData: {
networkTips: undefined,
networkTipsShow: false
},
methods: {
// 网络监听
networkChange() {
const isTips = (type = true) => {
if(!type) {
this.globalData.networkTips = setTimeout(() => {
this.globalData.networkTipsShow = true
uni.showModal({
content: '网络异常',
showCancel: false
})
}, 3000)
} else {
if(this.globalData.networkTipsShow) {
uni.showModal({
content: '网络已连接',
showCancel: false
})
}
this.globalData.networkTipsShow = false
clearTimeout(this.globalData.networkTips)
}
}
uni.onNetworkStatusChange((res) => {
isTips(res.isConnected)
});
uni.getNetworkType({
success: (res) => {
isTips(res.networkType !== 'none')
}
});
},
}
}
滑块验证功能(兼容APP)
...不定时更新
Powered by Waline v2.15.8