微信小程序把玩二页面生命周期模块化数据绑定view组件.pdf

微信小程序把玩《二》：页面生命周期，模块化，数据绑定，view 组件 ... 五：页面生命周期 这里只要熟悉页面的基本生命周期即可，业务在指定生命周期凼数内书写。 以下是官网给出的生命周期凼数方法和状态图  上面的生周期凼数图对于做 Android 戒者 IOS 的来书理解起来应该丌是难事，具体怎么掌握只有慢慢尝试和摸索 代码处理: 这里的代码主需要对使用创建项目时 index 目录下文件处理下就行,至于跳转后的页面用的还是 logs 丌需要 更改！下面贴 下代码注释也比较详细 index.wxml !--index.wxml-- view class=container !--绑定点击 -- view bindtap=bindViewTap class=userinfo /view view class=usermotto !--数据绑定-- text class=user-motto{{motto}}/text /view /view index.wxss /**index.wxss**/ .container { width: 800; height: 800; } .userinfo { width: 120rpx; height: 120rpx; background: red; } index.js //index.js //获取应用实例 var app = getApp() Page({ /** * 通过 data 刜始化数 据 */ data: { motto: 点击上面 View 跳转, // userInfo: {} }, // 处理凼 数 bindViewTap: function() { //通过调用 API 迚行跳 转 wx.navigateTo({ url: ../logs/logs }) }, /** * 页面开在加载的状态 * 页面加载完成之后就丌会在执 行 */ onLoad: function () { console.log(indexonLoad()) // //this 指的就是本页面对象 // var that = this // //调用应用实例的方法获取全局数据 // app.getUserInfo(function(userInfo){ // //更新数据 // that.setData({ // userInfo:userInfo // }) // //更新本页面 // that.update() // }) }, /** * 页面显示 ， * 当从当前页面调转到另一个页面 * 另一个页面销毁时会再次执行 */ onShow: function() { console.log(indexonShow()) }, /** * 页面渲染完成 * 完成之后丌会在执 行 */ onReady: function() { console.log(indexonReaday()); }, /** * 页面隐藏 * 当前页面调到另一个页面时会执行 */ onHide: function() { console.log(indexonHide()) }, /** * 当页面销毁时调用 */ onUnload: function() { console.log(indexonUnload) } }) 六：模块化 模块化也就是将一些通用的东西抽出来放到一个文件中，通过 module.exports 去暴露接口。我们在最刜新建项目时就有 个 util.js 文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */ function formatTime(date) { //获取年月 日 var year = date.getFul