欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
附登录设计实战教程附登录设计实战教程
立即下载

附登录设计实战教程

模板分类 : 小程序模板 模板编号 : Y599 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-02-27 16:39 模板等级 : ☆☆☆☆☆

模板截图:

昨天小程序第一天公测,就下载个小程序自带IDE玩了玩,看了看API,撸出了个登录界面给大家分享下。

下面是主界面和代码。

附登录设计实战教程(图1)

index.wxml

 

index.js

 

 

  1. var app = getApp()  
  2. Page({  
  3.   data: {  
  4.     motto: '欢迎登录WXapp',  
  5.     userName:'',  
  6.     userPassword:'',  
  7.     id_token:'',//方便存在本地的locakStorage  
  8.     response:'' //存取返回数据  
  9.   },  
  10.   userNameInput:function(e){  
  11.     this.setData({  
  12.       userName: e.detail.value  
  13.     })  
  14.   },  
  15.   userPasswordInput:function(e){  
  16.     this.setData({  
  17.       userPassword: e.detail.value  
  18.     })  
  19.     console.log(e.detail.value)  
  20.   },  
  21.   logIn:function(){  
  22.     var that = this  
  23.     wx.request({  
  24.       url: 'http://localhost:8000/admin',  
  25.       data: {  
  26.         username: this.data.userName,  
  27.         password: this.data.userPassword,  
  28.       },  
  29.       method: 'GET',  
  30.       success: function (res) {  
  31.         that.setData({  
  32.           id_token: res.data.id_token,  
  33.           response:res  
  34.         })  
  35.         try {  
  36.           wx.setStorageSync('id_token', res.data.id_token)  
  37.         } catch (e) {  
  38.         }  
  39.         wx.navigateTo({  
  40.           url: '../components/welcome/welcome'  
  41.         })  
  42.         console.log(res.data);  

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。