微信小程序

微信小程序账号与工具

在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/

小程序开发者账号注册

微信公众平台：https://mp.weixin.qq.com/

小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1

微信开发者工具

微信开发者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

微信小程序文件结构

主体文件结构

主体部分由三个文件组成，必须放在项目的根目录，如下：

| 文件 | 作用 |
[app.js] 　　     小程序逻辑 |
[app.json]　　  小程序公共设置 |
[app.wxss]　　 小程序公共样式表 |

页面文件结构

页面由四个文件组成，分别是：

| 文件类型 |  作用 |

[js]　　　　页面逻辑 ( 微信小程序没有window和document对象 ) |
[wxml] 　　 页面结构 ( XML语法，不是HTML语法 ) |
[wxss]　　  页面样式表 ( **拓展了rpx尺寸单位，微信专属响应式像素** ) |
[json]　　   页面配置 ( 不能写注释，否则编译报错 ) |

 微信小程序配置

app.json 配置项列表

> `app.json`文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

| 属性 | 必填 | 描述 |
[pages] 　　  String Array | 设置页面路径 |
[window] 　　Object | 设置默认页面的窗口表现 |
[tabBar]　　  Object |  设置底部 tab 的表现 |
[debug]　　   Boolean | 设置是否开启 debug 模式 |

 window配置

 用于设置小程序的状态栏、导航条、标题、窗口背景色。
 注意：页面的`.json`只能设置 `window` 相关的配置项，以决定本页面的窗口表现，所以无需写 `window` 这个键。

| 属性 | 类型 | 默认值 | 描述 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如"#000000" |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black/white |
| navigationBarTitleText | String | | 导航栏标题文字内容 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉背景字体、loading 图的样式，仅支持 dark/light |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见[页面相关事件处理函数]页面相关事件处理函数)。 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |

 常用布局标签

<view></view> 相当于 <div></div>
<text></text> 相当于 <span></span>
<image></image> 相当于 <img />
<navigator></navigator> 相当于 <a></a>
<block></block> 区块标签，不会渲染到页面

常用表单标签

<button></button>
<input type="text" />
<checkbox />
<radio/>

轮播图组件

<swiper indicator-dots="是否显示面板指示点" autoplay="是否自动切换" interval="自动切换时间间隔" duration="滑动动画时长">
<swiper-item>
<image src="图片路径1" width="375" height="150"/>
</swiper-item>
<swiper-item>
<image src="图片路径2" width="375" height="150"/>
</swiper-item>
</swiper>

微信小程序页面函数

生命周期函数

Page({
/** 页面的初始数据 */
data: {
},
/** 生命周期函数--监听页面加载 */
onLoad: function (options) {
},
/** 生命周期函数--监听页面初次渲染完成 */
onReady: function () {
},
/** 生命周期函数--监听页面显示 */
onShow: function () {
},
/** 生命周期函数--监听页面隐藏 */
onHide: function () {
},
/** 生命周期函数--监听页面卸载 */
onUnload: function () {
}
})

页面相关事件处理函数

/** 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
},
/** 页面上拉触底事件的处理函数 */
onReachBottom: function () {
},
/** 用户点击右上角分享 */
onShareAppMessage: function () {
}

 wx:key 提高列表渲染时排序的效率

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

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

<!--wxml-->
<view wx:if="{{length >= 80}}"> 优秀 </view>
<view wx:elif="{{length >= 60}}"> 良好 </view>
<view wx:else> 加油 </view>
```

```javascript
// page.js
Page({
data: {
length: '95'
}
})

`wx:if` 与 `hidden` 区别

`wx:if` 是否渲染， `hidden` 是否隐藏。

一般来说，`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。

因此，如果需要频繁切换的情景下，用 `hidden` 更好。

 [事件]

- 事件对象可以获取额外信息，如 id, dataset(自定义属性集合), touches(触摸点坐标)。

事件绑定和冒泡

1. 冒泡事件 bind事件类型 如 `bindtap` `bindlongpress`
2. 非冒泡事件 catch事件类型 如 `catchtap` ` catchlongpress`

常用事件类型

 事件传参注意

小程序绑定事件只能写函数名称，不能通过括号方式传参。

 WXSS 样式

WXSS(WeiXin Style Sheets)是一套样式语言。

与 CSS 相比，WXSS 扩展以下2个特性：

- 尺寸单位 rpx ( responsive pixel 响应式像素)
- 样式导入 @import "样式表路径";

常用快捷键

| 快捷键 | 说明 |
| shift + alt + F | 格式化代码 |
| ctrl + P | 跳到文件 |
| ctrl + E | 跳到最近文件 |