微信授权逻辑笔记
OpenId / UnioId / UserId
微信有2种授权登录
- 1.静默登录
- 2.非静默登录
静默登录:
用户登录页面毫无感知.
非静默登录:
用户登录会先弹出需要授权信息的弹窗或者页面,确认授权后不仅可以拿到用户的openId(或者UnionID),还有昵称,头像等更多资料.
1. openID:
每个用户针对每个公众号(或者小程序.或移动应用)会产生一个唯一的OpenID.
2. UnionID:
如果需要在多公众号,移动应用之间做用户共通,则需要前往微信开发平台,将这些公众号和应用绑定到一个开放平台账号下,绑定后,一个用户虽然对多个公众号和应用有多个不同的OpenID,但他对所有这些同一开放平台账号下的公众号和应用,只有一个UnionID.
3.userID
userID是自己建的账户数据表的字段,用来作为用户唯一标识.一个用户只有一个userID
举个列子:
======
你分别在农行,工行,建行,各办理1张银行卡,这三张银行卡号彼此毫无关联的,但绑定的都是你的身份证号.
- 身份证就是 unionID
- 银行卡号就是 OpenID
app pc, 服务号,小程序,建立userID 打通用户体系
1.非微信体系通过绑定同一手机号;
2.在微信体系内,将这些应用绑定在一个微信开方平台账号下,通过unionID来识别用户唯一性.
当然有时候业务需求,需要手机号绑定.有时候会出现绑定冲突,当输入手机号已经被注册了,或者绑定了其他的微信,就会出现绑定失败的提示.
+ 1.这时可以进行把数据合并到当前账号(不推荐这种做法,因为数据比较重要)
+ 2.解除原账号绑定
插件推荐:vue 2.0 微信网页授权插件 https://github.com/raychenfj/v-wechat-auth
1.小程序的生命周期——App.js
App() 必须在 app.js 中注册，且不能注册多个。所以App（）方法在一个小程序中有且仅有一个。
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。先上代码：
App({
onLaunch: function () {
console.log('App onLaunch');
},
onShow:function (){
console.log('App onShow');
},
onHide:function(){
console.log('App onHide');
},
onError:function(){
console.log('App onError');
},
getPics: function() {
return this.globalData.picList;
},
globalData:{
picList: [] // 图片列表
},
globalName: 'tangdekun'
});
最外层的整个{ }就是一个object 参数。
通过表格的形式看App()中的object参数说明：
将原有的app.js中替换为上面的代码，首次打开小程序，可以在Log信息中看到以下Log信息,会看到onShow（）方法会执行两次
App onLaunch
App onShow()
App onShow()
注意：
1.不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
2.不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
3.通过 getApp() 获取实例之后，不要私自调用生命周期函数。
2.页面的生命周期
onLoad: 页面加载
一个页面只会调用一次。
接收页面参数 可以获取wx.navigateTo和wx.redirectTo及其中APP的生命周期和页面的生命周期是相互交叉的：举例：
我们有页面Test和Test1，我们在test.js,test1.js和App.js的生命周期方法中都打印log，代码如下：
test1.js
Page({
data:{
names:"tangdekun test1"
},
onLoad:function(options){
// 生命周期函数--监听页面加载
console.log("test1 onLoad");
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
console.log("test1 onReady");
},
onShow:function(){
// 生命周期函数--监听页面显示
console.log("test1 onShow");
},
onHide:function(){
// 生命周期函数--监听页面隐藏
console.log("test1 onHide");
},
onUnload:function(){
// 生命周期函数--监听页面卸载
console.log("test1 onUnload");
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
console.log("test1 onPullDownRefresh");
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
console.log("test1 onReachBottom");
}
})
Page({
data:{
name:"test"
},
onLoad:function(options){
// 生命周期函数--监听页面加载
console.log("test onLoad");
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
console.log("test onReady");
},
onShow:function(){
// 生命周期函数--监听页面显示
console.log("test onShow");
},
onHide:function(){
// 生命周期函数--监听页面隐藏
console.log("test onHide");
},
onUnload:function(){
// 生命周期函数--监听页面卸载
console.log("test onUnload");
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
console.log("test onPullDownRefresh");
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
console.log("test onReachBottom");
},
onShareAppMessage: function() {
// 用户点击右上角分享
return {
title: '分享页面', // 分享标题
desc: '这是一个分享的测试', // 分享描述
path: 'pages/waimai/waimai' // 分享路径
}
},
navigateToPageB: function() {
wx.navigateTo({
url: '../../pages/pageB/pageB?id=3',
success: function(res){
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
redirectToPageA : function(){
wx.redirectTo({
url: '../../pages/pageA/pageA?id=4',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
switchTabToTest1:function(){
wx.switchTab({
url: '../../pages/test1/test1',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
微信
//定义全局变量 app.js
const app = getApp();
console.log(app.foo)
foo:"bar",
say(){
cosnole.log("hello")
}
//想要跳转 tab 需要配置 open-type="switchTab"
data(){
mesage:1
}
{{foo.addPosfix(mesage)}}
//wxs 标签类似于 html中的script标签 可以定义一些行内脚本
//这里必须遵守common js 规范
module.exports = {
addPosfix:function(input){
return input + '1'
}
}
//对于频繁需要切换显示的元素,不应该用wx:if
loading
loading
loading
//推荐用hidden
loading
loading
//只是一个包装元素,不会对页面结构造成任何影响
wx:for={{list}}
{{item.name}}
{{index}}//定义索引 直接写 跟vue有区别的
wx:for-item="s"//指定item名字
wx:for-index="i"//指定index名字
//key 写的属性的名字
wx:key="index"
bindtap="addclick" //事件 handle触摸
const list = this list;
//驱动视图更新 更新到页面上
this.setData({list:list})
//Page.prototype.setData()
//setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
自定义属性
item 1
Page({
removeHandle (e) {
console.log(e)
}
})
小程序是单向数据流 可以通过e.detail.value
`{{foo}}
`
Page({
data: {
foo: 'hello wechat app'
},
inputChangeHandle (e) {
// e.target -> 当前文本框
console.log(e.detail.value)
// 将界面上的数据再次同步回 数据源上
// this.data.foo = e.detail.value
// setData
// 1. 改变数据源
// 2. 通知框架，数据源变了，需要重新渲染页面
this.setData({ foo: e.detail.value })
}
})
wxss 全屏750rpx
"window": {
"navigationBarBackgroundColor": "#037CFF",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "锁",
"backgroundColor": "#bcc0c9",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false //全局刷新
},
"tabBar": {
"color": "#999",
"selectedColor": "#037CFF",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/apply/apply",
"text": "申请",
"iconPath": "pages/static/lcon/contact.png",
"selectedIconPath": "pages/static/lcon/contact-active.png"
},
{
"pagePath": "pages/list/list",
"text": "门锁",
"iconPath": "pages/static/lcon/home.png",
"selectedIconPath": "pages/static/lcon/home-active.png"
}
]
},
小程序大小有限制 可以images优化为单标签 精简代码量等等!
小程序发送请求如下:
// wx.request({
// url:'https://api.douban.com/v2/movie/coming_soon',
// header:{
// 'Content-Type':'json'
// },
// success:function(result){
// console.log(result)
// }
// })
//小程序请求使用promise封装
module.exports=(url,data)=>{
return new Promise ((resolve,reject) => {
wx.request({
url:`https://locally.uieee.com/${url}`,
data:data,
success:resolve,
fail:reject
})
})
}
const fetch =require('../../utils/fetch')
fetch('slides').then(res=>{
this.setData({slides:res.data})
})
小程序跳转
1、wx.navigateTo
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
2、wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。
3、wx.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
4、wx.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 [getCurrentPages()] 获取当前的页面栈，决定需要返回几层。
5、wx.reLaunch
关闭所有页面，打开到应用内的某个页面。
-
利用小程序提供的 API 跳转：
// 关闭所有页面，打开到应用内的某个页面。 wx.reLaunch({ url: 'page/home/home?user_id=111' })
// 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo
wx.navigateTo({
url: 'page/home/home?user_id=111'
})
// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
wx.navigateTo({
url: 'page/home/home?user_id=111' // 页面 A
})
wx.navigateTo({
url: 'page/detail/detail?product_id=222' // 页面 B
})
// 跳转到页面 A
wx.navigateBack({
delta: 2
})
// 关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
url: 'page/home/home?user_id=111'
})
// 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
wx.switchTab({
url: 'page/index/index'
})
// 关闭所有页面，打开到应用内的某个页面。
wx.reLanch({
url: 'page/home/home?user_id=111'
})
-
wxml 页面组件跳转（可以通过设置open-type属性指明页面跳转方式）：
// navigator 组件默认的 open-type 为 navigate跳转到新页面 // redirect 对应 API 中的 wx.redirect 方法在当前页打开 // switchTab 对应 API 中的 wx.switchTab 方法切换 Tab // reLanch 对应 API 中的 wx.reLanch 方法关闭所有页面，打开到应用内的某个页面 // navigateBack 对应 API 中的 wx.navigateBack 方法关闭当前页面，返回上一级页面或多级页面