因为我这个小程序是用mpvue框架搭的，所以下面一些示例代码中会含有mpvue语法，仅供参考，不喜勿喷。
-
分包
小程序最多只支持8M大小的项目，有时候项目比较庞大，则需要使用分包，而分包大小又不能超过2M
下面给出分包的写法
在app.json中
{"pages": [ // 这是主包的文件 "pages/home/main", "pages/login/main" ], "subpackages": [ // 这是分包的文件 { "root": "pages/exam/", "name": "exam", "pages": [ "main", "examPaper/main", "exercise/main" ] } ]}
跳转到分包的路径是root+pages，如
wx.navigateTo（{ url: '/pages/exam/examPaper/main' }）注意，带有底部导航栏中的页面（也就是配置在app.json中tabBar中的页面）必须写在主包中
- 生命周期
我这里简单说一下onLoad，onUnload，onShow，onHide的几种常见场景
a.小程序由前台进入后台（即用户点击右上角退出小程序或者按home键离开微信），触发onHide
b.带有底部导航栏中的页面互相切换时（wx.switchTab），触发onShow与onHide
c.使用wx.navigateTo或者wx.redirectTo的切换，页面显示触发onLoad、onShow，离开页面触发onUnload（不会触发onHide）
d.由普通页面使用wx.switchTab切换到带有底部导航栏中的页面时，如从登录页切换至首页，登录页没有触发生命周期，首页触发onLoad，onShowe.由父界面跳转到子页面时，父页面触发onHide，子界面触发onLoad，onShow。从子页面返回父页面时，子页面onUnload，父页面onShow
- 路由跳转及传参
wx.navigateTo({ url: '/pages/logs/main?id=1' })
得到参数：$root.$mp.query.id
由普通页面跳转到带有底部导航栏的页面是用wx.switchTab，普通跳转用wx.navigateTo（相当于vue中的this.$router.push），wx.redirectTo（相当于vue中的this.$router.replace），wx.navigateBack({ delta: 1 }) （相当于vue中的this.$router.go(-1)） -
获取元素节点信息
wx.createSelectorQuery().select('#test').boundingClientRect((rect) => { console.log(rect) }).exec() -
下拉刷新上拉加载
首先需在app.json中做如下配置才能使用onPullDownRefresh，onReachBottom两个事件
"window": { "enablePullDownRefresh": true }onPullDownRefresh() {
// dosomething wx.stopPullDownRefresh() // 为解决下拉之后页面迟迟没有回弹，最好加上这一行},
onReachBottom() {// dosomething}
如不要下拉刷新上拉加载，可在当前页的配置文件main.json中将enablePullDownRefresh关闭{ "enablePullDownRefresh": false } -
图片懒加载
a. 图片加载错误时用默认图片代替
errorImg(){
// 将加载失败图片替换为默认图片}
b. 懒加载
方法一：使用IntersectionObserver
小程序提供了一个IntersectionObserver的API，可以用来监听元素与页面的相交情况
可查看微信相关文档： https://developers.weixin.qq....
// 判断class='home'的元素是否出现在屏幕中
onLoad() {
const _observer = wx.createIntersectionObserver()
_observer.relativeTo('.scroll-view')
.observe('.home', (res) => {
console.log(res.intersectionRatio > 0) // 如果大于0则表示相交
})
}
//或者
onLoad() {
const _observer = wx.createIntersectionObserver()
_observer.relativeToViewport()
.observe('.home', (res) => {
console.log(res.intersectionRatio > 0)
})
}
方法二：使用onPageScroll
onPageScroll: throttle(
function(e) {
wx.createSelectorQuery().select('.home').boundingClientRect((ret) => {
if (ret.top <= wx.getSystemInfoSync().windowHeight) { // 判断是否在显示范围内
// dosomething
}
}).exec()
}, 100
),
throttle(fn, interval) { // 节流
let enterTime = 0 // 触发的时间
const gapTime = interval || 300 // 间隔时间，如果interval不传，则默认300ms
return function() {
const context = this
const backTime = new Date() // 第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context, arguments)
enterTime = backTime // 赋值给第一次触发的时间，这样就保存了第二次触发的时间
}
}
}
-
动态改变顶部导航栏的文字
导航栏上方标题是通过main.json配置的
{
"navigationBarTitleText": "首页"}
有时同一个页面根据页面内容会有不同的标题，此时需要动态配置导航栏标题名
wx.setNavigationBarTitle({title: title})
有时希望整个页面布满屏幕，没有导航栏文字，如上图。此时可以在当前页面的main.json中配置
{ "navigationStyle": "custom" }
- textarea样式穿透
小程序的textare中的z-index层级是最高的，任何元素都无法遮住。这里说一下思路，就不贴代码了。
做一个跟当前textarea一样的div（简称克隆div），textarea内容也展示到div中。当对话框弹出时，textarea隐藏，克隆div展示，对话框关闭时，textarea展示，克隆div隐藏
- 滚动弹出层时，弹出层下方的内容也会滚动
方法一：改变scroll-y的值
弹出层出现时scrollY=false
弹出层关闭时scrollY=true
方法二：不需要滚动时将页面样式设为position:fixed，但此方法会使页面滚到到顶部，介意慎用
方法三：将滚动页面最外层加上此属性：catchtouchmove="return" -
键盘弹出
页面下方有一个操作栏，当键盘弹起时，操作栏要定位在键盘上方，此时要用到小程序的一个事件，此为小程序文档截图
https://developers.weixin.qq....
写法参考：