程序基础实战 8

mp-cells/mp-cellmp-badge徽章mp-checkbox复选框mp-form表单mp-dialog对话框weui.wxss第11章WeUI组件库课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》学习目标第11章WeUI组件库WeUI组件库是一套基于weui.wxss样式库开发的小程序扩展组件库，由微信官方设计团队和小程序团队为微信小程序开发量身设计，与微信原生视觉体验一致，可提升用户的使用体验。1掌握如何使用WeUI组件库。2掌握WeUI组件库中常用组件的用法。211.1

创建基于WeUI组件库的项目第11章WeUI组件库【演练11.1】创建项目并使用WeUI组件库。1复制第2章中完成的项目，并打开该项目。2如图11-1所示，进入项目根目录，执行cmd命令。图11-1

执行cmd命令311.1

创建基于WeUI组件库的项目（续）第11章WeUI组件库【演练11.1】创建项目并使用WeUI组件库。3如图11-2所示，输入npminit并按Enter键，后面的选项都采用默认值，依次按Enter键，以初始化项目并创建package.json文件。图11-2

初始化项目并创建package.json文件411.1

创建基于WeUI组件库的项目（续）第11章WeUI组件库【演练11.1】创建项目并使用WeUI组件库。4确保处于联网状态，加载WeUI组件库。WeUI组件库的npm包名为weui-miniprogram，在命令提示符窗口中输入并执行以下命令，如图11-3所示。npminstall--save--productionweui-miniprogram图11-3

加载WeUI组件库511.1

创建基于WeUI组件库的项目（续）第11章WeUI组件库【演练11.1】创建项目并使用WeUI组件库。5回到微信开发者工具，如图11-4所示，选择“工具”→“构建npm”选项，构建npm后可以看到增加了几个文件。6如图11-5所示，提示构建npm完成，单击“确定”按钮。图11-4

构建npm图11-5

构建npm完成611.1

创建基于WeUI组件库的项目（续）第11章WeUI组件库【演练11.1】创建项目并使用WeUI组件库。7引入WeUI组件库的样式文件weui.wxss。在app.wxss中输入图11-6中方框所示的代码。8在页面的JSON文件中添加usingComponents配置字段。在p1.json中输入图11-7中方框所示的代码，表示使用WeUI组件库的dialog组件，组件名称为mp-dialog。图11-6

引入WeUI组件库的样式文件weui.wxss图11-7

在页面的JSON文件中添加usingComponents配置字段711.1

创建基于WeUI组件库的项目（续）第11章WeUI组件库【演练11.1】创建项目并使用WeUI组件库。9在对应页面的WXML文件中直接使用WeUI组件。在p1.wxml中输入图11-8中方框所示的代码，表示使用mp-dialog组件。图11-8

在对应页面的WXML文件中使用WeUI组件【说明】因为没有进行逻辑处理，所以界面中将一直显示右侧对话框。通过上述步骤，可基本掌握使用WeUI组件库的流程，下面介绍WeUI组件库中常用组件的具体用法。811.2.1

WeUI基础组件第11章WeUI组件库·11.2使用WeUI组件【演练11.2】Badge徽章组件的使用。1继续使用11.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"}}911.2.1

WeUI基础组件（续）第11章WeUI组件库【演练11.2】Badge徽章组件的使用。2修改并保存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"/><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>1011.2.1

WeUI基础组件（续）第11章WeUI组件库Badge徽章组件的运行结果如图11-9所示。图11-9

Badge徽章组件的运行结果1111.2.2

WeUI表单组件第11章WeUI组件库·11.2使用WeUI组件【演练11.3】单选按钮、复选框组件的使用。1修改并保存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"}}1211.2.2

WeUI表单组件（续）第11章WeUI组件库【演练11.3】单选按钮、复选框组件的使用。2修改并保存p1.wxml文件，代码如下。<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><mp-cellstitle="复选列表项"><mp-checkbox-groupprop="checkbox"multi="{{true}}"bindchange="checkboxChange"><mp-checkboxwx:for="{{checkboxItems}}"wx:key="value"label="{{item.name}}"value="{{item.value}}"checked="{{item.checked}}"></mp-checkbox></mp-checkbox-group></mp-cells></mp-form>1311.2.2

WeUI表单组件（续）第11章WeUI组件库【演练11.3】单选按钮、复选框组件的使用。3修改并保存p1.js文件，代码如下（第1／2段）。Component({data:{radioItems:[{name:'男',value:'0',checked:true},{name:'女',value:'1'}],checkboxItems:[{name:'看书',value:'0',checked:true},{name:'运动',value:'1'}],rules:[{name:'radio',rules:{required:true,message:'单选列表是必选项'},},{name:'checkbox',rules:{required:true,message:'多选列表是必选项'},}]},methods:{radioChange:function(e){console.log('radio发生change事件，携带的value值为：',e.detail.value);varradioItems=this.data.radioItems;for(vari=0,len=radioItems.length;i<len;++i){radioItems[i].checked=radioItems[i].value==e.detail.value;}this.setData({radioItems:radioItems,['formData.radio']:e.detail.value});},1411.2.2

WeUI表单组件（续）第11章WeUI组件库【演练11.3】单选按钮、复选框组件的使用。（3）p1.js文件（续）。第2／2段：checkboxChange:function(e){console.log('checkbox发生change事件，携带的value值为：',e.detail.value);varcheckboxItems=this.data.checkboxItems,values=e.detail.value;for(vari=0,lenI=checkboxItems.length;i<lenI;++i){checkboxItems[i].checked=false;for(varj=0,lenJ=values.length;j<lenJ;++j){if(ch