受欢迎的博客标签

wechat-微信小程序Asp .Net Core开发实战记录(34)-微信小程序云开发启用官方组件weui.wxss

Published

 

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的使用方法

https://www.jianshu.com/p/010cea4202b8