微信小程序简单个人信息表单页面

最新推荐文章于 2024-10-01 20:05:11 发布

转载

最新推荐文章于 2024-10-01 20:05:11 发布 · 9.1k 阅读

19 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qianyou304/p/11498687.html

文章标签：

#ui #javascript #前端 #ViewUI

本文介绍了如何在微信小程序中创建一个简单的个人信息表单页面。通过WXML编写页面结构，利用WXSS引入WeUI样式库提升界面美观度，同时在JS部分实现表单逻辑。

wxml部分：这里引用的icon小图标可以自主更换

<view>
  <view class="titleCss">
    <text class="titleTextCss">{
   
   {titleInfo}}</text>
  </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 labelCss">
              <image src="../../icon/user_red.png" class="iconCss"></image>
              <text class="textCss">用户名:</text>
            </view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户名"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
            <view class="weui-label labelCss">
              <image src="../../icon/password.png" class="iconCss"></image>
              <text class="textCss">密码:</text>
            </view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入密码" password bindinput="passwordInput" focus="{
   
   {password_show}}"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_input">
        <view class="weui-label labelCss">
          <image src="../../icon/safety.png" class="iconCss"></image>
          <text class="textCss">确认密码:</text>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="plac