Backend login after WeChat development (login without WeChat account)

零下一度
Release: 2017-05-19 15:54:19
Original
2846 people have browsed it

Recently I wrote a small tool program. According to the requirements, you do not need to log in with the WeChat account provided by WeChat. You need to call the background login interface to log in. Since most of the mini programs use WeChat information to log in, and rarely use their own backend to log in, there are various pitfalls when writing them. Now I will share the code with everyone! (PS: If there is anything wrong, please share it.)

Backend login after WeChat development (login without WeChat account)


Backend login after WeChat development (login without WeChat account)

Don’t talk nonsense, go directly to the code

Find app.js and write the following code in it

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"
  },
Copy after login

Knock on the blackboard to highlight: The important part of the code snippet in the picture above is: "globalData adminUserViewId: "",token: "" ”
These two parameters are background parameters that need to be stored by the front end and are used to mark the user's login status.

Then create a login folder and write the following code in 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>
Copy after login

Then create a login folder and write the following code in 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;
}
Copy after login

Write the following code in 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;服务器君好累
Copy after login

[Related recommendations]

1. WeChat public account platform source code download

2. PigCms (PigCms) micro-e-commerce system operation version (independent micro-store mall + three-level distribution system)

3. WeChat Network King v3.4.5 Advanced Commercial Edition WeChat Rubik’s Cube Source Code

The above is the detailed content of Backend login after WeChat development (login without WeChat account). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!