Feng’ Blog

微信小程序-表单开发
实现下图录入表单:下载weui-wxss文件(自己搜索),放置与项目中。weui-wxss(WeUI)是一套同微信...
扫描右侧二维码阅读全文
03
2018/04

微信小程序-表单开发

weixingxiaocx.jpg


实现下图录入表单:
1-2.png
下载weui-wxss文件(自己搜索),放置与项目中。

weui-wxss(WeUI)是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

引入样式文件

2-2.png

在pages目录中新建一个页面为mem_create
3-1.png

根目录下的app.json中要包括我们新建的mem_create
4-1.png

create.wxml代码:

<view class="page">
<view class="page__bd">

<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">
  {{message}}
</view>
<form bindsubmit="formSubmit">
  <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" type="text" name="name" value="{{name}}" 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">
        <radio-group class="radio-group weui-cell weui-check__label" name="type" bindchange="setSex">
          <label class="radio" wx:for="{{types}}" wx:key="value">
            <radio value="{{item.name}}" checked="{{item.checked}}" />
            <text>{{item.value}}</text>
          </label>
        </radio-group>
      </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="phone" maxlength="11" value="{{phone}}" type="number" 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__hd">
        <view class="weui-label">出生日期</view>
      </view>
      <view class="weui-cell__bd">
        <picker mode="date" name="date" value="{{birthday}}" bindchange="bindDateChange">
          <view class="weui-input">{{birthday}}</view>
        </picker>
      </view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    </view>
    <view class="weui-cell weui-cell_input weui-cell_vcode">
      <view class="weui-cell__hd">
        <view class="weui-label">会员等级</view>
      </view>
      <view class="weui-cell__bd">
        <radio-group bindchange="setMemberGrade">
          <picker mode="selector" value="{{gender}}" name="gender" range="{{member_grade}}" bindchange="setMemberGrade">
            <view class="weui-input">{{member_grade[gender]}}</view>
          </picker>
        </radio-group>
      </view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></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="money" 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 class="weui-input" name="integral" 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 class="weui-input" name="certificate" 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 class="weui-input" name="tel" 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 class="weui-input" name="address" placeholder="请填写联系地址" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">Email</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="email" placeholder="请填写Email" />
      </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="re_member" placeholder="请填写推荐人" />
      </view>
    </view>
  </view>
  <checkbox-group bindchange="bindAgreeChange" name="isAgree">
    <label class="weui-agree" for="weuiAgree">
      <view class="weui-agree__text">
        <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
        <view class="weui-agree__checkbox-icon">
          <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
        </view>
        阅读并同意
        <navigator url="/pages/notice/index?id=1" class="weui-agree__link">《免责声明》</navigator>
      </view>
    </label>
  </checkbox-group>
  <view class="weui-btn-area">
    <button class="weui-btn" style='margin:5px;' type="primary" formType="submit">确定</button>
    <button formType="reset" style='margin:5px;'>重置</button>
  </view>
</form>

</view>
</view>
create.wxss代码:

.page__bd{background: #efefef;}
.weui-cells__title{padding-top:.3rem;margin-top:0;}
.radio-group{padding: 10px 0px !important;}
.weui-label{color:black}
.radio text{margin:0rpx 8rpx;}
.radio{margin-right: 12rpx;}
.weui-btn{background: #f4de3b!important;color:#000!important;}
.weui-input{overflow:hidden;}
create.js代码:

// pages/mem_create/create.js
Page({
/**

  • 页面的初始数据
    */

data: {

showTopTips: false,
types: [{ name: '1', value: '男', checked: true }, { name: '2', value: '女' }],
member_grade: ['请选择等级','一星会员', '二星会员', '三星会员', '四星会员', '五星会员'],
gender: 0,
mem_type: ['普通会员'],
type: 1,
birthday: '请选择日期',
message: '暂无提示消息...',
isAgree: false,

},
setSex: function (e) {

this.setData({ type: e.detail.value })

},
setMemberGrade: function (e) {

console.log('已选择会员等级 ,携带值为', e.detail.value)
this.setData({
  gender: e.detail.value
})

},
bindDateChange: function (e) {

console.log('出生日期发生改变,携带值为', e.detail.value)
this.setData({
  birthday: e.detail.value
})

},
bindAgreeChange: function (e) {

this.setData({
  isAgree: !!e.detail.value.length
});

},
// 提交表单
formSubmit: function (e) {

this.setData({
  message: '成功....'
})
// console.log(this.data.member_grade[this.data.index])
wx.showToast({
  title: '注册成功',
  icon: 'succes',
  duration: 2000,
  mask: true
})
return;

},
/**

  • 生命周期函数--监听页面加载
    */

onLoad: function (options) {

console.log("页面加载完成...")

},
/**

  • 生命周期函数--监听页面初次渲染完成
    */

onReady: function () {

console.log("页面初次渲染完成...")

},
/**

  • 生命周期函数--监听页面显示
    */

onShow: function () {
},
/**

  • 生命周期函数--监听页面隐藏
    */

onHide: function () {
},
/**

  • 生命周期函数--监听页面卸载
    */

onUnload: function () {
},
/**

  • 页面相关事件处理函数--监听用户下拉动作
    */

onPullDownRefresh: function () {

console.log("用户下拉动作...")

},
/**

  • 页面上拉触底事件的处理函数
    */

onReachBottom: function () {
},
/**

  • 用户点击右上角分享
    */

onShareAppMessage: function () {
}
})
create.json代码:

{
"navigationBarTitleText": "新增会员",
"enablePullDownRefresh": false
}
可根据实际情况修改表单中的字段以及各个字段的触发事件。
6-1.png

Last modification:January 21st, 2019 at 06:44 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment