小结：

1 如何自定义组件 - 组件和页面一样，也是由四个文件组成，所以我们自定义组件的时候，模拟pages文件夹，把所有的所有的组件都放在一个文件夹中，每个组件又由一个文件夹包裹，方便管理，在对应目录右击，选择新建组件 - 如果页面中要使用我们定义好的组件，必须现在对应页面的json文件中进行引用：代码如下 { "usingComponents": { "com" : "/componentes/com/com" //形式 ：组件名：组件路径 } } 在该页面的wxml文件中，就可以直接使用： <com name = "{{name1}}" bind:jia1 ="jia"></com> -页面向组件传值：要先在组件的js文件中的properties定义属性，在页面中就可以对这个组件的属性进行赋值了。 -组件向页面传递事件：组件要先捕获事件，然后事件的响应函数里面用triggerEvent来把事件抛出来，然后页面捕获，组件抛出的事件。 2 小程序路由跳转js版 - wx.switchTab 只能跳转到tabbar页面 ，并关闭所有非tabbar页面，而且路由不能传值 - wx.reLaunch 关闭所有的页面，并打开你要跳转的页面.路由是可以携带参数 - wx.redirectTO 关闭当前的页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面，路由可以携带参数 - wx.navigateTo 保留当前的页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面，路由也可以携带参数。如果使用他，就会出现回退按钮，并且也可以用wx.navigateBack来进行返回 - wx.navigateBack 里面有delta参数，他是用来表示回退多少个页面。3 wx.request 相当于发送ajax请求wx.request({ url： //请求路径 data:{} //请求发送的数据 header:{} //请求头 methond: "" //请求方法 success(res){ console.log(res.data) } })

openid与unionid

openid：是用单个微信应用表示用户的唯一标识。亚洲：饼哥小程序上openid :123,那该用户再张成的小程序上他的opendid不是123，是其他任意一个值，上面的意思：同一用户再不用不同应用上的openid不同，但是再同一应用上唯一。场景： 假设你们公司有2个小程序。但是你们老板想把用户做统一处理。比如新用户登入任意一个小程序，就发送发送礼包。但是只要再一个小程序上另过了，就不能再另一个上面领取。unionnid：一个用户在多个小程序有唯一的标识

小程序的登入

1 小程序端执行wx.login()获取code2 将1中的code发送到后端，后端调用auth.code2Session这个接口，得到openid和session_key3 自定义登入状态，我们生成一个key与openid和session_key相绑定。把key返回到小程序中4 小程序端保存，然后下次请求需要登入的接口的时候，把key带上。

小程序连入django，小程序的app.js

//app.jsApp({ /* 当小程序初始话完成，会触发onlaunch(全局只触发一次) */ onLaunch: function () { let that = this // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId console.log(res.code) wx.request({ url: that.globalData.baseurl + "login/", data: { "code": res.code }, method: "POST", success(e) { wx.setStorageSync('token', e.data.data.token) } }) } }) /**可以在全局使用 */ globalData: { userInfo: null, baseurl: "http://127.0.0.1:8000/" }})

django的settings

#设置django—redis缓存 需要你下载插件pip install django-redisCACHES = { 'default': { 'BACKEND': 'django_redis.cache.RedisCache', 'LOCATION': 'redis://127.0.0.1:6379', "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", "PASSWORD": "Admin123", }, },}# 配置数据库import pymysqlpymysql.install_as_MySQLdb()DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'wxxcx', 'USER':'root', 'PASSWORD':'123456', 'HOST':'127.0.0.1', 'PORT': 3306, #'OPTIONS': {'charset': 'utf8mb4'}, }}

urls主路由

from django.conf.urls import urlfrom django.contrib import adminfrom app01.views import test, userurlpatterns = [ url(r'^admin/', admin.site.urls), url(r'test/', test.Test.as_view()), url(r'login/', user.Login.as_view())]

自定义有关小程序的settings

AppId="xxxx" # 写你自己的小程序的idAppSecret="xxxx" # 写你自己的小程序的秘钥code2Session="https://api.weixin.qq.com/sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code"

自定义获取小程序的登录wx_login

from app01.wx import settingsimport requestsdef get_login_info(code): code_url = settings.code2Session.format(settings.AppId, settings.AppSecret, code) response = requests.get(code_url) json_response = response.json() # 把它变成json的字典 if json_response.get("session_key"): return json_response else: return False

得到openid以及加密并返回小程序token

from rest_framework.views import APIViewfrom rest_framework.response import Responsefrom app01.wx import wx_loginfrom django.core.cache import cacheimport hashlib, timefrom app01.models import Wxuserclass Login(APIView): def post(self, request): param = request.data if not param.get('code'): return Response({'status':1, "msg":"缺少参数"}) else: code = param.get('code') user_data = wx_login.get_login_info(code) if user_data: val = user_data['session_key'] + "&" + user_data['openid'] md5 = hashlib.md5() md5.update(str(time.clock()).encode('utf-8')) md5.update(user_data['session_key'].encode('utf-8')) key = md5.hexdigest() cache.set(key, val) has_user = Wxuser.objects.filter(openid=user_data['openid']).first() if not has_user: Wxuser.objects.create(openid=user_data['openid']) Wxuser.objects.update() return Response({ 'status': 0, 'msg': 'ok', 'data': {'token':key} }) else: return Response({'status':2, 'msg': "无效的code"})

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

小程序授权

1 因为部分功能需要用同意后才能使用。2 wx.getSetting来判断该用户有没有对接口授权，我判断哪个接口，就必须给wx.getSetting传对应的scope值- 一个scope值对应这个一个或多个接口3 如果我们重wx.getSetting中发现scope值是false,标识没有授权，我们可以通过wx.authorize发起授权，对那个接口授权，就给wx.authorize传对应scope值就可以了。如果用用户同意授权，就可以直接使用对应的接口了。4 但是scope.userInfo没有办法使用wx.authorize自动弹起弹框。必须要用户手动点击按钮唤起授权弹框。代码格式： <button open-type="getUserInfo" bindgetuserinfo="user1">用户信息</button> 我们可以再响应函数的参数中获取用户信息。e.detail,这个和直接调用wx.getUserInfo获取的内容一样。

scope 列表

小程序的页面的js文件

// pages/test3/test3.jsPage({ /** * 页面的初始数据 */ data: { }, click:function() { wx.navigateBack({ delta:2 }) }, luyin:function(){ wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { //录音的scope wx.authorize({ scope: 'scope.record', success() { // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问 wx.startRecord() },fail(){ console.log('你没有授权') } }) }else{ wx.startRecord() } } }) }, user:function(){ wx.getSetting({ success(res) { if (!res.authSetting['scope.userInfo']) { wx.authorize({ scope: 'scope.userInfo', success() { console.log('进来了') } }) } else { console.log('已经授权') } } }) }, user1:function(e){ console.log("e",e.detail) wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { //用户信息的scope wx.getUserInfo({ success: (res) =>{ console.log("res", res) } }) } } }) },})

小程序页面的wxml文件

<!--pages/test3/test3.wxml--><text>pages/test3/test3.wxml</text><button bindtap="click">tiao</button><button bindtap="luyin">录音</button><button open-type="getUserInfo" bindgetuserinfo="user1">用户信息</button><!--要想要将用户的信息授权时弹框，必须用一个button按钮，且open-type必须为getUserInfo以及给事件为bindgetuserinfo-->