小程序开发的经验比较少，记录一下自己遇到过的问题和学习笔记
1，从A页面跳转B页面后,如何刷新B页面
问题描述： 有的场景从A页面跳转B页面时，需要在B页面实时获取A页面的详情内容，这个时候就需要在跳转成功后触发一次刷新，如何实现捏？
当然啦，实现方法也要根据实际场景去选择，以下是我个人的解决方案
- a方案：
使用onshow()方法 在B页面的.js文件中添加onShow()方法
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.refresh() //对应的刷新方法
},
优点： onshow()是在每次页面呈现时都会被调用的一个生命周期，所以从A页面跳转B页面时，会再次触发onshow()方法，跳转后刷新B页面，实现方式简单。
缺点： 但这个方案只要页面呈现就会触发onshow()，有些场景可能不适用，比如B页面是一个文章内容，当我文章看到一半，把小程序切到后台看了一下别的APP，再次切回来，就会触发onshow()方法，文章重新刷新，我看的位置也被更新了，这样体验感会不好，同时每次页面展示都会调用接口造成浪费的资源
- b方案：
使用全局变量做标记
在app.js文件中添加添加全局变量-是否跳转到B页面标识
/**
* 添加全局变量-是否跳转到B页面标识-navigateToBPage
*/
App({
navigateToBPage:false,
})
在A.js文件中添加跳转事件，并变更navigateToBPage为true
/**
* 跳转到B页面方法
*/
navigateToBPage: function (e) {
let app = getApp();
app.globalData.navigateToBPage = true; //变更navigateToBPage为true
wx.navigateTo({
url: "/pages/BPage/BPage"
})
},
在B.js文件中获取全局变量navigateToBPage，并还原navigateToBPage为false
/**
* 跳转到B页面方法
*/
navigateToBPage: function (e) {
let app = getApp();
app.globalData.navigateToBPage = true; //变更navigateToBPage为true
wx.navigateTo({
url: "/pages/BPage/BPage"
})
},
优点： 在跳转时
缺点：
- c方案：跳转成功后,拿到要跳转的B页面page，触发更新方法，
/**
* 跳转到B页面方法
*/
navigateToBPage: function (e) {
let url ="pages/BPage/BPage"
wx.switchTab({
url:"/pages/BPage/BPage",
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null || page.route!=url) return;
page.jumpRefresh(); //B页面中的更新方法
}
})
},
2，切换底部tabbar不触发onload()
问题描述： 由于onload()生命周期只在组件初次加载时才会被调用，所以如果在不是第一次进入页面时，切换底部tabbar就不会触发onload()，这时我们可以使用onTabItemTap() 函数手动触发onload()
使用方法：在对应的.js文件中添加以下代码
Page({
onTabItemTap(item) {
this.onLoad();
}
})
3，wx小程序switchTab跳转不可以带参数（从A跳转到B）
解决方法：
-
方法一：利用全局变量
通过设置app.js中的globalData中的值来解决switchTab带参数跳转的问题
具体实现方法：
1，设置全局变量
/** * 添加全局变量-跳转时需要的参数 */ App({ //跳转时需要的参数 billData:{ id:'', cycle:'' }, })2，在A tab页面跳转方法中更新全局变量
/** * 跳转函数 */ navigateToBPage: function (e) { let app = getApp(); let url = "pages/BPage/BPage"; app.globalData.billData = { id:this.data.id, cycle:this.data.cycle }, //wx.switchTab: url 不支持 queryString，利用全局数据 wx.switchTab({ url:"/pages/BPage/BPage", success: function (e) { var page = getCurrentPages().pop(); if (page == undefined || page == null || page.route!=url) return; page.onLoad(); } }) },3，在B tab页面中获取全局变量，并还原
/** * 在初始化函数中获取全局变量，并还原 */ initData() { let app = getApp(); var billData = app.globalData.billData; //获取全局变量 this.setData({ billData, }) //还原全局数据 app.globalData.billData = { id:'', cycle:'' } } -
方法二：利用storage来缓存数据，跳转到tab页之后再获取storage，并清除数据，类似方法一
wx.setStorageSync('xxx',xxxxxx)
4，小程序引用van-dropdown-menu，滚动会手势穿透
问题描述： 在微信小程序中使用Vant组件库提供的DropdownMenu下拉菜单组件时，当内容超过一定高度时，下拉框内容会出现滚动条，当下拉框滚动到底部时，仍划动下拉区域，顶部会出现间隙，继续划动会导致底层页面也随之滚动，这就是滚动手势穿透。
解决方案： DropdownMenu下拉菜单组件内部结合了Popup弹出层组件。 目前，Popup组件可以通过lock-scroll属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，Vant组件为开发者提供了一个推荐方案以完整解决滚动穿透：page-meta
当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式
首先在对应的.wxml文件中加入以下代码
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{{ showDropdownMenu ? 'overflow: hidden;' : '' }}" />
<!-- 下拉框 -->
<van-dropdown-menu active-color="#1989fa" style="width: 65%;">
<van-dropdown-item value="{{ hotelId }}" options="{{ hotelList }}" bind:open="openDropdown" bind:close="closeDropdown"/>
</van-dropdown-menu>
在对应的.js文件中加入以下代码
openDropdown() { this.setData({showDropdownMenu: true })},
closeDropdown() { this.setData({showDropdownMenu: false }) },
当下拉菜单显示时，将page-style属性值设置为overflow: hidden，隐藏时置空，这样就很好的解决了滚动手势穿透的问题。
5，在.wxml文件中模块引用js方法
问题描述： 在微信小程中如何在.wxml中直接引用js方法返回字段
举个栗子： 千分位金额数据 (8,887.21)
<view>{{BillModule.formatMoney(data.price)}}</view>
<!-- 格式化金额 -->
<wxs module="BillModule">
function formatMoney (value) {
return value.toLocaleString('en-US');
}
module.exports = {
formatMoney: formatMoney
}
</wxs>
