這篇文章主要介紹微信小程序中后臺(tái)登錄的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有宜良免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

微信小程序 后臺(tái)登錄

實(shí)現(xiàn)效果圖：

最近寫(xiě)了一個(gè)工具類(lèi)的小程序，按需求要求不要微信提供的微信賬號(hào)登錄，需要調(diào)取后臺(tái)登錄接口來(lái)登錄。由于小程序大部分都是調(diào)取微信信息登錄，很少有調(diào)用自己后臺(tái)來(lái)登錄的，所以寫(xiě)的時(shí)候各種坑，現(xiàn)在把趟好坑的代碼共享給大家吧?。≒S：如有不妥之處，共勉之。）

廢話(huà)不說(shuō)，直接上代碼

找到app.js在里面寫(xiě)如下代碼

App({
 onLaunch: function () {
  //調(diào)用API從本地緩存中獲取數(shù)據(jù)
  var logs = wx.getStorageSync('logs') || []
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)
 },
 globalData: {
  adminUserViewId: "",
  token: "",
  userInfo: null,
  BaseURL:"http://airb.cakeboss.com.cn"
  // BaseURL:"http://192.168.0.107:8080"
 },

敲黑板劃重點(diǎn)：上圖中的代碼片段重要的地方就是：“globalData中的 adminUserViewId: "",token: "" ”

這兩個(gè)參數(shù)是前端需要存儲(chǔ)的后臺(tái)參數(shù)，用來(lái)標(biāo)記用戶(hù)的登錄狀態(tài)的。

然后建一個(gè)login文件夾，在login.wxml中寫(xiě)如下代碼

<import src="../../components/toast.wxml" />

<!-- is="toast" 匹配組件中的toast提示 如果用dialog的話(huà)這就是dialog -->
<template is="toast" data="{{ ...$wux.toast }}" />
<view class="login_container">
 <view class="login_view">
  <text class="login_lable">賬號(hào)：</text>
  <input class="login_text" placeholder="請(qǐng)輸入登錄賬號(hào)" bindinput="listenerUsernameInput"/>
 </view>
 <view class="login_view">
  <text class="login_lable">密碼：</text>
  <input class="login_text" placeholder="請(qǐng)輸入密碼" password="true" bindinput="listenerPasswordInput"/>
 </view>
 <view>
  <button class="login_button" bindtap="loginAction">登錄</button>
 </view>
</view>

然后建一個(gè)login文件夾，在login.wxss中寫(xiě)如下代碼

.login_container {
 margin-top: 30px;
}

.login_view {
 width: calc(100% - 40px);
 padding: 0 20px;
 line-height: 45px;
 height: 45px;
 margin-bottom: 20px;
}

.login_text {
 float: left;
 height: 45px;
 line-height: 45px;
 font-size: 12px;
 border: 1px solid rgb(241, 242, 243);
 padding: 0 12px;
 width: calc(100% - 70px);
 border-radius: 4px;
}

.login_lable {
 float: left;
 font-size: 12px;
 width: 40px;
}

.login_button {
 width: 150px;
 background: green;
 color: #fff;
}

在login.js中寫(xiě)如下代碼

//login.js
//獲取應(yīng)用實(shí)例
var app = getApp()
var util = require('../../utils/util.js');

Page({
 data: {
  motto: 'Hello World',
  username: "",
  password: ""
 },
 onLoad(options) {
  // 初始化提示框
  this.$wuxToast = app.wux(this).$wuxToast
 },
 /** 監(jiān)聽(tīng)?zhēng)ぬ?hào)輸入 */
 listenerUsernameInput: function (e) {
  this.data.username = e.detail.value;
 },
 /** 監(jiān)聽(tīng)密碼輸入 */
 listenerPasswordInput: function (e) {
  this.data.password = e.detail.value;
 },
 // 登錄按鈕點(diǎn)擊事件
 loginAction: function () {

  var userName = this.data.username;
  var passwords = this.data.password;
  var that = this;

  if (userName === "") {
   that.$wuxToast.show({
    type: 'text',
    timer: 1000,
    color: '#fff',
    text: "用戶(hù)名不能為空！",
    success: () => console.log('用戶(hù)名不能為空！')
   })
   return;
  } if (passwords === "") {
   that.$wuxToast.show({
    type: 'text',
    timer: 1000,
    color: '#fff',
    text: "密碼不能為空！",
    success: () => console.log('密碼不能為空！')
   })
   return;
  }

  //加載提示框
  util.showLoading("登錄中...");

  var urlStr = app.globalData.BaseURL + '/api/adminUser/login';
  wx.request({
   method: "POST",
   url: urlStr, //僅為示例，并非真實(shí)的接口地址
   data: util.json2Form({
    username: userName,
    password: passwords
   }),
   header: {
    "Content-Type": "application/x-www-form-urlencoded"
   },
   success: function (res) {
    util.hideToast();
    console.log(res.data);
    var code = res.data.code;
    if (code === 200) {
     // 后臺(tái)傳遞過(guò)來(lái)的值
     var adminUserViewId = res.data.data.adminUserViewId;
     var token = res.data.data.token;
     // 設(shè)置全局變量的值
     app.globalData.adminUserViewId = res.data.data.adminUserViewId;
     app.globalData.token = res.data.data.token;
     // 將token存儲(chǔ)到本地
     wx.setStorageSync('adminUserViewId', adminUserViewId);
     wx.setStorageSync('token', token);
     console.log("登錄成功的adminUserViewId：" + adminUserViewId);
     console.log("登錄成功的token：" + token);
     // 切換到首頁(yè)
     wx.switchTab({
      url: '/pages/index/index'
     })
    } else {
     that.$wuxToast.show({
      type: 'text',
      timer: 1000,
      color: '#fff',
      text: res.data.msg,
      success: () => console.log('登錄失敗，請(qǐng)稍后重試。' + res.data.msg)
     })
    }
   },
   fail: function () {
    util.hideToast();
    console.log("登錄失敗");
    that.$wuxToast.show({
     type: 'text',
     timer: 1000,
     color: '#fff',
     text: '服務(wù)器君好累?，請(qǐng)稍后重試',
     success: () => console.log('登錄失敗，請(qǐng)稍后重試。')
    })
   }
  })
 }
})

以上是“微信小程序中后臺(tái)登錄的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱(chēng)：微信小程序中后臺(tái)登錄的示例分析
瀏覽地址：http://aaarwkj.com/article6/gojjig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、App開(kāi)發(fā)、云服務(wù)器、網(wǎng)站內(nèi)鏈、微信小程序、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)