二、小程序的框架周期
一、小程序的逻辑 手册
使用App()来注册一个小程序,必须在app.js
中注册,且不能注册多个
App({//如下为小程序的生命周期 onLaunch: function() { },//监听初始化 onShow: function() { },//监听显示(进入前台) onHide: function() { },//监听隐藏(进入后台:按home离开微信) onError: function(msg) { },//监听错误 //如下为自定义的全局方法和全局变量 globalFun:function(){}, globalData: 'I am global data' })
使用Page()注册一个页面,在每个页面的js文件中注册
Page({ data: {text: "This is page data."},//页面数据,用来维护视图,json格式 onLoad: function(options) { },//监听加载 onReady: function() { },//监听初次渲染完成 onShow: function() { },//监听显示 onHide: function() { },//监听隐藏 onUnload: function() { },//监听卸载 onPullDownRefresh: function() { },//监听下拉 onReachBottom: function() { },//监听上拉触底 onShareAppMessage: function () { },//监听右上角分享 //如下为自定义的事件处理函数(视图中绑定的) viewTap: function() {//setData设置data值,同时将更新视图 this.setData({text: 'Set some data for updating view.'}) } })
小程序的视图与事件绑定,在每个页面中的wxml文件中,对页面js中data进行数据绑定,以及自定义事件绑定
<!--{{}}绑定data中的指定数据并渲染到视图--> <view class="title">{{text}}</view> <!--wx:for获取数组数据进行循环渲染,item为数组的每项--> <view wx:for="{{array}}"> {{item}} </view> <!--wx:if条件渲染--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> <!--模板--> <template name="staffName"> <view>FirstName: {{firstName}}, LastName: {{lastName}}</view> </template> <template is="staffName" data="{{...template.staffA}}"></template> <template is="staffName" data="{{...template.staffB}}"></template> <!--bindtap指定tap事件处理函数为ViewTap--> <view bindtap="ViewTap"> 点我点我 </view>
点到为止
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!