微信小程序：request前后端交互路由跳轉存儲數據到本地和獲取小程序登入授權

本文轉載自查看原文 2020-03-24 20:43 844

一 request前后端交互

參考鏈接：https://www.cnblogs.com/xiaoyuanqujing/protected/articles/11644453.html

基本樣式

wx.request({
  url: 'test.php', // 僅為示例，並非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success(res) {
    console.log(res.data)
  }
})

實際示例

1.wxml文件中

2.js文件

3.django后端如何獲取

二路由跳轉

1.通過js事件頁面之間跳轉

https://www.cnblogs.com/xiaoyuanqujing/protected/articles/11644461.html

此方式需要在wxml和wxjs2個文件中同時操作

示例

全局配置文件app.json

{
  "tabBar": {
    "list": [
      {
        "pagePath": "index",
        "text": "首頁"
      },
      {
        "pagePath": "other",
        "text": "其他"
      }
    ]
  }
}

pages局部js文件>Page>事件函數中

wx.switchTab({
  url: '/index' #tabar頁面路徑
})

實際示例

示例

pages局部js文件>Page>事件函數中

1.
Page({
　　wx.reLaunch({
   url: 'test?id=1'
   })
})

2.

Page({

　　var name = "sb";

　　wx.reLaunch({

　　url: "/pages/test3/test3?name="+name

　　})

2.a標簽方式跳轉

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

此方式只需要在wxml中編寫即可，作用和通過js一樣

三存儲數據到本地

https://www.cnblogs.com/xiaoyuanqujing/protected/articles/11644465.html

四小程序登入

2.實際案例

2.1前端

代碼：

//app.js
App({
  onLaunch: function () {
    var _this=this
    // 登錄
    wx.login({
      success: res => {
       
        // 發送 res.code 到后台換取 openId, sessionKey, unionId
        wx.request({
          url: _this.globalData.Url+'/login/',
          data:{"code":res.code},
          header:{"content-type":"application/json"},
          method:"POST",
          success:function(res){
            console.log(res)
            wx.setStorageSync("login_key",res.data.data.login_key)
          }

        })
      }
    })
   
  },
  globalData: {
    Url:"http://127.0.0.1:8000",
    userInfo: null
  }
})

2.2后端

1.目錄結構

2.封裝配置文件

1.settings.py

AppId="..."
AppSecret="..."

# 開發者服務器向官方服務器請求的網址
code2Session="https://api.weixin.qq.com/sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code"

2.wx_login.py
# 導入settings.py
from app01.wx import settings
#導入requests
import requests

def login(code):
    #1.向微信官方服務器請求數據，網址和拼接數據示例：
    #GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
    response=requests.get(settings.code2Session.format(settings.AppId,settings.AppSecret,code))

    #2.將json字符串反序列化為字典
    data=response.json()

    if data.get("openid"):
        return data
    else:
        return False

3.cbv

models.py

from django.db import models

# Create your models here.
class Wxuser(models.Model):
    id = models.AutoField(primary_key=True)
    openid=models.CharField(max_length=255)
    name = models.CharField(max_length=50)
    avatar = models.CharField(max_length=200)
    language = models.CharField(max_length=50)
    province = models.CharField(max_length=50)
    city = models.CharField(max_length=50)
    country = models.CharField(max_length=50)
    #gender = models.CharField(max_length=50)
    creat_time = models.DateTimeField(auto_now_add=True)
    update_time = models.DateTimeField(auto_now=True)
    def __str__(self):
        return self.openid

views.py

from rest_framework.views import  APIView
from  rest_framework.response import  Response
from app01.wx import wx_login
from django.core.cache import cache
import hashlib,time
from app01 import models

class Login(APIView):
    def post(self,request):
        #獲取前端數據
        param=request.data
        if param.get("code"):
            #調用wx/wx_login.py/login函數
            data=wx_login.login(param.get("code"))
            if data:
                #將openid和session_key自定義拼接
                val=data['openid']+"&"+data["session_key"]
                #自定義openid的key
                key=data["openid"]+str(int(time.time()))
                md5=hashlib.md5()
                md5.update(key.encode("utf-8"))
                key=md5.hexdigest()
                #存入redis
                cache.set(key,val)
                has_user=models.Wxuser.objects.filter(openid=data['openid']).first()
                if not  has_user:
                    #存入mysql
                    models.Wxuser.objects.create(openid=data['openid'])
                return  Response({
                    "code":200,
                    "msg":"ok",
                    "data":{"login_key":key}
                })
            else:
                return Response({"code": 200, "msg": "code無效"})
        else:
            return  Response({"code":200,"msg":"缺少參數"})