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

 

 

1. <!--index.wxml-->
2.  
3. <view class="container">
4.  
5. <!--绑定点击事件-->
6.  
7. <view bindtap="bindViewTap" class="userinfo">
8.  
9. </view>
10.  
11. <view class="usermotto">
12.  
13. <!--数据绑定-->
14.  
15. <text class="user-motto">{{motto}}</text>
16.  
17. </view>
18.  
19. </view>
20.  

 

1. <!--index.wxml-->
2. <view class="container">
3. <!--绑定点击事件-->
4. <view bindtap="bindViewTap" class="userinfo">
5. </view>
6. <view class="usermotto">
7. <!--数据绑定-->
8. <text class="user-motto">{{motto}}</text>
9. </view>
10. </view>
11.  

1. //index.js
2. //获取应用实例
3. var app = getApp()
4. Page({
5. /**
6. * 通过data初始化数据
7. */
8. data: {
9. motto: '点击上面View跳转',
10. // userInfo: {}
11. },
12. //事件处理函数
13. bindViewTap: function() {
14. //通过调用API进行跳转
15. wx.navigateTo({
16. url: '../logs/logs'
17. })
18. },
19. /**
20. * 监听页面开在加载的状态
21. * 页面加载完成之后就不会在执行
22. */
23. onLoad: function () {
24. console.log('index---------onLoad()')
25. // //this指的就是本页面对象
26. // var that = this
27. // //调用应用实例的方法获取全局数据
28. // app.getUserInfo(function(userInfo){
29. // //更新数据
30. // that.setData({
31. // userInfo:userInfo
32. // })
33. // //更新本页面
34. // that.update()
35. // })
36. },
37. /**
38. * 监听页面显示，
39. * 当从当前页面调转到另一个页面
40. * 另一个页面销毁时会再次执行
41. */
42. onShow: function() {
43. console.log('index---------onShow()')
44. },
45. /**
46. * 监听页面渲染完成
47. * 完成之后不会在执行
48. */
49. onReady: function() {
50. console.log('index---------onReaday()');
51. },
52. /**
53. * 监听页面隐藏
54. * 当前页面调到另一个页面时会执行
55. */
56. onHide: function() {
57. console.log('index---------onHide()')
58. },
59. /**
60. * 当页面销毁时调用
61. */
62. onUnload: function() {
63. console.log('index---------onUnload')
64. }
65. })
66.  

1. //index.js
2. //获取应用实例
3. var app = getApp()