2019-02-22 微信小程序·开发指南

第一章小程序介绍与开发环境

一. Hello World

// app.json 
"pages": [
    "pages/index/index"
  ]

// index/index.wxml
Hello World

二. 小程序介绍

1.小程序技术发展史

(1).移动web在微信的WebView中显示，微信有相关JS API ，但只对团队内部使用
(2). 网页开发工具包 JS-SDK,对外开放，缺点：体验不好，资源加载白屏/缺少操纵反馈。
(3). 小程序应运而生。

2.小程序与普通网页开发的区别

(1).网页开发中渲染线程与脚本线程是互斥的。小程序逻辑层与渲染层是分开的，可以并行的。
(2).小程序逻辑层没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。同时JSCore 的环境同 NodeJS 环境不尽相同。
(3).网页开发者需要面对的环境是各式各样的浏览器，小程序要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。

小程序运行环境

三. 小程序开发准备

在微信公众平台注册一个小程序，设置”—“开发设置” 就可以看到小程序的 AppID。
安装开发者工具
在开发者工具中创建项目填入AppID 开始项目。

第二章小程序代码组成

一. JSON 配置

1.在小程序中，JSON扮演的静态配置的角色。
2.小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。
JSON 语法：
1.JSON的Key必须包裹在一个双引号中
2.JSON的值数据格式：
1.数字包括浮点数和整数
2.字符串
3.Bool: true or false
4.数组：包裹在[]中
5.对象：包裹在{}中
6.null
其他任何格式都会触发报错
3.JSON 文件中无法使用注释，试图添加注释将会引发报错。

二.WXML模板

1.基本介绍

1.全称：WeiXin Markup Language
2.基本语法：


// index.wxml
当前时间：{{time}}

hello world
{{var1}}
{{var2}}

// index.js
 data: {
    time: (new Date()).toString(),
    var2: undefined,
    var3: null
}

3.逻辑语法


// index.js
data: {
    a: 10,
    b: 2,
    c: 4,
    d: 6,
    name: 'world',
    arr: ['hei',2,3]
}
// index.wxml
{{a === 10?"变量a等于10":"变量a不等于10"}}   //变量a等于10
{{a + b}} + {{c}} + {{d}}  // 12 + 4 + 6
{{'hello ' + name }}   // hello world
hello {{name}}   // hello world
{{arr}}  // hei,2,3
{{1}}   // 1
{{'hhahahha'}} // hhahahha

4. 条件逻辑


// index.js
 arr: ['hei',2,3]
// index.wxml
1
2
3

5. 列表渲染

// index.js
data: {
list: [
      {
        message: 'foo',
      },
      {
        message: 'bar',
      }
    ],
    objArr: [
      { id: 5, unique: 'unique5' },
      { id: 4, unique: 'unique4' },
      { id: 3, unique: 'unique3' },
      { id: 2, unique: 'unique2' },
      { id: 1, unique: 'unique1' },
      { id: 0, unique: 'unique0' },
    ],
    numArr: [1, 2, 3, 4]
}switch: function(e){
    const length = this.data.objArr.length
    for(var i = 0;i < length; i++) {
      const x = Math.floor(Math.random() * length);
      const y = Math.floor(Math.random() * length);
      const temp = this.data.objArr[x];
      this.data.objArr[x] = this.data.objArr[y];
      this.data.objArr[y] = temp;
    }
    this.setData({
      objArr: this.data.objArr
    })
  },
  addToFront: function(e){
    const length = this.data.objArr.length
    this.data.objArr = [{id: length, unique: 'unique_' + length}].concat(this.data.objArr);
    this.setData({
      objArr: this.data.objArr
    })
  },
  addNumToFront: function(e){
    this.data.numArr = [this.data.numArr.length + 1].concat(this.data.numArr)
    this.setData({
      numArr: this.data.numArr
    })
  }

// index.wxml

  {{index + 1}}: {{item.message}}




  {{idx + 1}}: {{itemName.message}}


{{item.id}}



{{item}}

使用wx:key指定列表渲染中的唯一标识符,key值两个条件：
(1)字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
(2) 保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
好处：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。