目录
1、在分享小程序的时候，若需要判断用户是否有权限和判断是否显示返回键，则应该在从分享界面进入的时候进行判断
一、自定义导航栏
（1）返回问题
1、判断页面栈的个数
console.log(getCurrentPages().length)这个可以查看页面栈的个数，从而监控界面，在不同情况下，做出不同的判断。此处我设置了三种情况。
?
2、js代码的书写
let haveBack
let showCapsule
if (getCurrentPages().length === 1) {
console.log(getCurrentPages().length)
// 当只有一个页面栈的时候
showCapsule = false
haveBack = false
} else if (getCurrentPages().length === 2) {
console.log(getCurrentPages().length)
// 当只有2个页面栈时
showCapsule = true
haveBack = false
} else {
console.log(getCurrentPages().length)
// 大于三个页面栈
showCapsule = true
haveBack = true
}
this.setData({
haveBack: haveBack, //胶囊内小房子房子是否显示
showCapsule: showCapsule //左胶囊是否显示
})?（2）分享问题
1、在分享小程序的时候，若需要判断用户是否有权限和判断是否显示返回键，则应该在从分享界面进入的时候进行判断
在一开始我是想用导航栏处解决的，因为当时返回键的代码为最简单的wx.navigateBack()，若直接进入了一个非首页的界面，返回键将会无效。后续的学习中知道了一个接口——getCurrentPages，上文也有提及了。还有的是判断权限问题，本来想着导航栏组件在每个界面都有调用，就把判断写在组件的js文件里面，不过最后选择了在app.js处判断。
2、返回键无效处理方法（js代码）
// 返回上一页面
_navback() {
var pages = getCurrentPages(); // 当前页面
var beforePage = pages[pages.length - 1]; // 前一个页面
if(beforePage.route=="pages/personalProject/personalProject"){
wx.switchTab({
url: '/pages/center/center',
})
}else if(pages.length==1){
wx.switchTab({
url: '/pages/home/home',
})
}
else{
wx.navigateBack();
}
// wx.navigateBack()
},3、分享权限解决方法
app.js处代码
在onLaunch上加上一下代码，此处用的是getLaunchOptionsSync这个接口，它可以知道场景值，从而对不同场景值进行不同的处理。wx.getStorageSync("isLogin")==false是在判断它的权限在Storage里面是否是true。
//判断是否从分享界面进来
var obj = wx.getLaunchOptionsSync()
console.log(obj.scene)
if(obj.scene != 1001){
if(wx.getStorageSync("isLogin")==false){
wx.reLaunch({
url: '/pages/index/index'
})
}
}（3）左胶囊大小的设置
这个简单，去官方文档了解一下wx.getMenuButtonBoundingClientRect()就可以解决了。
（4）多加一个插曲
导航栏出现了一个小bug，在每次加载进去的时候，有几根白影闪过，这次的原因是因为图片设置的mode为heihtFix，且图片只设置了高度，从而导致渲染过程被可视化了，导致观感变差。
正确代码::
<image src='https://aliyun-pdt-oss.oss-cn-shenzhen.aliyuncs.com/ImagePDT/back.png' class='back-pre' style="height: {{height*0.50}}px;width: {{height*0.55}}px;"/>错误示范：
?
<image src='https://aliyun-pdt-oss.oss-cn-shenzhen.aliyuncs.com/ImagePDT/back.png' class='back-pre' mode="heighFix" style="height: {{height*0.50}}px;"/>二、下载进度条
（1）js代码、都一样的
//下载并预览文件
previewFile: function (e) {
let _this = this;
var temp = e.currentTarget.id;
var index = _this.data.cjn_projectItem.ProjectAttachments.findIndex(
(item) => item.ProjectAttachmentId == temp
);
console.log(index);
_this.setData({
projectFilePath: _this.data.cjn_projectItem.ProjectAttachments[index].FilePath,
});
//下载文件并获取进度赋值给downloadTask
const downloadTask = wx.downloadFile({
url: "https://" + _this.data.projectFilePath, //后端返回文件接口
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
console.log(res, "下载成功");
_this.setData({
temporaryFilePath: res.tempFilePath, //将下载的文件临时路径赋值给filePath,用于预览图片
});
console.log(_this.data.temporaryFilePath);
wx.openDocument({
filePath: _this.data.temporaryFilePath,
success: function (res) {
console.log("打开文档成功");
},
fail: function (res) {
console.log("预览失败");
wx.showToast({
title: "预览失败",
icon: "none",
duration: 2000,
mask: true,
});
},
});
},
fail: (err) => {
console.log("下载失败");
},
});
//提取downloadTask的值并赋值
downloadTask.onProgressUpdate((res) => {
if (res.progress === 100) {
this.setData({
add: '100'
});
} else {
this.setData({
add: res.progress
});
console.log(this.data.add)
}
});
},（2）微信自带的progress
wxml：
<progress percent="{{add}}" show-info active='{{isDown}}' stroke-width="14" />（3）Vant Weapp组件库的progress
project.json：
"usingComponents": {
"van-progress": "/vant-weapp/progress/index"
},wxml：
<view style="width:90%;margin-top:28rpx"><van-progress percentage="{{add}}" /></view>（4）Vant Weapp组件库的circle
project.json：
"usingComponents": {
"van-circle": "/vant-weapp/circle/index",
},wxml：
<van-circle value="{{ add }}" color="{{ gradientColor }}" text="下载中" speed="none"/>（5）效果图
?