小程序的模板与配置

WXML 模板语法

数据绑定的基本原则

  1. 在 data 中定义数据
  2. 在 WXML 中使用数据

在 data 中定义页面的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 字符串类型的数据
		info:'init data',
        // 数组类型的数据
        msgList:[{msg:'hello'},{msg:'world'}],
        imgSrc:'https://pic.imgdb.cn/item/62791e7a0947543129da29e9.jpg',
        randomNum: Math.random() * 10, // 生成 10 以内的随机数
        randomNum2:Math.random().toFixed(2)
    },
})

微信开发者工具 -> 调试器 -> AppData 可以直接看到定义的数据

把data中的数据绑定到页面中渲染，使用 Mustache 语法（插值表达式）将变量包起来即可。语法格式为:

动态绑定内容

1
<view>{{info}}</view>

动态绑定属性

1
<image src="{{imgSrc}}" mode="heightFix"/>

动态运算

1
2
<view>{{ randomNum >= 5 ? '随机数大于或等于5' : '随机数小于5' }}</view>
<view>生成100以内随机数：{{ randomNum2 * 100 }}</view>

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序中常用的事件
类型 绑定方式 事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开，类似于 HTML 中的 chick 事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发
事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示:

属性 类型 说明
type string 事件类型
timeStamp lnteger 页面打开到触发事件所经过的毫秒数
target object 触发事件的组件的一些属性值集合
currentTarget object 当前组件的一些属性值集合
detail object 额外的信息
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组
target 和 currentTarget 的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

bindtap 的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

通过bindtap，可以为组件绑定 tap触摸事件，语法如下:

1
<button type="primary" bindtap="btnTapHandler">按钮</button>

在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event(一般简写成e）来接收:

1
2
3
4
5
6
Page({

    btnTapHandler(e) { // 按钮的 tap 事件处理函数
        console.log(e); // 事件参数对象 e
    },
})
在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面data中的数据重新赋值，示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
Page({
	data: {
		count:0,
    },
    
    // +1 按钮的点击事件处理函数
    changeCount(){
        this.setData({
            count:this.data.count + 1
        })
    },
})
1
2
<view>这是count的值：{{count}}</view>
<button bindtap="changeCount">+1</button>
事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

因为小程序会把 bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为 **btnHandler(123) **的事件处理函数。

可以为组件提供 *data-** 自定义属性传参，其中*代表的是参数的名字，示例代码如下:

1
2
3
<!-- info 会被解析为参数的名字 -->
<!-- 数值 2 会被解析为参数的值 -->
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下:

1
2
3
4
5
6
7
8
Page({
	btnHandler(event) {
        // dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
        console.log(event.target.dataset);
        // 通过 dataset 可以访问到具体参数的值
        console.log(event.target.dataset.info);
    },
})
bintinput 的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:

通过bindinput，可以为文本框绑定输入事件:

1
<input bindinput="inputHandler" type="text"/>
1
2
3
4
5
6
Page({
	inputHandler(event) {
        // e.detail.value 是变化过后，文本框最新的值
        console.log(event.detail.value);
    },
})
实现文本框和 data 之间的数据同步

实现步骤：

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定 input 事件处理函数
1
2
3
4
5
6
7
8
9
10
11
12
Page({
	data: {
		msg:'',
    },
    
    // input
    inputHandler(event){
        this.setData({
            msg:event.detail.value
        })
    },
})
1
<input value="{{msg}}" bindinput="inputHandler" type="text"/>

条件渲染

wx:if

在小程序中，使用 wx:if=”{[**condition}}”**来判断是否需要渲染该代码块:

1
<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加else判断:

1
2
3
<view wx:if="{{type === 1}}"> 男 </view>
<view wx:elif="{{type === 2}}"> 女 </view>
<view wx:else> 保密 </view>

结合 <block> 使用 wx:if:

如果要一次性控制多个组件的展示与隐藏，可以使用一个**<block></block>**标签将多个组件包装起来，并在<block>标签上使用 wx:if 控制属性，示例如下:

1
2
3
4
<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>

注意: <block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden

在小程序中，直接使用 hidden=”{[ condition }}” 也能控制元素的显示与隐藏:

1
<view hidden="{{condition}}">条件为 true 隐藏，条件为 false 显示</view>

wx:if 与 hidden 的对比

  1. 运行方式不同
    • wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
    • hidden 以切换样式的方式 (display: none/block; )，控制元素的显示与隐藏
  2. 使用建议
    • 频繁切换时，建议使用 hidden
    • 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行显示与隐藏的切换

列表渲染

wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下:

1
2
3
4
5
Page({
	data: {
		array:['a','b','c']
    }
})
1
2
3
<view wx:for="{{array}}">
    索引是：{{index}} 当前项是：{{item}}
</view>

默认情况下，当前循环项的索引用 index **表示;**当前循环项用 item 表示。

手动指定索引和当前项的变量名*

  • 使用 wx:for-index 可以指定当前循环项的索引的变量名
  • 使用 wx:for-item 可以指定当前项的变量名

示例代码如下:

1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是：{{idx}} 当前项是：{{itemName}}
</view>
wx:key

类似于Vue列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key值,从而提高渲染的效率，示例代码如下:

1
2
3
4
5
6
7
8
9
Page({
	data: {
		userList:[
            {id:1,name:'小红'},
            {id:2,name:'小绿'},
            {id:3,name:'小蓝'}
        ]
    }
})
1
2
3
<view wx:for="{{userList}}" wx:key="id">
    {{item.name}}
</view>

没有id可以给索引

WXSS 模板样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML的组件样式，类似于网页开发中的CSS。

WXSS 和 CSS 的区别

wXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，WXSS扩展的特性有:

  • rpx尺寸单位
  • @import样式导入

rpx的实现原理

rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即:当前屏幕的总宽度为750rpx)。

  • 在较小的设备上，1rpx所代表的宽度较小
  • 在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

rpx与px之间的单位换算*

在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则:750rpx = 375px = 750物理像素

1rpx= 0.5px = 1物理像素

设备 rpx换算px(屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx =0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iphone6 Plus 1rpx = 0.552px 1px = 1.81rpx

官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。

开发举例：在iPhone6上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。

@import的语法格式

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下:

1
2
3
4
/** /common/common.wxss **/
.username {
    color: red;
}
1
2
/** index.wxss **/
@import "/common/common.wxss";
1
2
3
4
<!-- index.wxml -->
<view  class="username">
    username
</view>

全局样式和局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

1
2
3
4
/** app.wxss **/
view {
    margin:20rpx;
}

在页面的.wxss 文件中定义的样式为局部样式，只作用于当前页面。

1
2
3
4
/** index.wxss **/
view {
    color: green;
}

注意:

  1. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
  2. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置(app.json)

全局配置文件及常用的配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:

  1. pages
    • 记录当前小程序所有页面的存放路径
  2. window
    • 全局设置小程序窗口的外观
  3. tabBar
    • 设置小程序底部的 tabBar 效果
  4. style
    • 是否启用新版的组件样式

window

小程序窗口的组成部分
  1. 导航栏区域 navigationBar
  2. 背景区域 默认不可见，下拉才显示 background
  3. 页面的主体区域 用来显示 wxml 中的布局

window可配置导航栏区域和背景区域

window节点常用的配置项
属性名 类型 默认值 说明
navigationBarTitleText string 字符串 导航栏标题文字内容
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如#00000o
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉loading的样式，仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px 
1
2
3
4
5
6
7
8
9
10
11
12
// app.json
{
	 "window":{
    	"backgroundColor":"#ccc",
    	"backgroundTextStyle":"dark",
    	"navigationBarBackgroundColor": "#2b4b6b",
    	"navigationBarTitleText": "导航标题",
    	"navigationBarTextStyle":"white",
    	"enablePullDownRefresh":true,
         "onReachBottomDistance":50
  	},
}

tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为:

  • 底部 tabBar
  • 顶部 tabBar

注意:

  • tabBar中只能配置 最少2个、**最多5个 **tab页签
  • 当渲染顶部 tabBar 时，不显示icon，只显示文本
tabBar 的 6 个组成部分
  1. backgroundColor: tabBar的背景色
  2. borderStyle: tabBar 上边框的颜色
  3. iconPath:未选中时的图片路径
  4. selectedlconPath:选中时的图片路径
  5. color: tab 上文字的默认（未选中）颜色
  6. selectedColor: tab 上的文字选中时的颜色
tabBar 节点的配置项
属性 类型 必填 默认值 描述
position String 否 bottom tabBar的位置,仅支持 bottom/top
borderStyle String 否 black tabBar上边框的颜色，仅支持 black/white
color HexColor 否 tab 上文字的默认（未选中）颜色
selectedColor HexColor 否 tab上的文字选中时的颜色
backgroundColor HexColor 否 tabBar的背景色
list Array 否 tab页签的列表,最少2个、最多5个tab
每个tab项的配置选项
属性 类型 必填 描述
pagePath string 是 页面路径，页面必须在pages中预先定义
text string 是 tab 上显示的文字
iconPath string 否 未选中时的图标路径;当postion为top 时，不显示 icon
selectedlconPath string 否 选中时的图标路径;当postion为top时，不显示icon 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// app.json
{
    "tabBar": {
       "list":[
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath":"/images/home.png",
            "selectedIconPath": "/images/home-active.png"
          },
          {
            "pagePath": "pages/message/message",
            "text": "消息",
            "iconPath":"/images/message.png",
            "selectedIconPath": "/images/message-active.png"
          },
          {
            "pagePath": "pages/contact/contact",
            "text": "联系我们",
            "iconPath":"/images/contact.png",
            "selectedIconPath": "/images/contact-active.png"
          }
      ]
  	},
}

页面配置

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。

注意:当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

页面配置中常用的配置项
属性 类型 默认值 描述
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 
1
2
3
4
5
6
7
8
9
10
11
// message.json
{
    "usingComponents": {},
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "消息页面",
    "backgroundColor": "#ff0000",
    "backgroundTextStyle":"light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50
}

网络数据请求

小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:

  1. 只能请求 HTTPS 类型的接口
  2. 必须将接口的域名添加到信任列表中

配置 request 合法域名

需求描述:假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口

配置步骤：登录微信小程序管理后台 -> 左侧开发菜单 -> 开发管理 -> 开发设置 -> 修改 request 合法域名

注意事项：

  1. 域名只支持 https 协议
  2. 域名不能使用 IP 地址或 localhost
  3. 域名必须经过 ICP 备案
  4. 服务器域名一个月最多可申请 5 次修改

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// home.js
page({
    // 发起GET数据请求
    getInfo(){
        wx.request({
    		url:'https://www.escook.cn/api/get', // 请求的接口地址，必须基于 https 协议
    		method:'GET', // 请求的方式
    		data:{ // 发送到服务器的数据
        		name:'zs',
        		age:22
    		},
    		success: (res) => { // 请求成功之后的回调函数
        		console.log(res)
    		}
		})
    }
})
1
<button bindtap="getInfo">发起GET请求</button>

发起 POST 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// home.js
page({
    // 发起POST数据请求
    postInfo(){
        wx.request({
    		url:'https://www.escook.cn/api/post', // 请求的接口地址，必须基于 https 协议
    		method:'POST', // 请求的方式
    		data:{ // 发送到服务器的数据
        		name:'ls',
        		age:33
    		},
    		success: (res) => { // 请求成功之后的回调函数
        		console.log(res)
    		}
		})
    }
})
1
<button bindtap="postInfo">发起POST请求</button>

在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下:

1
2
3
4
5
6
7
8
9
page({
	/**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
    	this.getInfo()
		this.postInfo()
    }
 })

跳过 request 域名合法校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项，跳过 request 合法域名的校验。

微信开发者工具 -> 右上角详情 -> 本地设置 -> 勾选 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

注意:跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用!

关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax请求”，而是叫做“发起网络数据请求”。

小程序的视图与逻辑