共计 3875 个字符，预计需要花费 10 分钟才能阅读完成。
开发前准备
首先在微信小程序平台上申请一个 https://mp.weixin.qq.com/ 点击立即注册，在打开的页面中选择小程序后，填入相关的信息，就可以完成注册了
在信息页面获取 AppId
安装开发者工具，链接 https://mp.weixin.qq.com/debu… 根据自己的操作系统下载对应的安装包进行安装
下载完毕后添加你的小程序，输入 AppId
添加页面：在 app.json 中新增路径，会自动在根目录的 pages 文件夹下新增页面文件夹，四件套，换汤不换药的 html+js+css+json 配置
WXML 模板
1、要求严格闭合 2、大小写敏感
双括号
双括号 {{}}，类似于 vue 的{{}} 用法，可以进行一些简单的逻辑运算，数据绑定于对应 js 文件的 data 中
<!– 属性值的绑定, 必须使用双括号 –>
<text data-test=”{{test}}”> hello world</text>
条件逻辑
<view wx:if=”{{length > 5}}”> 1 </view>
<view wx:elif=”{{length > 2}}”> 2 </view>
<view wx:else> 3 </view>
<!– 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装 起来，并在上边使用 wx:if 控制属性 –>
<block wx:if=”{{true}}”>
<view> view1 </view>
<view> view2 </view>
</block>
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<!– array 是一个数组 –>
<view wx:for=”{{array}}”>
{{index}}: {{item.message}}
</view>
<!– 对应的脚本文件
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>
<!– 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，使用 wx:key 来指定列表中项目的唯一的标识符。
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字 –>
<!–wx:key 的值以两种形式提供：–>
<switch wx:for=”{{objectArray}}” wx:key=”unique” > {{item.id}} </switch>
<switch wx:for=”{{numberArray}}” wx:key=”*this” > {{item}} </switch>
模板 WXML 提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段
<!–
item: {
index: 0,
msg: ‘this is a template’,
time: ‘2016-06-18’
}–>
<template name=”msgItem”>
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is=”msgItem” data=”{{…item}}”/>
引用 WXML 提供两种文件引用方式 import 和 include。import 可以在该文件中使用目标文件定义的 template
<!– 在 item.wxml 中定义了一个叫 item 的 template，在 index.wxml 中引用了 item.wxml，就可以使用 item 模板 –>
<import src=”item.wxml”/>
<template is=”item” data=”{{text: ‘forbar’}}”/>
需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性
<!–include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置 –>
<!– index.wxml –>
<include src=”header.wxml”/>
<view> body </view>
<include src=”footer.wxml”/>
共同属性 所有 wxml 标签都支持的属性称之为共同属性
WXSS 样式
WXSS 与 Web 开发中的 CSS 类似
分别为页面样式、其他样式、公用样式 公用样式：会被注入到小程序的每个页面 页面样式：与 app.json 注册过的页面同名且位置同级的 WXSS 文件 其它样式：其它样式可以被项目公共样式和页面样式引用
尺寸 在 WXSS 中，引入了 rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕
WXSS 引用
<!– 小程序中的样式引用 –>
@import ‘./test_0.wxss’
内联样式 WXSS 内联样式与 Web 开发一致 小程序支持动态更新内联样式：
<!– 可动态变化的内联样式 –>
<!–
{
eleColor: ‘red’,
eleFontsize: ’48rpx’
}–>
<view style=”color: {{eleColor}}; font-size: {{eleFontsize}}”></view>
选择器 感觉跟原生 css 没有太大差别
模块化 在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
// moduleA.js
module.exports = function(value){
return value * 2;
}
// 在 B.js 中引用模块 A
var multiplyBy2 = require(‘./moduleA’)
var result = multiplyBy2(4)
作用域 当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值
// a.js
// 获取全局变量
var global = getApp()
global.globalValue = ‘globalValue’
// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue
盒式布局 具体可以看官方文档，和常用的 flex 布局类似 https://developers.weixin.qq….
常用交互
云函数模拟后端的函数操作，在每个新建的云函数中，先 npm install 一下 wx-server-sdk（每个都要），然后上传你的云函数，就可以在云平台看到相关函数，进行测试等等
云函数的调用：
wx.cloud.callFunction({
name: ‘resp’,
data: {
data: ‘ 测试数据 ’
},
success: res => {
wx.showToast({
title: ‘ 发布成功 ’,
})
this.setData({
name: JSON.stringify(res.result.data.total)
})
},
fail: err => {
wx.showToast({
icon: ‘none’,
title: ‘ 调用失败 ’,
})
console.error(‘[云函数] [sum] 调用失败：’, err)
}
})
云函数中操作数据库（官方文档写的很迷），这边总结一下：
// 云函数入口文件
const cloud = require(‘wx-server-sdk’)
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
// const wxContext = cloud.getWXContext()
const add = await db.collection(‘counters’).add({
data: {
count: 1,
data: event.data
}
})
const count = await db.collection(‘counters’).count()
return {
data: count
}
}
关于 Loading 的问题 一些点击之后上传数据的交互，比如 Button 的 loading 方法，在微信小程序中只是添加一个按钮样式？？？为了防止用户极快速度触发两次 tap 回调，可以一个 hasClick 的“锁”，在开始请求前检查是否已经发起过请求，如果没有才发起这次请求，等到请求返回之后再把锁的状态恢复回去
var hasClick = false
if (hasClick) {
return
}
hasClick = true
wx.showLoading()
// 在返回完成记得恢复状态
complete: data => {
hasClick = false
}
