《微信小程序开发实战教程》第11章

checked="{{item.checked}}"></mp-checkbox> </mp-checkbox-group>
</mp-cells>
value="{{item.value}}"
11.2.2 表单组件
26
<mp-cells title="复选列表项"> <mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkbox Change"> <mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item. name}}" value="{{item.value}}"
17
在页面的JSON文件中加入usingComponents配置字段。在p1.json中输入图中方框所示的 代码，表示使用WeUI组件库的dialog组件，组件名称为“mp-dialog”。
11.1.2 创建基于WeUI组件库的项目
18
在对应页面的WXML文件中直接使用WeUI组件。在p1.wxml中输入图中方框所示的代码， 表示使用“mp-dialog”组件。
11.2.1 基础组件
22
<mp-badge content="99+" style="position: absolute;top: -.4em;right: -.4em;"/> </view>
</mp-cell> <mp-cell link>
<view style="display: inline-block; vertical-align: middle">单行列表</view> <mp-badge content="8" style="margin-left: 5px;"/> <mp-badge style="margin-left: 5px;" content="New"/> </mp-cell> </mp-cells> </view> </view>
11.2.1 基础组件
21
修改并保存p1.wxml文件，代码如下。
<view class="page"> <view class="page__bd"> <mp-cells title="Badge徽章"> <mp-cell> <view slot="title" style="position: relative;margin-right: 10px;"> <image src="/images/p2.jpg" style="width: 50px; height: 50px; display: block"/>
11.2.2 表单组件
25
修改并保存p1.wxml文件，代码如下。
<view class="page" xmlns:wx="/1999/xhtml"> <view class="page__bd"> <mp-form id="form" rules="{{rules}}" models="{{formData}}"> <mp-cells title="单选列表项"> <mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange"> <mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item. name}}"
11.1.1 Node.js的下载及安装
4
【演练】安装Node.js
在Node.js中文网中选择下载所需 Node.js的版本，这里选择的是 Windows操作系统64位的Node.js， 如图所示。
下载完成后，单击“运行”按钮。
11.1.1 Node.js的下载及安装
5
弹出欢迎向导，单击“Next”按钮， 如图所示。
11.1.1 Nod练】Badge徽章
修改并保存p1.json文件，代码如下。
{ "usingComponents": { "mp-cells": "/miniprogram_npm/weui-miniprogram/cells/cells", "mp-cell": "/miniprogram_npm/weui-miniprogram/cell/cell", "mp-badge": "/miniprogram_npm/weui-miniprogram/badge/badge" } }
微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）
第11章 WeUI组件库
学习目标
1 通过WeUI组件库的学习，掌握如何使用第三方组件库 2 掌握如何部署和使用WeUI组件库 3 掌握WeUI组件库中常用组件的用法
11.1 WeUI项目的背景、下载及部署
3
随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从0到1进行开 发设计，而这个过程中，有大量的UI交互是重复的。另外，微信内部已经有一套H5版本的 WeUI样式库。综合考虑，微信团队基于WeUI样式库开发了小程序版本的UI组件库，并将 这套组件库开源给外部开发者使用。
11.2 使用WeUI组件
19
随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从0到1进行开 发设计，而这个过程中，有大量的UI交互是重复的。另外，微信内部已经有一套H5版本的 WeUI样式库。综合考虑，微信团队基于WeUI样式库开发了小程序版本的UI组件库，并将 这套组件库开源给外部开发者使用。
11.1.2 创建基于WeUI组件库的项目
15
如图所示，单击“详情”按钮，选中 “本地设置”标签页，选中“使用 npm模块”复选框。
11.1.2 创建基于WeUI组件库的项目
16
引入WeUI组件库的样式文件weui.wxss，在app.wxss中输入图中方框所示的代码。
11.1.2 创建基于WeUI组件库的项目
checked="{{item.checked}}"></mp-checkbox> </mp-checkbox-group>
</mp-cells> </mp-form> </view> </view>
11.2.2 表单组件
27
单选按钮、复选框组件的运行 结果如图所示。
微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）
学 习 进 步！
11.2.1 基础组件
23
Badge徽章组件运行结果如图所示。
11.2.2 表单组件
24
【演练】单选按钮、复选框
修改并保存p1.json文件，代码如下。
{ "component": true, "usingComponents": { "mp-toptips": "/miniprogram_npm/weui-miniprogram/toptips/toptips", "mp-cells": "/miniprogram_npm/weui-miniprogram/cells/cells", "mp-cell": "/miniprogram_npm/weui-miniprogram/cell/cell", "mp-checkbox": "/miniprogram_npm/weui-miniprogram/checkbox/checkbox", "mp-checkbox-group": "/miniprogram_npm/weui-miniprogram/checkbox-group/checkbox-group", "mp-form": "/miniprogram_npm/weui-miniprogram/form/form" } }
11.1.1 Node.js的下载及安装
8
选择安装位置，单击“Next”按钮， 如图所示。
11.1.1 Node.js的下载及安装
9
单击“Install”按钮，开始安装，如图 所示。
11.1.1 Node.js的下载及安装
10
单击“Finish”按钮，完成安 装，如图所示。
11.1.2 创建基于WeUI组件库的项目
11.1.2 创建基于WeUI组件库的项目
13
保证联网状态，下载构建WeUI组件库。WeUI组件库的npm包名为weui- miniprogram，如 图所示，在命令提示符窗口中输入并执行以下命令。