微信小程序、UNI-app、taro-app学习总结

现今社会在数据的联通和生成和以前有了很多的不同，以前只有线上网页能够让人们能够接触，现在移动设备的普及让信息的传播和生成更加多元多变。人们对获取信息的方式也开始有了新的要求：手机上的app越装越多，移动设备也越来越多，这让人不禁想到能不能不装这些东西，我想用就有，不想用就不要呢===》小程序应运而生。
小程序首先在微信app中上线，风头一时无两，优点突出，让很多人对APP有了新认识。这样的流行让我们前端开发对象网页也有了新的认识。应运而生了很多的能够自主编写小程序的工具，今天我就带大家认识下使用比较的多的几个：微信自己的开发者工具，uni-app，taro-app
编辑工具对比：

微信	uni-app	taro-app
微信开发者工具	Hbuilder X	VS code

结构对比：

微信：

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面的组成

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

层级关系就更简单明了了

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

uni-app：

页面层级关系

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json            
    

taro-app：

页面层级关系

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

我们能从中看出什么呢：那就是结构看起来都是一样的：从根目录的app.js/app.vue/app.jsx对其他页面开始层级管理（这里的app文件又教程入口文件），也在这里定义了整个应用的开始和结束（应用生命周期）。
说道生命周期，在学习vue和react时我们都学习到过，它代表了某个页面实例从开始创建，初始化数据，编译模板，挂在dom->渲染，更新->渲染，卸载等一系列过程。在这个过程中我们能找到不同时间段的钩子函数，这让我们能够更好的对应用产生合理的影响优化等等。在小程序中我们也用到了，不过可能是应为使用平台的不一样，让小程序不再是单独生命周期，它有了不一样的生命周期分类：应用生命周期-----页面生命周期-----组件生命周期

我们拿微信小程序来举例：应用生命周期
小程序被使用和关闭就代表这个周期的开始与结束，它是入口文件（根目录下的app.js/app.vue/app.jsx）所使用的的，从上面的截图中我们也能够看到一些端倪：

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

含义详解

属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调——监听小程序初始化。
onShow	function		否	生命周期回调——监听小程序启动或切前台。
onHide	function		否	生命周期回调——监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function		否	未处理的 Promise 拒绝事件监听函数。	2.10.0
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

大家能看出什么呢。应用的生命周期不再是给用户和开发人员看的了，它给了整个应用，让整个应用独立起来，形成一个自给自足的环境。
其他工具上的应用生命周期中的钩子函数可能不一样，但是作用是一样的。

uni-app：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

演示代码

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

注意：可能是由于微笑小程序和uni-app的开发原理偏向于Vue.js，所以在很大程度上两者有着明显的相同之处。

vue生命周期钩子函数说明

函数名称	作用说明
BeforeCreate（）{}	创建之前
Created（）{}	创建之后，此处可以得到data属性，可以修改data，可以发送异步请求，这里还存在#el 但是这个#el是一个虚拟的dom结构，仅仅存在于内存中
Beforemounte（）{}	数据创建完成，但是变量未编译
Mounted（）{}	编译完成，并替换真实dom结构
Beforeupdate（）{}	当data数据变化时进行操作，只保存data未改变之前的值
Updated（）{}	当data数据变化时进行操作，只保存data改变之后的值
Beforedestroy（）{}	即将卸载Vue实例，在使用v-if 或者动态组件切换的时候会触发，简单来说这就是一个用来销毁的钩子，所以这里一般用来清除定时器的
Destroyed（）{}	卸载完成

taro：

taro的应用生命周期可能就不太一样了。
taro使用的编程原理偏向于react，不再是单独

// onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch
  componentWillMount() {}
  // onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch，在 componentWillMount 后执行
  componentDidMount () {}
  // onShow
  componentDidShow () {}
  // onHide
  componentDidHide () {}
  // onError
  componentDidCatchError () {}
  // onPageNotFound 404
  componentDidNotFound () {}
  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数

这些钩子函数在应用运行期间起到的作用其实都差不多。其中需要注意到的是componentDidMount这个，它运行在willMount之后，但是它和willMount的作用基本一样，都是监控应用的初始化，能够访问应用的初始化参数
说完应用的生命周期该说说页面生命周期了，从上面说命的小程序整个的页面结构上来看，它的每一个显示页面也都是拥有独立的生命周期的，小程序由于使用环境限制页面一般情况都不是立刻加载完成，只有你需要查看时才出现渲染的，所以他们也有各自的生命周期钩子函数

微信：

从结构上看微信所有的页面都是存放在pages文件夹，页面代码中指定了初始数据，生命周期回调、事件处理函数等等，

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载
onPullDownRefresh	function			监听用户下拉动作
onReachBottom	function			页面上拉触底事件的处理函数
onShareAppMessage	function			用户点击右上角转发
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发
其他	any			开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这里的生命周期回调体现了单个页面的逻辑，让页面能够完美的展示所有的效果。也让开发人能在开发阶段充分梳理逻辑，优化代码。

uni-app：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0

注意：

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档

onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

注意2：

• onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
• 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，参考。
• 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
• 在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。

结语：这些只是我在学习过程中记录下的一点结构性知识，可能不够全面。其他方面也会开始整理，对于这些工具软件使用，语言的理解会逐渐加强。2020年逆战学习中