Maison > Applet WeChat > Développement WeChat > Connexion backend après le développement de WeChat (connexion sans compte WeChat)

Connexion backend après le développement de WeChat (connexion sans compte WeChat)

零下一度
Libérer: 2017-05-19 15:54:19
original
2888 Les gens l'ont consulté

J'ai récemment écrit un petit programme outil. Selon les exigences, je n'ai pas besoin du compte WeChat fourni par WeChat pour me connecter. Je dois appeler l'interface de connexion en arrière-plan pour me connecter. Étant donné que la plupart des mini-programmes utilisent les informations WeChat pour se connecter et utilisent rarement leur propre backend pour se connecter, il existe divers pièges lors de leur écriture. Je vais maintenant partager le code qui a surmonté les pièges avec tout le monde ! (PS : s'il y a quelque chose qui ne va pas, partagez-le.)

Connexion backend après le développement de WeChat (connexion sans compte WeChat)


Connexion backend après le développement de WeChat (connexion sans compte WeChat)

Ne dites pas de bêtises, allez simplement dans le code

Trouvez app.js et écrivez-y le code suivant

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"
  },
Copier après la connexion

Touchez les points clés au tableau : L'important certaines parties de l'extrait de code dans l'image ci-dessus sont : "adminUserViewId in globalData: "", token : "" "
Ces deux paramètres sont des paramètres d'arrière-plan qui doivent être stockés par le front-end pour marquer l'état de connexion de l'utilisateur.

Créez ensuite un dossier de connexion et écrivez le code suivant dans 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>
Copier après la connexion

Créez ensuite un dossier de connexion et écrivez le code suivant dans 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;
}
Copier après la connexion

Écrivez le code suivant dans 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;服务器君好累
Copier après la connexion

[Recommandations associées]

1 Téléchargement du code source de la plateforme de compte public WeChat

. 2. Version d'exploitation du système de micro-commerce PigCms (centre commercial de micro-magasins indépendant + système de distribution à trois niveaux)

3 WeChat People Network v3.4.5 Version commerciale avancée. du code source de WeChat Rubik's Cube

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal