商城系統(tǒng) 注冊

小程序登錄界面樣式開發(fā)實(shí)例

2020-09-27|HiShop
導(dǎo)讀：大多app都有歡迎界面，那么小程序開發(fā)是否也可以設(shè)計(jì)一個登錄歡迎界面，下面為大家介紹小程序登錄界面樣式開發(fā)實(shí)例...

　　小程序登錄界面樣式開發(fā)實(shí)例


       大多app都有歡迎界面，那么小程序開發(fā)是否也可以設(shè)計(jì)一個登錄歡迎界面，下面為大家介紹小程序登錄界面樣式開發(fā)實(shí)例：
 

　　index.wxml

<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    用戶名：
    <input type="text" bindinput="userNameInput"/>
    密碼：
    <input type="text" bindinput="userPasswordInput" password="true"/>
    <button bindtap="logIn">登錄</button>
  </view>
</view>

　　index.js

var app = getApp()
Page({
  data: {
    motto: '歡迎登錄WXapp',
    userName:'',
    userPassword:'',
    id_token:'',//方便存在本地的locakStorage
    response:'' //存取返回?cái)?shù)據(jù)
  },
  userNameInput:function(e){
    this.setData({
      userName: e.detail.value
    })
  },
  userPasswordInput:function(e){
    this.setData({
      userPassword: e.detail.value
    })
    console.log(e.detail.value)
  },
  logIn:function(){
    var that = this
    wx.request({
      url: 'http://localhost:8000/admin',
      data: {
        username: this.data.userName,
        password: this.data.userPassword,
      },
      method: 'GET',
      success: function (res) {
        that.setData({
          id_token: res.data.id_token,
          response:res
        })
        try {
          wx.setStorageSync('id_token', res.data.id_token)
        } catch (e) {
        }
        wx.navigateTo({
          url: '../components/welcome/welcome'
        })
        console.log(res.data);
      },
      fail: function (res) {
        console.log(res.data);
        console.log('is failed')
      }
    })
  }
})
 

　　js文件里Page里的data就類似與react中的state的機(jī)制，

　　之后在js文件中想要調(diào)用data里的數(shù)據(jù)就必須才才用this.data.XXX;

小程序登錄界面樣式開發(fā)實(shí)例

　　但是在wxml中想要綁定data里的數(shù)據(jù)，就才用雙括號的方法，而且!不需要!this.data。直接就是{{XXX}}。

　　在回到代碼里看，wxml中主要就是兩個input框和一個button。通過小程序input的原生API - bindInput (文檔：小程序input)，就可以獲取input的值，

　　然后在data里定義兩個(userName和userPassword)來存取這兩個input的輸入值。

　　再通過button的 bindTap綁定js文件中的logIn函數(shù)。

　　在logIn函數(shù)中，就通過this.data.userName和this.data.userPassword來獲取曾經(jīng)輸入的兩個值。

　　在通過調(diào)用微信的發(fā)送請求API，把兩個值放在請求中，這就有點(diǎn)像ajax發(fā)送請求了。

　　再在success中寫下成功之后想要做的事情，比如這個例子里，就跳轉(zhuǎn)到welcome頁面。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序開發(fā)案例，盡在：http://m.descansotropical.com/xiaocx/kaifa.html 
電話咨詢 預(yù)約演示 0元開店