国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序 后臺登錄(非微信賬號)實例詳解

2019-11-19 16:58:05
字體:
來源:轉載
供稿:網友

微信小程序 后臺登錄

實現效果圖:

最近寫了一個工具類的小程序,按需求要求不要微信提供的微信賬號登錄,需要調取后臺登錄接口來登錄。由于小程序大部分都是調取微信信息登錄,很少有調用自己后臺來登錄的,所以寫的時候各種坑,現在把趟好坑的代碼共享給大家吧!(PS:如有不妥之處,共勉之。)


廢話不說,直接上代碼

找到app.js在里面寫如下代碼

App({ onLaunch: function () {  //調用API從本地緩存中獲取數據  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" },

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

這兩個參數是前端需要存儲的后臺參數,用來標記用戶的登錄狀態的。

然后建一個login文件夾,在login.wxml中寫如下代碼

<import src="../../components/toast.wxml" /><!-- is="toast" 匹配組件中的toast提示 如果用dialog的話這就是dialog --><template is="toast" data="{{ ...$wux.toast }}" /><view class="login_container"> <view class="login_view">  <text class="login_lable">賬號:</text>  <input class="login_text" placeholder="請輸入登錄賬號" bindinput="listenerUsernameInput"/> </view> <view class="login_view">  <text class="login_lable">密碼:</text>  <input class="login_text" placeholder="請輸入密碼" password="true" bindinput="listenerPasswordInput"/> </view> <view>  <button class="login_button" bindtap="loginAction">登錄</button> </view></view>

然后建一個login文件夾,在login.wxss中寫如下代碼

.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中寫如下代碼

//login.js//獲取應用實例var app = getApp()var util = require('../../utils/util.js');Page({ data: {  motto: 'Hello World',  username: "",  password: "" }, onLoad(options) {  // 初始化提示框  this.$wuxToast = app.wux(this).$wuxToast }, /** 監聽帳號輸入 */ listenerUsernameInput: function (e) {  this.data.username = e.detail.value; }, /** 監聽密碼輸入 */ listenerPasswordInput: function (e) {  this.data.password = e.detail.value; }, // 登錄按鈕點擊事件 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: "用戶名不能為空!",    success: () => console.log('用戶名不能為空!')   })   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, //僅為示例,并非真實的接口地址   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) {     // 后臺傳遞過來的值     var adminUserViewId = res.data.data.adminUserViewId;     var token = res.data.data.token;     // 設置全局變量的值     app.globalData.adminUserViewId = res.data.data.adminUserViewId;     app.globalData.token = res.data.data.token;     // 將token存儲到本地     wx.setStorageSync('adminUserViewId', adminUserViewId);     wx.setStorageSync('token', token);     console.log("登錄成功的adminUserViewId:" + adminUserViewId);     console.log("登錄成功的token:" + token);     // 切換到首頁     wx.switchTab({      url: '/pages/index/index'     })    } else {     that.$wuxToast.show({      type: 'text',      timer: 1000,      color: '#fff',      text: res.data.msg,      success: () => console.log('登錄失敗,請稍后重試。' + res.data.msg)     })    }   },   fail: function () {    util.hideToast();    console.log("登錄失敗");    that.$wuxToast.show({     type: 'text',     timer: 1000,     color: '#fff',     text: '服務器君好累😫,請稍后重試',     success: () => console.log('登錄失敗,請稍后重試。')    })   }  }) }})

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 芜湖县| 嘉祥县| 巩留县| 万安县| 榕江县| 青州市| 澄迈县| 冕宁县| 老河口市| 白水县| 桓仁| 延津县| 肃南| 攀枝花市| 黔西| 加查县| 莆田市| 漯河市| 潼关县| 碌曲县| 大同县| 古蔺县| 巴彦淖尔市| 临潭县| 外汇| 华蓥市| 石狮市| 土默特右旗| 双牌县| 崇左市| 南皮县| 阳新县| 阳高县| 高州市| 石林| 白山市| 蒙阴县| 临武县| 龙川县| 新干县| 大名县|