开发技术栈:mpvue + Vant Weapp + 小程序
1. 小程序组件的生命周期
因为使用了mpvue的原因,小程序组件不仅有vue的生命周期函数,并且还还同时拥有小程序的生命周期函数(和vue的生命周期函数同级)
小程序的生命周期函数包括:
onLoad () : 页面加载时触发。一个页面只会调用一次
onShow () : 页面显示/切入前台时触发 => 常用,每次加载组件请求数据,vue中一般用路由监听实现
onReady () : 页面初次渲染完成时触发
onHide () : 页面隐藏/切入后台时触发 => 常用
onUnload () : 页面卸载时触发
2. 上拉刷新,下拉加载
小程序中的上拉刷新和下拉加载是是比较容易实现的,步骤如下:
- 在页面对应的main.json 配置里面配置 enablePullDownRefresh 和 onReachBottomDistance 这两个属性
{
"enablePullDownRefresh": true,
"onReachBottomDistance": "30px",
"usingComponents": {
"van-nav-bar": "/static/vant/nav-bar/index",
"van-loading": "/static/vant/loading/index"
}
}
- 监听页面的 onPullDownRefres() 和 onReachBottom () 函数
常见的页面事件有三种:上拉刷新、下拉加载、页面滚动。都是和生命周期函数同级
3. 小程序的图片懒加载
vue中实现图片懒加载的效果需要使用插件 vue-lazyload ;但是在小程序里面不需要这么复杂,只需要使用小程序提供的 image 组件并使用它的 lazy-load 属性即可。
注意: 一般使用图片懒加载的情况都是在图片列表中,使用一般可以在这个图片列表之外套一个 scroll-view 组件(一般是纵向的)!
4. mpvue框架下小程序中的富文本的显示 mpvue-wxParse
安装:npm i mpvue-wxparse
页面中引入:import wxParse from 'mpvue-wxparse';
components: { wxParse },
使用wxParse组件:
<div>
<wxParse :content="article" @preview="preview" @navigate="navigate" />
</div>
常见属性:
5. 常用的小程序的原生组件
view:视图容器
scroll-view:可滚动视图区域
swiper:滑块视图容器(轮播图)
image:图片(主要使用 lazy-load 属性,做图片懒加载)
input:输入框(主要使用 confirm-type 属性,设置键盘右下角按钮的文字,仅在type='text'时生效)
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!