微信小程序：模板语法

模板语法

微信小程序有自己单独的一套模板语法。

WXML 结构

WXML 数据写法和Vue相似，数据通过 {{}} 包裹。
```
<text>{{ msg }}</text>
```
WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
- rpx 单位
  
  rpx 将屏幕等分为 750 份，屏幕总宽度相当于 750rpx ，可以自适应不同屏幕。
  
  例：在 iphone6/7/8 上，屏幕宽度为375px，相当于750个物理像素。
```
.box {width: 200rpx;height: 200rpx;
}
```
- 样式导入
  
  @import 用于样式导入。
```
@import "./css/common/test.wxss"
```

Js 逻辑交互

<text>{{ msg }}</text>
<button bindtap="changeMsg">点击</button>

Page({// 页面初始数据data: {msg: '你好'},// 点击改变msgchangeMsg () {this.setData({msg: "Hello World"})}
})

动态绑定属性

数据绑定

<img> 的 src 属性和 vue 不同，地址写法为 src="{{ 图片地址 }}" 。
```
<view><text>{{ title }}</text><img src="{{ imgURL }}"></img>
</view>
```

数据定义在 .js 文件中的 data 内。

Page({// 数据data: {titie: "标题",imgURL: "../images/1.jpg"}
})

小程序宿主环境

宿主环境是指 微信客户端给小程序所提供的环境 。

通信模型

运行环境分为渲染层和逻辑层，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

运行机制

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
通过 app.json 的 pages 字段获取当前小程序的所有页面路径。

pages 中的一个行就是首页。
```
{"pages":["pages/index/index","pages/logs/logs"]
}
```
小程序启动后，执行 app.js 定义的 App 实例的 onLaunch 回调。
```
App({onLaunch: function () {// 小程序启动之后 触发}
})
```
微信客户端先根据 pages/logs/logs.json 配置生成一个页面，接着装载这个页面的 WXML 结构和 WXSS 样式，最后装载 log.js 。
```
/** pages/logs/logs.js **/
Page({data: { // 参与页面渲染的数据logs: []},onLoad: function () {// 页面渲染后 执行}
})
```
Page 是一个页面构造器，会生成一个页面，在生成页面的同时，小程序会把 data 数据和 index.wxml 一起渲染出最终结构。
页面渲染完成后，页面实例会收到一个 onLoad 的回调，这个回调可以处理逻辑，一般用来请求网络接口获取数据。

组件

小程序提供了丰富的基础组件。详情
小程序自定义组件详情

scroll-view 滚动条

<scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view>
</scroll-view>

scroll-view 属性	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动

swiper 轮播图

<swiper indicator-dots autoplay circular interval="2000"><swiper-item> <view>A</view> </swiper-item><swiper-item> <view>B</view> </swiper-item><swiper-item> <view>C</view> </swiper-item>
</swiper>

swiper 属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示熊安源的
indicator-color	color	rgba(0, 0, 0, .3)	小圆点颜色
indicator-active-color	color	#000000	当前选中的小圆点颜色
autoplay	boolean	false	是否自动轮播
interval	number	5000	自动轮播时间间隔
circular	boolean	false	是否无缝轮播

selectable 长按选中

在客户端，长按屏幕可以选中进行复制。

<text selectable>文本</text>

rich-text 富文本

将文本渲染成 html 格式。

<rich-text nodes="<h1>一级标题</h1>"></rich-text>

image 图片

<image src='/images/1.jpg'></image>

image 属性	类型	默认值	说明
src	string		图片地址
mode	string	scaleToFill	图片裁剪、缩放模式
webp	boolean	false	默认不解析 webP 格式，只支持网络资源
lazy-load	boolean	false	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	boolean	false	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序的菜单。
binderror	eventhandle		当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		当图片载入完毕时触发，event.detail = {height, width}

mode 缩放模式
- scaleToFill：不保持纵横比缩放，使图片的宽高完全拉伸至填满 image 元素；
- aspectFit：保持纵横比缩放，使图片的长边能完全显示出来；
- aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来；
- widthFix：宽度不变，高度自动变化，保持原图宽高比不变；
- heightFix：高度不变，宽度自动变化，保持原图宽高比不变；
mode 裁剪模式

裁剪模式不缩放图片。
- top/bottom/center/left：只显示图片的顶部/底部/中间/左边区域；
- top left/top right/bottom left/bottom right：只显示图片的左上/右上/左下/右下区域；

API

方便的调起微信提供的能力，例如获取用户信息、微信支付等等。详情

例：微信扫一扫
// 语法格式：
wx.scanCode({success: (res) => {console.log(res)}
})

事件监听API

on 开头的 API 用来监听某个事件是否触发。

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

同步API

Sync 结尾的 API 都是同步 API。

try {// 存储本地缓存wx.setStorageSync('key', 'value')
} catch (e) {console.error(e)
}

异步 API

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

异步 API 支持 callback & promise 两种调用方式，接口参数 object 中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

/* 微信登录 */// callback 形式调用
wx.login({success(res) {console.log(res.code)}
})// promise 形式调用
wx.login().then(res => console.log('res: ', res))

Object 参数名	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）
其他	Any	-	接口定义的其他参数

回调函数的参数

success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段。

属性	类型	说明
errMsg	string	错误信息，如果调用成功返回 `${apiName}:ok`
errCode	number	错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 `0`。
其他	Any	接口返回的其他数据

云开发API

需要开通微信云开发，在小程序直接调用服务端的云函数。

云函数同样支持 promise 形式调用。

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

事件绑定

点击事件

bindtap 和 catchtap 都是点击事件，bindtap 会阻止事件冒泡。

mut-bind 也可以绑定事件，mut-bind 触发后，冒泡到其他节点上的 mut-bind 不会触发，但是 bindtap 和 catchtap 依旧会触发。

<text>{{ msg }}</text>
<button bindtap="changeMsg">点击</button><button catchtap="changeMsg">点击</button><view mut-bind:tap="handleTap3">点击</view>

// pages/home/home.js
Page({data: {msg: '你好'},// 点击改变msgchangeMsg () {this.setData({ msg: "Hello World" })},
})

事件对象

组件触发事件后，处理函数会手到一个事件对象 BaseEvent 。详情

canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

<text>{{ msg }}</text>
<button bindtap="changeMsg" data-step="{{'你好'}}">点击</button>

Page({data: {msg: 'hello'},// 点击改变msgchangeMsg (e) {this.setData({ msg: e.target.dataset.step })},
}

data-* 事件传参

通关 data-参数名 的形式传参，再通过 e.target.dataset.参数名 的形式获取。

<button bindtap="changeCount" data-step="{{ 2 }}">事件传参</button>

Page({// 数据data: {count: 1,}// 点击增加changeCount(e) {this.setData({count: this.data.count + e.target.dataset.step})}
})

e.target.dataset.step 是通过 data-step 传递过来的数据。

bindinput 双向数据绑定

<input type="text" bindinput="ipt" ></input>

Page({data: {ipt: ''}
})

获取 input 的值

通过 e.detail.value 获取表单数据。

<input class="ipt" type="text" value="{{ ipt }}" bindinput="inputHandle" />

Page({// 更新当前的input表单数据inputHandle(e) {this.data.ipt = e.detail.value},
})

setData 修改数据

Page({data: {num: 1,},// 修改数据updateNum() {this.data.num += 1}
})

条件渲染

频繁切换时，使用 hidden 。

控制条件复杂时，使用 wx:if 搭配 wx:elif wx:else 使用。

block 标签

block 配合 vx:for 使用，block 不渲染在页面上。

<block wx:for="{{ list }}"><view>{{ index }} -- {{ item }}</view>
</block>

hidden 显示和隐藏

hidden 为 true，表示隐藏，false 则显示。

<view hidden="{{ false }}">显示</view>
<view hidden="{{ true }}">隐藏</view>

列表渲染

wx:for 用于循环渲染。item 为每一项，index 为下标，wx:key 为唯一标识。

<view wx:for="{{ list }}" wx:key="{{ item }}"><text>{{ index }}--{{ item }}</text>
</view>

别名

通过 wx:for-index 和 wx:for-item 来起别名。

<view wx:for="{{ list }}" wx:key="i" wx:for-index="i" wx:for-item="itemName"><text>{{ i }}--{{ itemName }}</text>
</view>

微信小程序：模板语法

模板语法

动态绑定属性

小程序宿主环境

通信模型

运行机制

组件

scroll-view 滚动条

swiper 轮播图

selectable 长按选中

rich-text 富文本

image 图片

API

事件监听API

同步API

异步 API

云开发API

事件绑定

点击事件

事件对象

data-* 事件传参

bindinput 双向数据绑定

获取 input 的值

setData 修改数据

条件渲染

block 标签

hidden 显示和隐藏

列表渲染

相关文章