微信程序开发.小程序框架

学习网站：form | 微信开放文档

一、表单的基本使用

1、登录

①、定义出登录

 ②、页面构造

<view>
<image src="/pages/asset/aa.jpeg"></image>
</view>
<view class="a">
<form bindsubmit="dl" bind:reset="qk">
<label>用户账号</label>
<input value="{{user.username}}" bind:input="bindName" type="text" placeholder="请输入账号" maxlength="10"></input>
    <view><label>{{user.username}}</label></view>
<label>用户密码</label>
<input value="{{user.password}}" bind:input="bindPwd" type="text" password="true" placeholder="请输入密码"
maxlength="10"></input>
    <view>
        <button form-type="submit" type="primary">登录</button>
        <button form-type="reset">清空</button>
    </view>
</form>
</view>

②、js编写

Page({
    data: {
        user:{
            username:"",
            password:""
        }
    },
    bindName(e){
        //arguments就是函数的参数

        // console.log(arguments)
        console.log(e.detail.value)

        //双向绑定设值
        this.setData({
            "user.username":e.detail.value
        })
    },
    bindPwd(e){
        this.setData({
            "user.password":e.detail.value
        })
    },
    dl(){
        //登录者信息：this.data.user
        wx.showToast({
            title:"登录成功",
            icon:"success"
        })
    },
    qk(){
        this.data.user.username="",
        this.data.user.password=""
    }
    
});

③、css编写

image{
    width: 370px;
    height: 370px;
    border-radius: 50%;
    text-align: center;
}
.a{
    text-align: center;
}

⑤、页面展示

 2、注册

 ①、页面构造

<view>
    <form bindsubmit="zc">
        <label>账号</label>
        <input type="text" placeholder="请输入账号" maxlength="10"></input>
        <label>密码</label>
        <input type="text" placeholder="请输入密码" maxlength="10"></input>
        <label>性别</label>
        <radio-group>
            <radio checked="false" value="男">♂</radio>
            <radio value="女">♀</radio>
        </radio-group>
        <label>爱好</label>
        <checkbox-group>
            <checkbox checked="false">吃</checkbox>
            <checkbox>喝</checkbox>
            <checkbox>玩</checkbox>
        </checkbox-group>
        <picker-view style="height:150px">
            <picker-view-column>
                <view>湖南省</view>
                <view>湖北省</view>
                <view>重庆省</view>
            </picker-view-column>
            <picker-view-column>
                <view>长沙</view>
                <view>益阳</view>
                <view>邵阳</view>
            </picker-view-column>
        </picker-view>
        <view>
            <label>满意度：{{myd[0]}}</label>
            <slider max="4" min="0"></slider>
        </view>
        <view>
            <button form-type="submit" type="primary">注册</button>
            <navigator url="/pages/index/index" open-type="navigate"><button>返回</button></navigator>
        </view>
    </form>
</view>

②、js编写

// pages/register/register.js
Page({
    mm:{
        m:""
    },

    /**
     * 页面的初始数据
     */
    data: {
        myd:["⭐","⭐⭐","⭐⭐⭐","⭐⭐⭐⭐","⭐⭐⭐⭐"]

    },
    zc(){
        //登录者信息：this.data.user
        wx.showToast({
            title:"注册成功",
            icon:"success"
        })
    }
})

③、页面展示