微信小程序开发实战教程课件

第11章WeUI组件库微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标通过WeUI组件库的学习，掌握如何使用第三方组件库掌握如何部署和使用WeUI组件库掌握WeUI组件库中常用组件的用法12311.1WeUI项目的背景、下载及部署随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从0到1进行开发设计，而这个过程中，有大量的UI交互是重复的。另外，微信内部已经有一套H5版本的WeUI样式库。综合考虑，微信团队基于WeUI样式库开发了小程序版本的UI组件库，并将这套组件库开源给外部开发者使用。11.1.1Node.js的下载及安装【演练】安装Node.js在Node.js中文网中选择下载所需Node.js的版本，这里选择的是Windows操作系统64位的Node.js，如图所示。下载完成后，单击“运行”按钮。11.1.1Node.js的下载及安装弹出欢迎向导，单击“Next”按钮，如图所示。11.1.1Node.js的下载及安装选择是否接受用户许可协议，选中“IacceptthetermsintheLicenseAgreement”复选框，单击“Next”按钮，如图所示。11.1.1Node.js的下载及安装选择安装文件夹，单击“Next”按钮，如图所示。11.1.1Node.js的下载及安装选择安装位置，单击“Next”按钮，如图所示。11.1.1Node.js的下载及安装单击“Install”按钮，开始安装，如图所示。11.1.1Node.js的下载及安装单击“Finish”按钮，完成安装，如图所示。11.1.2创建基于WeUI组件库的项目【演练】创建项目并使用WeUI组件库复制第2章中完成的项目，并打开该项目。如图所示，进入项目根目录，运行“cmd”命令。11.1.2创建基于WeUI组件库的项目如图所示，输入“npminit”，按“Enter”键，后面的选项都保留默认值并按“Enter”键，用于初始化项目并创建package.json文件。11.1.2创建基于WeUI组件库的项目保证联网状态，下载构建WeUI组件库。WeUI组件库的npm包名为weui-miniprogram，如图所示，在命令提示符窗口中输入并执行以下命令。11.1.2创建基于WeUI组件库的项目回到微信开发者工具，构建npm，如图所示，可以看到增加了几个文件及目录，选择“工具”→“构建npm”选项，构建完成后，单击“确定”按钮。11.1.2创建基于WeUI组件库的项目如图所示，单击“详情”按钮，选中“本地设置”标签页，选中“使用npm模块”复选框。11.1.2创建基于WeUI组件库的项目引入WeUI组件库的样式文件weui.wxss，在app.wxss中输入图中方框所示的代码。11.1.2创建基于WeUI组件库的项目在页面的JSON文件中加入usingComponents配置字段。在p1.json中输入图中方框所示的代码，表示使用WeUI组件库的dialog组件，组件名称为“mp-dialog”。11.1.2创建基于WeUI组件库的项目在对应页面的WXML文件中直接使用WeUI组件。在p1.wxml中输入图中方框所示的代码，表示使用“mp-dialog”组件。11.2使用WeUI组件随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从0到1进行开发设计，而这个过程中，有大量的UI交互是重复的。另外，微信内部已经有一套H5版本的WeUI样式库。综合考虑，微信团队基于WeUI样式库开发了小程序版本的UI组件库，并将这套组件库开源给外部开发者使用。11.1.1Node.js的下载及安装【演练】Badge徽章11.2.1基础组件修改并保存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"}}11.2.1基础组件修改并保存p1.wxml文件，代码如下。<viewclass="page"><viewclass="page__bd"><mp-cellstitle="Badge徽章"><mp-cell><viewslot="title"style="position:relative;margin-right:10px;"><imagesrc="/images/p2.jpg"style="width:50px;height:50px;display:block"/>11.2.1基础组件<mp-badgecontent="99+"style="position:absolute;top:-.4em;right:-.4em;"/></view></mp-cell><mp-celllink><viewstyle="display:inline-block;vertical-align:middle">单行列表</view><mp-badgecontent="8"style="margin-left:5px;"/><mp-badgestyle="margin-left:5px;"content="New"/></mp-cell></mp-cells></view></view>11.2.1基础组件Badge徽章组件运行结果如图所示。11.2.2表单组件【演练】单选按钮、复选框修改并保存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.2.2表单组件修改并保存p1.wxml文件，代码如下。<viewclass="page"xmlns:wx="/1999/xhtml"><viewclass="page__bd"><mp-formid="form"rules="{{rules}}"models="{{formData}}"><mp-cellstitle="单选列表项"><mp-checkbox-groupprop="radio"multi="{{false}}"bindchange="radioChange"><mp-checkboxwx:for="{{radioItems}}"wx:key="value"label="{{item.name}}"value="{{item.value}}"checked="{{item.checked}}"></mp-checkbox></mp-checkbox-group></mp-cells>11.2.2表单组件<mp-cellstitle="复选列表项"><mp-checkbox-groupprop="checkbox"multi="{{true}}"bindchange="checkboxChange"><mp-checkboxwx:for="{{checkboxItems}}"wx:key="value"label="{{item.name}}"value="{{item.valu