1.简介
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。
https://github.com/Tencent/weui-wxss
https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
demo:https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
2.准备工作
2.1 下载样式文件
在miniprogram下新建一个目录weui,用来存放weiui的文件
将dist/style/** 拷贝到/miniprogram/wenui
2.2 引用样式文件
在app.wxss内引入style/weui.wxss
@import 'weui/weui.wxss';
2.3 复制wxss
将https://github.com/Tencent/weui-wxss/dist/app.wxss
内容复制到自己的app.wxss中
3.diy
用户中心
<view class="page">
<view class="page__bd">
<view class="weui-cells weui-cells_after-title">
<!-- 用户图像-->
<view class="weui-cell">
<label>
<view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
<image src="{{avatarUrl|| defaultAvatarUrl}}" style="width: 50px; height: 50px; display: block" />
<view class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</view>
</view>
<view class="weui-cell__bd">
<view>{{userInfo.nickName || '点亮图像'}}</view>
<view style="font-size: 13px;color: #888888;">摘要信息</view>
</view>
<button open-type='getUserInfo' bindgetuserinfo='onGetUserInfo'></button>
</label>
</view>
<!-- 菜单导航-->
<view class="weui-cells__title">功能演示</view>
<navigator url="/pages/pulish/pulish" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">图片上传及发表文字</view>
<view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
</navigator>
<navigator url="/pages/advice/advice" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">意见反馈</view>
<view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
</navigator>
</view>
<view class="weui-cells__title">项目信息</view>
<view class="weui-cells weui-cells_after-title">
<navigator url="/pages/about/about" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">关于项目</view>
<view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
</navigator>
<navigator url="/pages/systeminfo/systeminfo" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">系统信息</view>
<view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
</navigator>
<navigator url="/pages/miniqrcode/miniqrcode" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">小程序码</view>
<view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
</navigator>
<view class="weui-cell weui-cell_access" bindtap='showInfo'>
<view class="weui-cell__bd">
<view style="display: inline-block; vertical-align: middle">关于我们</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
</view>
</view>
</view>
</view>
<!--miniprogram/pages/store/storeOwner/index/index.wxml-->
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">Input</view>
<view class="page__desc">表单输入</view>
</view>
<view class="page__bd">
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>
<view class="weui-cells__title">表单</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">日期</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">业务区域</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" data-value='{{inpVal}}' bindinput='getName' value='{{inpVal}}' placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">序号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">品类</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">型号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">数量</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">价格</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">金额</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">库存</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">客户姓名</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">客户电话</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">客户地址</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">赠品</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">备注</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">单号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq" />
</view>
</view>
</view>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
</view>
</view>
</view>
模板
<!--miniprogram/pages/Salesman/EmployeeProductStockOut/_CreateOrUpdate/index.wxml-->
<!--https://github.com/xiaoxinpro/xxjzWeChat/blob/e0678399412d0a37060379c261ff03a63cb0fcc0/pages/list/edit.wxml-->
<view class="page">
<view class="page__bd">
<form bindsubmit="bindSave">
<!--错误提示-->
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{textTopTips}}</view>
<!--记账表单-->
<view class="weui-cells__title" wx:if="{{isEditStatus}}">编辑出库记录</view>
<view class="weui-cells__title" wx:if="{{!isEditStatus}}">添加出库记录</view>
<!--产品型号选择-->
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd">
<view class="weui-label">产品型号</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindPickerChangeProductType" name="ProductType" value="{{ProductTypeIndex}}" range="{{ProductStockList}}" range-key="ProductType">
<view class="weui-select weui-select_in-select-after">{{ProductStockList[ProductTypeIndex].ProductType}}</view>
</picker>
</view>
</view>
<view class="weui-cells__title">销售\缴费单号</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" name="title" placeholder="请输入销售\缴费单号" />
</view>
</view>
</view>
<view class="weui-cells__title">数量</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" name="Quantity" type="digit" value="{{EmployeeProductStockOut.Quantity}}" placeholder="请输入数量" />
</view>
</view>
</view>
<view class="weui-cells__title">问题描述</view>
<view class="weui-cells weui-cells_form">
<view class="weui-cell ">
<view class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请描述你所发生的问题" rows="3"></textarea>
<view class="weui-textarea-counter"><text>0</text>/200</view>
</view>
</view>
</view>
<view class="weui-cells weui-cells_after-title">
<!--数量输入-->
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">数量</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="Quantity" type="digit" value="{{EmployeeProductStockOut.Quantity}}" />
</view>
</view>
<!--金额输入-->
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">金额</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="Price" type="digit" value="{{EmployeeProductStockOut.Price}}" placeholder="输入{{typeValue}}金额" />
</view>
</view>
<!--日期选择-->
<view class="section">
<view class="section__title">销售日期</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<!--备注输入-->
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">备注</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="Mark" value="{{EmployeeProductStockOut.Mark}}" placeholder="输入备注信息" />
</view>
</view>
</view>
<!-- 按钮 -->
<view class="weui-btn-area">
<button class="weui-btn" type="primary" formType="submit" wx:if="{{!isEditStatus}}">添加</button>
<button class="weui-btn" type="primary" formType="submit" wx:if="{{isEditStatus}}">编辑</button>
<button class="weui-btn" type="default" bindtap="bindBack">返回</button>
</view>
<!-- 广告 -->
<!-- <view class="weui-ad-area" wx:if="{{adFunctionConfig.enable}}">
<ad unit-id="adunit-bfe68df45d61cc37" ad-intervals="30"></ad>
</view> -->
</form>
</view>
</view>
<!--miniprogram/pages/adminEmployee/Employee/_CreateOrUpdate/index.wxml-->
<view class="page">
<view class="page__bd">
<form bindsubmit="bindSave">
<!--错误提示-->
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{textTopTips}}</view>
<!--表单-->
<view class="weui-cells__title" wx:if="{{isEditStatus}}">编辑记录</view>
<view class="weui-cells__title" wx:if="{{!isEditStatus}}">添加记录</view>
<view class="weui-cells">
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd" style="position: relative; margin-right: 10px;">
<image src="{{Employee.UserInfo.avatarUrl}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
<text class="weui-badge" style="position: absolute; top: -0.4em; right: -0.4em;">8</text>
</view>
<view class="weui-cell__bd">
<view>昵称{{Employee.UserInfo.nickName}}</view>
<view style="font-size: 13px; color: #888;">摘要信息</view>
</view>
</view>
</view>
<view class="weui-cells">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">姓名</view>
</view>
<view class="weui-cell__bd">
<input name="name" value="{{Employee.UserName}}" class="weui-input" type="text" placeholder="请输入姓名" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">手机号码</view>
</view>
<view class="weui-cell__bd">
<input name="tel" value="{{ Employee.Telephone}}" class="weui-input" type="tel" placeholder="请输入手机号码" />
</view>
</view>
</view>
<!--员工角色选择-->
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd">
<view class="weui-label">员工角色</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindPickerChangeEmployeeRole" name="Name" value="{{EmployeeRolePickerIndex}}" range="{{EmployeeRoleList}}" range-key="Name">
<view class="weui-select weui-select_in-select-after">{{EmployeeRoleList[EmployeeRolePickerIndex].Name}}</view>
</picker>
</view>
</view>
<!--不可修改信息-->
<view class="weui-form-preview__bd">
<view class="weui-form-preview__item">
<label class="weui-form-preview__label">用户昵称</label>
<text class="weui-form-preview__value">{{Employee.UserInfo.nickName}}</text>
</view>
<view class="weui-form-preview__item">
<label class="weui-form-preview__label">Unionid</label>
<text class="weui-form-preview__value">{{Employee.AuthorUnionid}}</text>
</view>
<view class="weui-form-preview__item">
<label class="weui-form-preview__label">_openid</label>
<text class="weui-form-preview__value">{{Employee.AuthorOpenid}}</text>
</view>
</view>
<view class="weui-cells__title">销售\缴费单号</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" name="OrderNumber" placeholder="请输入销售\缴费单号" />
</view>
</view>
</view>
<!--数量输入-->
<view class="weui-cells__title">数量</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" name="Quantity" type="digit" value="{{EmployeeProductStockOut.Quantity}}" placeholder="请输入数量" />
</view>
</view>
</view>
<!--金额输入-->
<view class="weui-cells__title">金额</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" name="Price" type="digit" value="{{EmployeeProductStockOut.Price}}" placeholder="请输入金额" />
</view>
</view>
</view>
<!--日期选择-->
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">销售日期</view>
</view>
<view class="weui-cell__bd">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</view>
</view>
<!--备注输入-->
<view class="weui-cells__title">备注</view>
<view class="weui-cells weui-cells_form">
<view class="weui-cell ">
<view class="weui-cell__bd">
<textarea class="weui-textarea" name="Mark" value="{{EmployeeProductStockOut.Mark}}" placeholder="输入备注信息" rows="3"></textarea>
<view class="weui-textarea-counter"><text>0</text>/200</view>
</view>
</view>
</view>
<!-- 按钮 -->
<view class="weui-btn-area">
<button class="weui-btn" type="primary" formType="submit" wx:if="{{!isEditStatus}}">添加</button>
<button class="weui-btn" type="primary" formType="submit" wx:if="{{isEditStatus}}">确认修改</button>
</view>
<!-- 广告 -->
<!-- <view class="weui-ad-area" wx:if="{{adFunctionConfig.enable}}">
<ad unit-id="adunit-bfe68df45d61cc37" ad-intervals="30"></ad>
</view> -->
</form>
</view>
</view>
一、绑定简单数组
通过bindChange控制index,使得当前选择值发生改变
示例1
data: {
Data: ['A','B'],
Index: 0,
},
<picker class="picker" bindchange="bindChange" value="{{Index}}" range="{{Data}}">
<view >
当前选择:{{Data[Index]}}
</view>
</picker>
二、绑定多维数组
通过bindChange控制index,使得当前选择值发生改变,value是真正想得到值,选择后通过index可获取并设置,name只是想显示的值,这里的id其实是index值。
这个方法经常会用到,因为我们要的实体id不会是顺序的012345...
示例2
data: {
Data: [{id:0,value:'a',name:'A' },{id:1,value:'b',name:'B' }],
Index: 0,
currentId
},
<picker class="picker" bindchange="bindChange" value="{{Index}}" range="{{Data}}" range-key="name">
<view >
当前选择:{{Data[Index].name}}
</view>
</picker>
WeUI的使用方法