一,使用weui-wxss组件做一个表单页面
WeUI组件库简介
这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。
项目背景
随着小程序的普及,微信也有很多内部小程序在开发,每个小程序都需要从零到1进行开发设计,而这个过程中,有大量的UI交互是重复的,另外,微信内部已经有一套H5版本的WeUI样式库。综合考虑,我们基于WeUI样式库开发了小程序版本的UI组件库,在内部多个小程序项目已经使用OK的情况下,我们把这套组件库开源让外部开发者也可以使用,欢迎大家Star以及提Issue。
<!--pages/user/user_info/user_info.wxml-->
<!--pages/visitor/user_info/user_info.wxml-->
<view class="page">
<form report-submit='true' bindsubmit="formSubmit">
<view class="weui-cell weui-cell_input">
<image mode="aspectFill" class='user_img' src='{
{comp_img}}' bindtap='change_img'></image>
</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 name="comp_surname" disabled='{
{disabled}}' value="{
{comp_surname}}" class="weui-input" 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="comp_name" disabled='{
{disabled}}' value="{
{comp_name}}" class="weui-input" placeholder=""/>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">E-mail</view>
</view>
<view class="weui-cell__bd">
<input value='{
{comp_email}}' name='comp_email' class="weui-input" 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 value="{
{comp_mobile}}" name="comp_mobile" class="weui-input" placeholder=""/>
</view>
</view>
</view>
<view class="weui-cells__title">性别</view>
<view class="weui-cells weui-cells_after-title">
<radio-group name="comp_sex">
<label class="weui-cell weui-check__label" wx:for="{
{arrSex}}" wx:key="index">
<radio value="{
{item.id}}" checked="{
{item.checked}}"/>
<view class="weui-cell__bd">{
{
item.val}}</view>
</label>
</radio-group>
</view>
<view