引言
随着移动互联网的快速发展，小程序作为一种轻量级的应用形态，在用户使用体验和开发者便捷性方面受到了广泛关注。本篇博客将带你深入探索小程序的视图层和逻辑层，并介绍其生命周期。
1.什么是小程序
小程序是一种轻量级的应用程序，可以在移动设备上运行。它们通常由开发者使用特定的开发工具和框架创建，并以微信小程序、支付宝小程序等形式提供给用户使用。
小程序相比于传统的App具有以下几个特点：
无需下载安装：用户可以直接在微信、支付宝等平台中搜索、打开并使用小程序，无需从应用商店下载和安装。 占用空间少：小程序相对于传统App体积较小，不会占用过多的存储空间。 快速启动：小程序的启动速度较快，用户可以迅速进入使用界面。 无需更新：开发者对小程序进行更新时，用户无需手动更新，系统会自动更新，保持用户使用的是最新版本。 便捷分享：小程序可通过二维码、链接等方式进行分享，方便用户之间的传播和使用。 小程序可以提供各种功能和服务，如购物、社交、生活服务、新闻资讯、游戏等。开发者可以根据自身需求选择合适的平台和工具进行开发，通过小程序向用户提供更加便捷和灵活的应用体验。
2.小程序可以干什么
小程序有很多用途，可以为用户提供各种便利的功能和服务。以下是一些常见的小程序用途：
购物：许多电商平台和品牌都有自己的小程序，用户可以在小程序中浏览商品、下单购买，并进行支付和物流跟踪。
生活服务：小程序可以提供生活服务，例如美食外卖、打车服务、酒店预订、影票订购等，方便用户在手机上就能完成相关操作。
社交娱乐：许多社交平台、短视频应用和游戏平台也有相应的小程序。用户可以通过小程序与好友聊天、分享动态、玩游戏等。
教育学习：一些教育机构和在线学习平台提供小程序，用户可以在小程序中学习课程、查看学习进度和参与互动。
新闻资讯：许多新闻媒体和内容平台都拥有自己的小程序，用户可以在小程序中阅读新闻、浏览文章，并进行评论和分享。
金融服务：银行、证券公司和支付平台等金融机构也提供小程序，用户可以进行账户查询、转账、理财等操作。
除了以上用途，还有很多其他领域的小程序，满足不同用户的需求。小程序通过轻量级、便捷和快速启动的特点，为用户提供了更加灵活和高效的移动应用体验。
3.小程序视图层
视图层是小程序的前端部分，负责展示页面内容和处理用户操作。下面是视图层的目录结构：
wxml
<!--pages/a/a.wxml--> <text>pages/a/a.wxml</text> <view> {{message}} </view> <view wx:for="{{array}}"> {{item}} </view> <view wx:for="{{users}}" wx:key="id"> {{item.id}} {{item.name}} </view> <view wx:if="{{view == '1'}}"> WEBVIEW </view> <view wx:elif="{{view == '2'}}"> APP </view> <view wx:else="{{view == '3'}}"> MINA </view> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> <view id="tapTest" data-hi="Weixin" data-meetingSteate="6" bindtap="tapName"> Click me! </view>
js
// const { View } = require("XrFrame/kanata/lib/index"); // pages/a/a.js Page({ /** * 页面的初始数据 */ data: { message: 'Hello MINA!', array: [1, 2, 3, 4, 5], users:[{id:1,name:'123'},{id:2,name:'456'}], view:1, staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'}, }, tapName: function(event) { console.log(event); console.log(event.target.dataset); }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
4.小程序生命周期
- onLaunch：当小程序初始化完成时，会触发onLaunch(全局触发一次)
- onShow：小程序启动或后台进入前台时，触发onShow
- onHide：小程序隐藏或从前台进入后台，触发onHide
- onError：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
- onLoad：听页面加载
- onReady：页面初次渲染完成
- onUnload：页面卸载
当小程序启动后，首先完成小程序的初始化（onLaunch）和显示（onShow），然后页面的加载（onLoad）、显示（onShow）和渲染（onReady’）。上面的图形走势（1、2、3、4、5）。
小程序进入后台时，先触发页面的生命周期函数onHide，再触发小程序的生命周期函数onHide；小程序启动显示或从后台进入前台时，先触发小程序的生命周期函数Onshow，再触发页面的生命周期函数onShow。
解释两个概念：
后台：当用户点击左上角关闭（或者右上角退出），或者按了home键离开微信，小程序并没有直接销毁，而是进入了后台。
前台：当再次进入微信或者再次打开小程序，又会从后台进入前台。
只有当小程序进入后台一定时间（目前是5分钟），或者系统资源占用过高，才会被真正的销毁。
