首頁 >微信小程式 >微信開發 >微信開發之後台登入(非微信帳號登入)

微信開發之後台登入(非微信帳號登入)

零下一度
零下一度原創
2017-05-19 15:54:192889瀏覽

最近寫了一個工具類的小程序,按需求要求不要微信提供的微信帳號登錄,需要調取後台登錄接口來登錄。由於小程式大部分都是調取微信資訊登錄,很少有呼叫自己後台來登入的,所以寫的時候各種坑,現在把趟好坑的程式碼共享給大家吧! (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(&#39;../../utils/util.js&#39;);

Page({
  data: {
    motto: &#39;Hello World&#39;,
    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: &#39;text&#39;,
        timer: 1000,
        color: &#39;#fff&#39;,
        text: "用户名不能为空!",
        success: () => console.log(&#39;用户名不能为空!&#39;)
      })
      return;
    } if (passwords === "") {
      that.$wuxToast.show({
        type: &#39;text&#39;,
        timer: 1000,
        color: &#39;#fff&#39;,
        text: "密码不能为空!",
        success: () => console.log(&#39;密码不能为空!&#39;)
      })
      return;
    }

    //加载提示框
    util.showLoading("登录中...");

    var urlStr = app.globalData.BaseURL + &#39;/api/adminUser/login&#39;;
    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(&#39;adminUserViewId&#39;, adminUserViewId);
          wx.setStorageSync(&#39;token&#39;, token);
          console.log("登录成功的adminUserViewId:" + adminUserViewId);
          console.log("登录成功的token:" + token);
          // 切换到首页
          wx.switchTab({
            url: &#39;/pages/index/index&#39;
          })
        } else {
          that.$wuxToast.show({
            type: &#39;text&#39;,
            timer: 1000,
            color: &#39;#fff&#39;,
            text: res.data.msg,
            success: () => console.log(&#39;登录失败,请稍后重试。&#39; + res.data.msg)
          })
        }
      },
      fail: function () {
        util.hideToast();
        console.log("登录失败");
        that.$wuxToast.show({
          type: &#39;text&#39;,
          timer: 1000,
          color: &#39;#fff&#39;,
          text: &#39;服务器君好累

【相關推薦】######1. ###微信公眾號平台原始碼下載#########2. ####小豬cms(PigCms)微電商系統營運版(獨立微型商店商城+三級分銷系統)#########3. ###微信人脈王v3.4.5高階商業版微信魔術方源碼# #####

以上是微信開發之後台登入(非微信帳號登入)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn