小程序开发工具如何创建默认的pages

小程序的每个页面都是独立的，每个页面都必须有 page.js 和 page.wxhl 文件，page.json 和 page.wxss 文件非必要文件，注意如果创建 page.json 则至少保证有一个对大括号，否则IED报错。

page.js 管理该页面的逻辑事件。每个页面必须声明 Page() 方法。

Page() 用来注册页面，其包含一下属性：

data 用于初始化数据；data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组；这里的 data 充当model的角色。

注：Page() 中 若不声明 onShareAppMessage() 该页面则不可分享，只有声明 onShareAppMessage() 该页面才有 分享/转发 功能（就算onShareAppMessage()中什么都不写都可以）

Page() 未声明 onShareAppMessage() 案例

Page() 声明 onShareAppMessage() 案例

// index/index.js
Page({
  data: {
    "user_name":"mirage",
    "user_skill":["javascript","jquery","angularjs","nodejs"]
  },
  onLoad: function (options) {},
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {}
})

// -----------------------------------

<!-- index/index.wxml -->
<view class="box">
  <text class="title">Hello World!</text>
</view>
<view class="userName">
  user name : <text>{{user_name}}</text>
</view>
<view>
  user skill : 
  <text class="item">{{user_skill[0]}}</text> / 
  <text class="item">{{user_skill[1]}}</text> / 
  <text class="item">{{user_skill[2]}}</text> / 
  <text class="item">{{user_skill[3]}}</text> / 
</view>

生命周期函数

• onLoad: 页面加载

一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

• onShow: 页面显示

每次打开页面都会调用一次。

• onReady: 页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

　　　　对界面的设置，如wx.setNavigationBarTitle请在onReady之后设置。

• onHide: 页面隐藏

当navigateTo或底部tab切换时调用。

• onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

onLoad() 参数

// index/index.js    ==============================
Page({
  data: {
    "user_name":"mirage",
    "user_skill":["javascript","jquery","angularjs","nodejs"]
  },
  onLoad: function (req) {
    console.log(req);
  },
  toas:function(){
    wx.navigateTo({
      url: "../info/info?name=" + this.data.user_name + "&skill="
      + this.data.user_skill
    })
  }
})

// info/info.js    ==============================
Page({
  data: {},
  onLoad: function (req) {
    this.setData({
      name:req.name,
      skill:req.skill.split(',')
    });
  }
})

onLoad 的参数作为接受传递参数的对象。

页面相关事件处理函数

• onPullDownRefresh: 下拉刷新

1. 监听用户下拉刷新事件。
2. 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
3. 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

• onReachBottom: 上拉触底

4. 监听用户上拉触底事件。
5. 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
6. 在触发距离内滑动期间，本事件只会被触发一次。

• onPageScroll: 页面滚动

7. 监听用户滑动页面事件。
8. 该函数有参数获取页面在垂直方向已滚动的距离（单位px）。

• onShareAppMessage: 用户转发

9. 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
10. 用户点击转发按钮的时候会调用
11. 此事件需要 return 一个 Object，用于自定义转发内容

Page({
  onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

Page.prototype.route（原型链字段）

route 字段可以获取到当前页面的路径。（ 注：基础库 1.2.0 开始支持，低版本需做兼容处理

Page.prototype.setData() 

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

Page({
  data: {},
  onLoad: function (req) {
    // 通过 setData 获取异步加载参数
    this.setData({
      name:req.name,
      skill:req.skill.split(',')
    });
  }
})

onLoad() 案例中有提到

setData() 参数格式

object 以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。 callback 是一个回调函数，在这次setData对界面渲染完毕后调用。

其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
3. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

 

view层调用事件

view（视图） 层中使用 bindtap 属性调用 logic（逻辑） 中定义的事件。

Page({
  onLoad: function () {},
  onShow:function(){
    console.log(this.route);
  },
  // 点击弹出提示卡
  click_1:function(){
    wx.showToast({
      title: '成功',
      icon:'success',
      duration:3000
    })
  },
  // 点击输出提示
  click_2:function(){
    console.log("你点击了 “提示消息” 按钮");
  },
  // 页面跳转
  goto:function(){
    wx.navigateTo({
      url: "../info/info?name=" + this.data.user_name + "&skill="
      + this.data.user_skill
    })
  }
})

 

最后附上一张官方的page生命周期图解。