微信小程序：模板语法

孤安先生

于 2024-07-17 10:00:00 发布

阅读量1.5k

点赞数 38

分类专栏：全栈开发学习日记 # 第十二章：微信小程序文章标签：微信小程序小程序前端 javascript

本文链接：https://blog.csdn.net/qq_41952539/article/details/140468734

版权

全栈开发学习日记同时被 2 个专栏收录

85 篇文章 12 订阅

订阅专栏

第十二章：微信小程序

10 篇文章 0 订阅

订阅专栏

模板语法

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

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: '你好'
    },
    // 点击改变msg
    changeMsg () {
        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: '你好'
    },
    // 点击改变msg
    changeMsg () {
        this.setData({ msg: "Hello World" })
    },
})

事件对象

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

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

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

Page({
    data: {
        msg: 'hello'
    },

    // 点击改变msg
    changeMsg (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>

孤安先生

关注

38
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录