微信小程序 登录的简单实现

网友投稿 414 2023-11-10

微信小程序 实现登录

微信小程序 登录的简单实现

最近一段时间，微信小程序在张小龙的8小时演讲下瞬间火了起来，但是呢没火多久，就迅速沉静下去了，我也是不知道张小龙什么想法，但是我想法挺多的，好了，废话说多了，聊一下正题吧，我呢是刚入行的小程序员，一路上采坑不断，别人遇不到的坑基本上踩了一遍，话说我的运气有时候也确实挺爆炸的，小程序一个小登录送给大家，

一、小程序开发前准备

目前在网上的教程已经不计其数了，给大家推荐一个网址： https://www.jb51-/article/111566.htm 这里面介绍比较详细，

二、小程序登录

我先开始的时候在登录就出问题了，因为当时官方给的文档就让人很纠结，因为官方给的文档让人感觉就凌乱了，在这里我解释一下，

官方给的流程：

第一步：获取用户授权信息（每次的授权信息都不一样）

第二部： 上代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
wx.request({
url : API_URL,//自己的服务接口地址
method : POST,
// 在这里需要格外注意了，所有的post请求header必须是下面的格式不然你又入坑了
header : {content-type:application/x-www-form-urlencoded},
data :
{
iv: res2.iv,
code: code,
encryptedData: res2.encryptedData
},
success: function (data)
{
// 4.解密成功后 获取自己服务器返回的结果
// 解密的sdk在开发文档上搜索-签名加密-然后你阅读后就知道了--属于自己语言的解码包
if(data.data.status == 1)
{
var userInfo_ = data.data.userInfo;
}else
{
console.log(解密失败)
}
},
fail:function()
{
console.log(系统错误)
}
})

他的意思是所有的操作在后台进行，这样相对安全一点，还有一点就是公众号需要的unionId可以通过解密获取到，那样的话就可以在公众号的页面看到你的小程序了，unionId是公众号和小程序的共用ID，如果你们的项目是需要关联的话那我还是建议你按照官方的走，如果不是的话，下面的方式可以迅速解决你的登录问题

自定义流程：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
//app.js
function Login(code,username,img)
{
var that = this
wx.request({
url:HTTP_URL,
data:
{
appid : 你后台获取的appdi,
secret : 你后台获取的secret,
js_code : code,
grant_type : authorization_code
},
method:GET,
header:{content-type: application/json},
success: function (a)
{
var openid = a.data.openid
// 请求自己的服务器
wx.request({
url:API_URL,
data:
{
img : img
openid : openid,
username : username,
},
success: function(b)
{
// 成功返回用户的唯一ID(这是数据库ID)
console.log(b.data.uid)
// 我这里是把用户返回的ID存到了缓存里因为，我在使用全局变
// 量时候发现有时候引入了js但是还会有丢失找不到的现象
wx.setStorageSync(uid, b.data.uid)
}
})
},
fail: function ()
{
// 在这里你要考虑到用户登录失败的情况
wx.showToast({
title: 网站正在维护中...,
icon: loading,
duration: 10000
});
}
})
}
// 自己服务器的地址
// 注意：开发时可以是http协议，但是如果上线必须申请https协议（也就是SSL协议）协议可以在阿里和腾讯的控制
// 台都可以购买，例子：阿里-管理控制台-安全（云盾）-证书服务，一般用dv免费的就可以了协议申请完后需要补全，
// 补全完毕后-文件是个压缩包，里面有两个文件，把他们放到你服务器上，然后再配置文件中指明这是ssl协议并
// 且指明路径，这样 你就算配置成功了，至于如何配置，网上开源的教程挺多的，nginx有Apache也有如果你
var API_URL = "自己服务器的地址";
// 微信提供的接口地址：这里必须要把https://api.weixin.qq.com这个网址在微信后台安全域名中添加进去否则你会
// 感觉生活是如此的黑暗完全看不到希望
var HTTP_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=app_sectet&grant_type=authorization_code&js_code=code";
App({
onLaunch: function ()
{
// 调用API从本地缓存中获取数据
var logs = wx.getStorageSync(logs) || []
logs.unshift(Date.now())
wx.setStorageSync(logs, logs)
},
getUserInfo: function (cb)
{
var that = this
if(this.globalData.userInfo)
{
typeof cb == "function" && cb(this.globalData.userInfo)
}else
{
// 调用登录接口
wx.login({
// login流程
success: function (res)
{
//登录成功
if (res.code)
{
// 这里是用户的授权信息每次都不一样
var code = res.code;
wx.getUserInfo({
// getUserInfo流程
success: function (res2)
{
// console.log(res2)
that.globalData.userInfo = res2.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
var username = res2.userInfo.nickName
var img = res2.userInfo.avatarUrl
// 请求自己的服务器
Login(code,username,img);
}
})
}else
{
wx.showModal({
title: 提示,
content: 获取用户登录态失败！+res.errMsg
})
}
}
})
}
},
globalData:
{
userInfo:null
}
})

下面附两张图片是申请SSL协议的大概流程图

有些乱，大家将就一下。

还有就是注意一点，那就是代码的重用，毕竟小程序代码上传是有限制的不得大于1MB，有些代码其实可以节省的有些css代码或是js代码有些都是可以封装一下的开发工具提供了app.js和app.css有些你感觉每个页面都会用到的都可以放到里面，这样也就减少了一些麻烦，还有就是有些人查看手机时，发现只能查看静态的，这里提醒一定要打开调试模式，不然你就干着急吧。以上就是个人的一些经验分享，感谢观看。如果说对各位有帮助的话，希望点个赞。第一次写博客，感谢支持。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 代码 加密
上一篇:微信小程序接入微信支付实现过程详解
下一篇:uniapp微信小程序多环境配置以及使用教程
相关文章

 发表评论

暂时没有评论，来抢沙发吧~