小程序的开发总结

开发技术栈：mpvue + Vant Weapp + 小程序

1. 小程序组件的生命周期

因为使用了mpvue的原因，小程序组件不仅有vue的生命周期函数，并且还还同时拥有小程序的生命周期函数（和vue的生命周期函数同级）

小程序的生命周期函数包括：

onLoad () : 页面加载时触发。一个页面只会调用一次

onShow () : 页面显示/切入前台时触发 => 常用，每次加载组件请求数据，vue中一般用路由监听实现

onReady () : 页面初次渲染完成时触发

onHide () : 页面隐藏/切入后台时触发 => 常用

onUnload () : 页面卸载时触发

2. 上拉刷新，下拉加载

扫描二维码关注公众号，回复： 4369609 查看本文章

小程序中的上拉刷新和下拉加载是是比较容易实现的，步骤如下：

在页面对应的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>

</div>

常见属性：

5. 常用的小程序的原生组件

view：视图容器

scroll-view：可滚动视图区域

swiper：滑块视图容器（轮播图）

image：图片（主要使用 lazy-load 属性，做图片懒加载）

input：输入框（主要使用 confirm-type 属性，设置键盘右下角按钮的文字，仅在type='text'时生效）

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

小程序的开发总结

猜你喜欢