小程序基本语法

项目demo: https://github.com/Aluka-w/oldIsland-wx

逻辑层 (js)

生命周期

app.js

1. onLounch(只调用一次) -> onShow -> 依次注册好各个页面组件

page.js

2. onLoad(首页加载) -> onShow -> onReady

setData更改data值

1. 用例:

  //异步操作
  this.setData({
    // 数组或者对象的属性, 必须字符串才生效, 要不然直接报错
    'object.text': '新值',
    'array[0].text': '新值'
  }, () => [
    // 更新完数据的回调
  ])

导航

1. navigateTo 只能导航到本页面的子组件内

2. 例子的完整路径: pages/home/tip/tip

3. 声明式: 跳转页面

4. 编程式: wx.navigateTo({ url: 'tip/tip'})

5. 类似的有:

6. 页面重定向: wx.redirectTo 和 页面会销毁

7. 页面返回: wx.navigateBack 和 页面会销毁

8. tab栏切换 wx.switchTab 和

9. 重启本页面 wx.reLaunch 和 页面会销毁

10. Tip

11. navigateTo, redirectTo 只能打开非 tabBar 页面

12. switchTab 只能打开 tabBar 页面

13. reLaunch 可以打开任意页面

模块化

1. getApp() 获取全局的数据, 全局的数据可以在APP()中设置

2. commonjs规范

3. 导出: module.exports.sayHi = sayHi / exports.sayHi = sayHi

4. 导入: var sayHi = require('sayHi')

API

1. 事件监听 API: wx.onSocketOpen(Fn) 回调函数, 返回值为回调函数的参数

  wx.onSocketOpen(function (res) {
    console.log(res.direction)
  })

2. 同步 API: wx.setStorageSync 返回值是return出来, 有错会抛出

3. 异步 API: wx.login 接受参数

  wx.login({
  success(res) {
    console.log(res.code)
  },
  fail() {

  }
})

视图层

WXML

并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

数据绑定: {{message}}

1. Mustache 语法

2. 组件属性(需要在双引号之内), boolean 也需要"{{true}}"

3. 花括号和引号之间如果有空格，将最终被解析成为字符串

4. 拓展运算符

  
  Page({
    data: {
      obj1: { a: 1, b: 2 },
      obj2: { c: 3, d: 4 }
    }
  })
  // 最后是 {a: 1, b: 2, c: 3, d: 4, e: 5}

列表渲染: {{item}}

1. 默认直接用index 和 item

2. 别名: wx:for-index='idx' 就是把index改成了idx

3. wx:for="array" 遍历一个字符串, 解析出来 a, r, r, a, y

4. 花括号和引号之间如果有空格，将最终被解析成为字符串 wx:for="{{array}} " => wx:for="{{array + ''}}"

5. key值的*this代表item本身当key值

条件渲染: WEBVIEW

1. wx:if 和 wx:hidden 就相当于 v-if 和 v-show

模板

1. 模板定义代码片段, 然后需要的地方引用, name属性代表模板

2. 声明:

3. 引用: 使用is关键字data为数据: