Desarrollo del programa WeChat. Marco del mini programa.

1. Crea una página de inicio de sesión

1. Interfaz de inicio de sesión login.wxml

<view class="container"> 
 <!-- <text>Eres tan hermosa</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="{ 
   
   { usuario.nombredeusuario}}" bind:input="bindName" type="text" placeholder="请输入用户名" maxlength="10"></input> <label>密码</label> <input value= 
        " 
        { 
   
   {usuario.contraseña}}" enlace:input="bindPassword" contraseña="true" placeholder="请密码"></input> 
        <button form-type="submit">登录</button> 
        <button form-type="reset">清空</button >  
        <label>Afición</label>
        <grupo-casilla de verificación> 
            <checkbox>打羽毛球</checkbox> 
            <checkbox>打篮球</checkbox> 
            <checkbox check="{ 
   
   {true}}" color="#FF0000">打</checkbox> 
        </checkbox- grupo> 
        <grupo-radio> 
            <valor radio="男" comprobado="{ 
   
   {true}}" >男</radio> 
            <valor radio="女">女</radio> 
        </grupo-radio> 
    
        <selector -ver estilo="altura:300px"> 
            <picker-view-column> 
                <view>湖南</view> 
                <view>湖北</view> 
                <view>云南</view> 
            </picker-view-column> 
        </picker-view> 
    </ formulario> 

</vista>
<vista> 
    {
   
    {usuario.nombredeusuario}}
</vista>

2. Diseño de inicio de sesión wxss 

imagen{ 
    ancho: 400px; 
    alto: 400px; 
    radio de borde: 50%; 
} 
.mage{ 
    display:flex; /*Establecer diseño flexible*/ 
    justify-content: center; /*Centrado horizontal*/ 
} 
.container{ 
    display :flex; /*Establecer diseño flexible*/ 
    justify-content: center; /*Centrado horizontalmente*/ 
}

 3、iniciar sesión.js

Página({ 
    datos: { 
m:"噜啦噜啦", 
        usuario:{ 
    nombre de usuario:"", 
            contraseña:"" 
        } 
    }, 
    bindName(e){ 
        //argumentos是函数的参数
//console.log(argumentos) 
// console.log(e.detail.value) 
        console.log(this.data.user) 
        this.setData({ 
            "user.username":e.detail.value 
        }) 
    }, 
    bindPassword(e){ 
        this.setData ({ 
            "usuario.contraseña":e.detail.value 
        }) 
    }, 
    aa(){ 
        wx.showToast({ 
             título:"xx",
            icono: "éxito"
        })  
    },
    bb(){ 
this.data.user.username="", 
    this.data.user.password="" 
    } 
});