用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    846

    主题

    2027

    帖子

    2万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2016-11-9 18:40:28 zhichi_admin 管理员 楼主 274022

    下载个小程序自带IDE玩了玩,看了看API,撸出了个登录界面给大家分享下。

    下面是主界面和代码。

    index.wxml

    1. [html] view plain copy
    2.   
    3.    
    4.     {{motto}}  
    5.     用户名:  
    6.       
    7.     密码:  
    8.       
    9.     登录  
    复制代码

    index.js

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

    代码就是以上那些,个人感觉小程序和react真的很像,不亏于小程序源码中imoort react的这一句。所以有react基础的会更好上手小程序的吧~


    js文件里Page里的data就类似与React中的state的机制,

    之后在js文件中想要调用data里的数据就必须才才用this.data.XXX;

    但是在wxml中想要绑定data里的数据,就才用双括号的方法,而且!不需要!this.data。直接就是{{XXX}}。


    在回到代码里看,wxml中主要就是两个input框和一个button。通过小程序input的原生API - bindInput (文档:小程序input),就可以获取input的值,

    然后在data里定义两个(userName和userPassword)来存取这两个input的输入值。

    再通过button的 bindTap绑定js文件中的logIn函数。(文档:小程序button


    在logIn函数中,就通过this.data.userName和this.data.userPassword来获取曾经输入的两个值。

    在通过调用微信的发送请求API,把两个值放在请求中,这就有点像ajax发送请求了。

    再在success中写下成功之后想要做的事情,比如这个例子里,就跳转到welcom页面。


    游客,如果您要查看本帖隐藏内容请回复


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    很号,很给力。谢谢了!学学!
    使用道具 举报 回复
    谢谢楼主,感谢楼主分享,楼主好人一生平安!!!
    登录首先要先注册的吧,注册界面在哪啊?
    2017-4-14 23:47:06 假孩子 来自手机 新人求带
    6#
    正需要,支持楼主大人了!
    来自: 微社区
    学习中,谢谢分享
    学习中,谢谢分享!!!
    确实是难得好帖啊,顶先

    谢谢楼主,感谢楼主分享,楼主好人一生平安!!!
    1234下一页
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X