微信小程序之基础指南

腾讯的微信开发的教程是真的详细+齐全，如果你仔细看，几乎能解决你80的问题

1、申请账号

2、微信开发者工具

3、小程序代码构成

       项目里边生成了不同类型的文件：

3.1、JSON配置

        JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色

3.1.1、小程序全局配置app.json

        小程序的全局配置app.json ，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。详情请点击： ，常用app.json 配置内容如下：

entryPagePath

        指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数

{
  "entryPagePath": "pages/index/index"
}

pages

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

则需要在 app.json 中写

{
    "pages": [
        "pages/index/index",
        "pages/logs/index"
    ],
}

window

        用于设置小程序的状态栏、导航条、标题、窗口背景色。如：

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar

        如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

         其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

3.1.2、小程序页面配置

        每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。完整配置项：

3.1.3、sitemap 配置

        微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引，完整配置项：

4、小程序框架

        整个小程序框架系统分为两部分：（App Service）和 （View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。        

        响应的数据绑定类似于Qt的信号与槽，在定义视图层时就绑定了逻辑层的函数

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

当点击按钮时，就会调用changeName 

4.1、场景值

        场景值用来描述用户进入小程序的路径，完整场景值：

4.2、注册小程序

        每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。完成的参数含义和使用：。

        整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

4.3、注册页面

        对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

4.3.1、使用 Page 构造器注册页面

        使用Page构造器注册页面，详细的参数含义和使用请参考：

4.3.2、页面中使用behaviors

        页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法（个人觉得每个js的内部变量都为私有变量，如果需要被其他js文件访问，就类似于C++将其设为友好成员，就可以访问）。behaviors 具体用法：

4.3.3、使用 Component 构造器构造页面

        Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。此时，可以使用 Component 构造器来构造页面（个人觉得：类似于Qt的自定义控件，继承控件类后的行为，添加自己的功能）。 Component 构造器的主要区别是：方法需要放在 methods 里面。具体用法：

4.4、页面路由

        在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，开发者可以使用 getCurrentPages() 函数获取当前页面栈。页面栈的表现如下：

4.5、模块化

        可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过  或者exports才能对外暴露接口（代码模块化，根据不同功能封装）。

4.6、API

        小程序开发框架提供丰富的微信原生 API，详细介绍：，通常，在小程序 API 有以下几种类型：

4.6.1、事件监听 API

        我们约定，以 on 开头的 API 用来监听某个事件是否触发，这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

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

4.6.2、同步API

        我们约定，以 Sync 结尾的 API 都是同步 API， 如 ， 等。此外，也有一些其他的同步 API，如 ， 等，详情参见 API 文档中的说明。

        同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

4.6.3、异步API

        大多数 API 都是异步 API，如 ， 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

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

异步 API 返回 Promise

        基础库  版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

注意事项

1. 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
2. 当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。
3.  可以监听未处理的 Promise 拒绝事件。

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

4.6.4、云开发 API

        开通并使用，即可使用云开发API，在小程序端直接调用服务端的。

wx.cloud.callFunction({
  // 云函数名称
  name: 'cloudFunc',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result) // 示例
  },
  fail: console.error
})

// 此外，云函数同样支持 promise 形式调用

5、小程序的WXML

        WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合、，可以构建出页面的结构

5.1、数据绑定

        WXML 中的动态数据均来自对应 Page 的 data。

        数据绑定使用 Mustache 语法（双大括号）将变量包起来.

5.1.1、简单绑定代码示例

.wxml文件：
<view> {{ message }} </view>

.js文件
Page({
  data: {
    message: 'Hello World!'
  }
})

5.1.2、组件属性（需要在双引号之内）

Hello World的id="item-0"

.wxml文件：
<view id="item-{{id}}">Hello World </view>

.js文件
Page({
  data: {
    id: 0
  }
})

5.1.3、控制属性(需要在双引号之内) 

.wxml文件：
<view wx:if="{{condition}}"> </view>

.js文件
Page({
  data: {
    condition: true
  }
})

5.1.4、 关键字(需要在双引号之内)

代码示例

<checkbox checked="{{false}}"> </checkbox>

• true：boolean 类型的 true，代表真值。
• false： boolean 类型的 false，代表假值。

        特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值 

5.1.5、运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

.wxml文件
<view> {{a + b}} + {{c}} + d </view>

.js文件
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

.wxml文件
<view>{{"hello" + name}}</view>

.js文件
Page({
  data:{
    name: 'World'
  }
})

 数据路径运算

.wxml文件
<view>{{object.key}} {{array[0]}}</view>

.js文件
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['World']
  }
})

组合 

.wxml文件
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

.js文件
Page({
  data: {
    zero: 0
  }
})
最终组合成数组[0, 1, 2, 3, 4]

 对象

.wxml文件
<template is="objectCombine" data="{{for: a, bar: b}}"></template>

.js文件
Page({
  data: {
    a: 1,
    b: 2
  }
})
最终组合成的对象是 {for: 1, bar: 2}

5.2、列表渲染

5.2.1、wx:for

        在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

.wxml文件
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

.js文件


Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

5.2.2、block wx:if 

        类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如： 

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

5.2.3、wx:key

        如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 并且希望列表中的项目保持自己的特征和状态（如  中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

        当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

        如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

        注意事项1：当 wx:for 的值为字符串时，会将字符串解析成字符串数组

        注意事项2：花括号和引号之间如果有空格，将最终被解析成为字符串

5.3、条件渲染

5.3.1、wx:if

        在框架中，使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

5.3.2、block wx:if

        因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

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

5.3.1、wx:if VS hidden

        因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

        同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

5.4、模板

        WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

5.4.1、定义模板

        使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

5.4.2、使用模板

        使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

.wxml文件
<template is="msgItem" data="{{...item}}"/>

.js文件
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

        is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

5.5、引用

        WXML 提供两种文件引用方式import和include。

5.5.1、import

        import可以在该文件中使用目标文件定义的template，如：在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

 import 的作用域

        import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。如：C import B，B import A，在 C 中可以使用 B 定义的template，在 B 中可以使用 A 定义的template，但是 C 不能使用 A 定义的template。

5.5.2、include

        include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

6、小程序的WXSS

        WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有

• 尺寸单位
• 样式导入

6.1、尺寸单位

        rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

6.2、样式导入

        使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

6.3、内联样式

        框架组件上支持使用 style、class 属性来控制组件的样式

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔

<view class="normal_view" />

6.4、全局样式与局部样式

        定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器

7、小程序的WXS

        WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。我觉得我用不到

详情介绍：

8、事件系统

        微信的事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理，可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。

        注意：个人觉得这个就相当于Qt的信号与槽+事件合体

        详情介绍：

8.1、普通事件的绑定

如bindtap，当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

在相应的 Page 定义中写上相应的事件处理函数，参数是event。
Page({
  tapName: function(event) {
    console.log(event)
  }
})

        除 bind 外，也可以用 catch 来绑定事件。还可以使用 mut-bind 来绑定事件。

        与 bind 不同， catch 会阻止事件向上冒泡。

        一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

8.2、事件详解

        事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

         注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如  的submit事件， 的input事件， 的scroll事件，(详见各个)

8.3、事件对象

        如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

 CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

 TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

特殊事件：  中的触摸事件不可冒泡，所以没有 currentTarget

 9、简易双向绑定

        在 WXML 中，普通的属性的绑定是单向的。例如：

<input value="{{value}}" />

        如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。

        如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

<input model:value="{{value}}" />

        这样，如果输入框的值被改变了， this.data.value 也会同时改变。同时， WXML 中所有绑定了 value 的位置也会被一同更新，  也会被正常触发。