微信小程序之基础指南

目录

1、申请账号

2、微信开发者工具

3、小程序代码构成

3.1、JSON配置

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

3.1.2、小程序页面配置

3.1.3、sitemap 配置

4、小程序框架

4.1、场景值

4.2、注册小程序

4.3、注册页面

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

4.3.2、页面中使用behaviors

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

4.4、页面路由

4.5、模块化

4.6、API

4.6.1、事件监听 API

4.6.2、同步API

4.6.3、异步API

4.6.4、云开发 API

5、小程序的WXML

5.1、数据绑定

5.1.1、简单绑定代码示例

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

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

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

5.1.5、运算

5.2、列表渲染

5.2.1、wx:for

5.2.2、block wx:if 

5.2.3、wx:key

5.3、条件渲染

5.3.1、wx:if

5.3.2、block wx:if

5.3.1、wx:if VS hidden

5.4、模板

5.4.1、定义模板

5.4.2、使用模板

5.5、引用

5.5.1、import

5.5.2、include

6、小程序的WXSS

6.1、尺寸单位

6.2、样式导入

6.3、内联样式

6.4、全局样式与局部样式

7、小程序的WXS

8、事件系统

8.1、普通事件的绑定

8.2、事件详解

8.3、事件对象

 9、简易双向绑定

---

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

1、申请账号

        微信官方文档-申请账号 

2、微信开发者工具

        微信开发者工具-下载链接

        微信开发者工具-使用说明

3、小程序代码构成

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

1. .json后缀的JSON 配置文件
2. .wxml后缀的WXML 模板文件
3. .wxss后缀的WXSS 样式文件
4. .js后缀的JS脚本逻辑文件

3.1、JSON配置

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

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

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

entryPagePath

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

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

pages

        用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 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"
  }
}

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见Page.onPullDownRefresh
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化
restartStrategy	string	homePage	重新启动策略配置
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 static / manual / auto

tabBar

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

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
navigationBarTitleText	HexColor	是		tab 的背景色，仅支持十六进制颜色
backgroundColor	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情

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

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

3.1.2、小程序页面配置

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

属性	类型	默认值	说明
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件配置
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic
style	string	default	启用新版的组件样式
singlePage	Object	否	单页模式相关配置
restartStrategy	string	homePage	重新启动策略配置
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 static / manual / auto
visualEffectInBackground	string	否	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none，若对页面单独设置则会覆盖全局的配置，详见 全局配置
enablePassiveEvent	Object或boolean	否	事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见 全局配置

3.1.3、sitemap 配置

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

4、小程序框架

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

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

 Hello {{name}}! 
 Click me! 

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

4.1、场景值

        场景值用来描述用户进入小程序的路径，完整场景值：微信官方文档-场景值列表

4.2、注册小程序

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

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

4.3、注册页面

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

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

        使用Page构造器注册页面，详细的参数含义和使用请参考：微信官方文档-Page参考文档

4.3.2、页面中使用behaviors

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

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

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

4.4、页面路由

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

路由方式	页面栈表现	触发时机	路由前页面	路由后页面
初始化	新页面入栈	小程序打开的第一个页面		onLoad, onShow
打开新页面	新页面入栈	调用wx.navigateToAPIwx.navigateTo	onHide	onLoad, onShow
页面重定向	当前页面出栈，新页面入栈	调用API wx.redirectTo	onUnload	onLoad, onShow
页面返回	页面不断出栈，直到目标返回页	调用API wx.navigateBack	onUnload	onShow
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用API wx.switchTab		点击详情
重加载	页面全部出栈，只留下新的页面	调用 API wx.reLaunch	onUnload	onLoad, onShow

4.5、模块化

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

4.6、API

        小程序开发框架提供丰富的微信原生 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， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，详情参见 API 文档中的说明。

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

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

4.6.3、异步API

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

Object 参数说明
参数名	类型	说明
success	function	接口调用成功的回调函数
fail	function	接口调用成功的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行）
其他	Any	接口定义的其他参数
回调函数的参数
属性	类型	说明
errMsg	string	错误信息，如果调用成功返回 ${apiName}:ok
errCode	number	错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。
其他	Any	接口返回的其他数据

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

异步 API 返回 Promise

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

注意事项

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

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

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

Hello World的id="item-0"

.wxml文件：
Hello World 

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

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

.wxml文件：
 

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

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

代码示例

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

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

5.1.5、运算

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

三元运算

算数运算

.wxml文件
 {{a + b}} + {{c}} + d 

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

逻辑判断

字符串运算

.wxml文件
{{"hello" + name}}

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

 数据路径运算

.wxml文件
{{object.key}} {{array[0]}}

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

组合 

.wxml文件
 {{item}} 

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

 对象

.wxml文件


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

5.2、列表渲染

5.2.1、wx:for

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

.wxml文件

  {{index}}: {{item.message}}


.js文件


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

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

  {{idx}}: {{itemName.message}}

5.2.2、block wx:if 

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

   {{index}}: 
   {{item}} 

5.2.3、wx:key

        如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 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 块：

 1 
 2 
 3 

5.3.2、block wx:if

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

   view1 
   view2 

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

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 属性，作为模板的名字。然后在