day87 自定义组件及本地存储及登入功能
自定义组件
在根目录上创建文件夹：components-->mycom-->新建compontent
mycom.json
{
"component": true,// component一定要声明为true
"usingComponents": {}
}
mycom.wxml
<text>{{somebody}} is sb</text>
<view>{{name}}</view>
mycom.js
/**
* 组件的属性列表
*/
properties: {
somebody:{
type:String,
value:"jason"//这个是默认值 页面要是赋值了就用 没有就用这个默认值
}
},
/**
* 组件的初始数据
*/
data: {
name:"tank"
},
应用组件 pages\test\test.json
{
"usingComponents": {
"mycom":"/components/mycom/mycom"
}
}
pages\test\test.wxml
<mycom somebody="egon"></mycom>
组件将事件传给页面
mycom.wxml
<button bindtap="click" data-age="1">组件里的按钮</button>
mycom.js
methods: {
click:function(e){
console.log(e.currentTarget.dataset.age)
this.triggerEvent("tt", { "age": e.currentTarget.dataset.age})
}
}
页面test.wxml
<mycom somebody="egon" bind:tt="jia"></mycom>
页面 test.js
jia:function(e){
console.log(e.detail)//取参数
this.setData({
num1:this.data.num1+e.detail.age
})
},
小程序路由跳转
wx.switchTab
只能跳转tabBar页面，不能跳转非tabBar页面
test.wxml
<button bindtap="tiao">跳转连接</button>
test.js
tiao:function(){
wx.switchTab({
url: '/pages/index/index',
})
},
wx.reLaunch
关闭所有页面，打开到应用内的某个页面
test.js
tiao:function(){
wx.reLaunch({
url: '/pages/test2/test2?name=sb',
})
test2.js
onLoad: function (options) {
console.log("test2",options)
},
wx.redirectTo
关闭当前页面，跳转到tabBar页面
test.js
tiao:function(){
wx.redirectTo({
url: '/pages/test2/test2',
})
wx.navigateTo
保留当前页面，跳转tabBar页面 使用wx.navigateBack可以返回原页面 最多十层
test,js
tiao:function(){
wx.navigateTo({
url: '/pages/test2/test2',
})
wx.navigateBack
关闭当前页面 返回上一层页面 通过getCurrentPages()获取页面栈数
tiao: function () {
wx.navigateTo({
url: "/pages/test2/test2"
})
}
tiao: function () {
wx.navigateTo({
url: "/pages/test3/test3"
})
}
tiao: function () {
console.log(getCurrentPages())
wx.navigateBack({
delta: 2,
})
}
navigator
test.wxml
<navigator url="/pages/test3/test3">跳转到新页面</navigator>
小程序本地数据存储
test.wxml
<button bind:tap="cun" >存</button>
test.js
cun:function(){
wx.setStorageSync("heihei", "is sb")//存 同步 setStorage是异步的
console.log(wx.getStorageSync("heihei"))//取
wx.removeStorageSync("heihei")//指定删
wx.clearStorageSync()//全删
},
wx.request请求
test.wxml
<button bind:tap="qing">请求</button>
test.js
qing:function(){
wx.request({
url: 'http://127.0.0.1:8000/test/',
data:{
name: "tank",
like: "piao"
},
method:"POST",
header:{"content-type":"application/json"},
success(res){
console.log(res)//返回后台传来的信息
}
})
},
test.py
from rest_framework.views import APIView
from rest_framework.response import Response
class Test(APIView):
def post(self,request):
param=request.data #前台传来的数据
print(param)
return Response({"code":200,"msg":"ojbk"})
手动完成小程序的登入
前台 app.js
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log(res)
if (res.code){
//发送网络请求
wx.request({
url: 'http://127.0.0.1:8000/login/',
data:{
code:res.code
},
method:"POST",
success(e){
wx.setStorageSync('token', e.data.data.token)
}
})
}
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
后台
路由
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r"^test/",test.Test.as_view()),
url(r"^login/",user.Login.as_view()),
]
user.py
from rest_framework.views import APIView
from rest_framework.response import Response
from django.core.cache import cache
from app01.wx import WxLogin
import hashlib,time
from app01 import models
class Login(APIView):
def post(self,request):
param=request.data
if param.get('code'):
data=WxLogin.get_openid(param.get("code"))
if data:
val = data['openid'] + "&" + data['session_key']
md5 = hashlib.md5()
md5.update(str(time.clock()).encode("utf-8"))
md5.update(data['session_key'].encode("utf-8"))
key = md5.hexdigest()
cache.set(key, val)
has_user = models.Wxuser.objects.filter(openid=data['openid']).first()
if not has_user:
models.Wxuser.objects.create(openid=data['openid'])
return Response({"code": 200, "msg": "ok", "data": {"token": key}})
else:
return Response({"code": 201, "msg": "无效的code"})
else:
return Response({"code": 202, "msg": "缺少参数"})
WxLogin.py
from app01.wx import settings
import requests
def get_openid(code):
code2Session = "https://api.weixin.qq.com/sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code"
response = requests.get(code2Session.format(settings.AppId,settings.AppSecret,code))
data = response.json()
if data.get("session_key"):
print("data",data)
return data
else:
return False
wx-->setting
AppId="wx39a699d0f61b13ae"
AppSecret="d00c23ad3faf96ca218c20f6aaece7a7"
pay_mchid ='1415981402'
pay_apikey = 'xi34nu5jn7x2uujd8u4jiijd2u5d6j8e'
setting
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'python12',
'USER':'root',
'PASSWORD':'',
'HOST':'127.0.0.1',
'PORT': 3306,
# 'OPTIONS': {'charset': 'utf8mb4'},
}
}
CACHES = {
'default': {
'BACKEND': 'django_redis.cache.RedisCache',
'LOCATION': 'redis://127.0.0.1:6379',
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
"PASSWORD": "",
},
},
}
