Développement du programme WeChat.Mini cadre de programme

1. Créez une page de connexion

1. Interface de connexion login.wxml

<view class="container"> 
 <!-- <text>Tu es si belle</text> 
    <text>{ 
   
   {m}}</text>--> 
    <image src="/asset/1.png" mode="aspectFit"></image> 
</view> 
<view> 
    <form bind:submit="aa" bind:reset="bb"> 
        <label>用户名</label> 
        <input value="{ 
   
   { user.username}}" bind:input="bindName" type="text" placeholder="请输入用户名" maxlength="10"></input> <label>密码</label> <input value= 
        " 
        { 
   
   {user.password}}" lier :input="bindPassword" password="true" placeholder="请密码"></input> 
        <button form-type="submit">登录</button> 
        <button form-type="reset">清空</button >  
        <label>Passe-temps</label>
        <groupe de cases à cocher> 
            <checkbox>打羽毛球</checkbox> 
            <checkbox>打篮球</checkbox> 
            <checkbox vérifié="{ 
   
   {true}}" color="#FF0000">打</checkbox> 
        </checkbox- groupe> 
        <radio-group> 
            <radio value="男" vérifié="{ 
   
   {true}}" >男</radio> 
            <radio value="女">女</radio> 
        </radio-group> 
    
        <picker -view style="hauteur :300px"> 
            <picker-view-column> 
                <view>湖南</view> 
                <view>湖北</view> 
                <view>云南</view> 
            </picker-view-column> 
        </picker-view> 
    </ formulaire> 

</view>
<vue> 
    {
   
    {user.username}}
</vue>

2. Disposition de connexion wxss 

image{ 
    largeur : 400 px ; 
    hauteur : 400 px ; 
    rayon de bordure : 50 % ; 
} 
.mage{ 
    display:flex; /*Définir pour une 
    mise en page flexible*/ justifier-content: center; /*Centrage horizontal*/ 
} 
.container{ 
    display :flex; /*défini sur une mise en page flexible*/ 
    justifier-content: center; /*centré horizontalement*/ 
}

 3、login.js

Page({ 
    data : { 
m:"噜啦噜啦", 
        user:{ 
    username:"", 
            password:"" 
        } 
    }, 
    bindName(e){ 
        //arguments是函数的参数
//console.log(arguments) 
// console.log(e.detail.value) 
        console.log(this.data.user) 
        this.setData({ 
            "user.username":e.detail.value 
        }) 
    }, 
    bindPassword(e){ 
        this.setData ({ 
            "user.password":e.detail.value 
        }) 
    }, 
    aa(){ 
        wx.showToast({ 
             title:"xx",
            icône : "succès"
        }) 
    },
    bb(){ 
this.data.user.username="", 
    this.data.user.password="" 
    } 
});