小程序第一天

框架

框架的核心是一个响应的数据绑定系统。
整个系统分为两块视图层(View)和逻辑层(App Service)

例如

1
2
3

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}
// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 Hello WeChat!
当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到对应的事件处理函数
逻辑层执行了setData的操作，将name从Wechat变为MINA，因为该数据和视图层已经绑定了，所以视图层会自动改变name的值。

文件结构

1	一个小程序主体部分由三个文件组成，必须放在项目的根目录

app.js 处理小程序逻辑 <必填>
app.json 小程序公共设置 <必填>
app.wxss 小程序公共样式表 <选填>

1	一个小程序页面由四个文件组成

.js 页面逻辑 <必填>
.wxml 页面结构 <必填>
.json 页面配置 <选填>
.wxss 页面样式 <选填>

1	描述页面的四个文件必须具有相同的路径与文件名。

配置

app.json

{
  "pages": [
    "pages/home/home",
    "pages/me/me"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Demo合辑",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "",
        "iconPath": "resource/tabbarIcon/home_normal.png",
        "selectedIconPath": "resource/tabbarIcon/home_select.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "",
        "iconPath": "resource/tabbarIcon/me_normal.png",
        "selectedIconPath": "resource/tabbarIcon/me_select.png"
      }
    ]
  }
}
//networkTimeout:网络超时时间
//enablePullDownRefresh: 是否开启全局下拉刷新（可以在对应页面的json文件里面单独配置）

场景值

在app.js里面可以查看小程序的场景值

App({
  onLaunch: function (options) {
    console.log('小程序场景值' + options.scene)
  }
})

`setData()` 参数格式

示例代码

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

//index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

`Page`实例的生命周期

一个简单的示例程序

<!--index.wxml-->
<button type="default" loading="{{loading}}" bindtap="default"> refresh </button>
<view> Hello {{name}}! </view>

//index.js
//获取应用实例
const app = getApp()
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    text: 'init data',
    num: 0,
    name: 'WeChat',
    array: [{ text: 'init data' }],
    object: {
      text: 'init data'
    } 
  },
  default: function (e) {
    var name = this.data.name
    if (name == 'MiNa'){
      this.setData({
        name: 'WeChat'
      })
    }else{
      this.setData({
        name: 'MiNa'
      })
    }
    this.setData({
      loading: !this.data.loading,
      
    })
  },
  jumpToView:function(){
    wx.navigateTo({
      url: '../view/view',
    })
  }
})

页面跳转

push新页面

调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.navigateTo({
      url: '../logs/logs?id="+event.currentTarget.dataset.id' + '&navTitle=' + clickcategoryName,
    })

页面重定向

调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
      url: '../logs/logs',
    })

页面返回

调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。。
//delta 返回的页面数，如果delta大于现有页面数，则返回到首页
wx.navigateBack({
  delta: 2
})

Tab切换

调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/index'
})

重启动

调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

关闭所有页面，打开到应用内的某个页面。
wx.reLaunch({
  url: 'test?id=1'
})

框架

例如