记录微信小程序登录流程开发

jy白了个白
205 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

前言

微信小程序是依赖于微信生态的，如今微信日活量非常大，因此对应公司来说，前期开发一个微信小程序来做引流，能比较快速吸引用户，时间成本也相对较低，对于前端开发者来说，掌握小程序开发也必不可少。

开发流程

查阅文档

毕竟是叫微信小程序，所以肯定得依赖微信官网相对应的文档。

官方开发文档 developers.weixin.qq.com/miniprogram…

登录流程

引用官方文档的一张流程图，实际开发跟这个差不多流程。 image.png

首先我们需要通过wx.login()获取对应的code，记住这个code是可以获取到openid，是当前小程序对于该用户的一个唯一标识。

				uni.login({
					success: (res) => {
						console.log(res)
						if(res.errMsg=="login:ok"){
							this.user.js_code=res.code
							wxlogin(this.user).then(res=>{
								this.$refs.uToast.show({
									message:"登录成功",
										complete:()=> {
											uni.setStorageSync("token",res.token_type+res.access_token)
											this.goIndex()
										}
									})
							
							})
						}
					},
					fail: (error) => {
						
					}
				})

我这里是用uni-app来开发，uni.login（）得到的结果如下

image.png

表示获取成功，我们把这个code传递给后台服务器，就能拿到对应的openid 和 相对应的 session_key。

获取手机号

					<u-button @getphonenumber="getphonenumber()" openType="getPhoneNumber"    v-if="!pwdLogin" shape="circle"   color="#538BFC" text="微信一键登录" ></u-button>

image.png 打印如下

image.png

打印授权后的结果，看到有个code，这个code就是我们获取当前手机号需要用到的。当然这是最新版本的获取方式，如果是旧版本 是不一样的，需要注意。

注意事项

  1. 现在的版本， 开发者可以直接通过 wx.login + code2Session 获取到该用户 UnionID，无须用户授权。
  2. openId和 unionId 要区分开来，注意选择哪个来做自己的用户体系。
  3. 授权手机号现在审核比较严格，要明确说明获取手机号的用途，不能强制用户授权。
  4. 开发小程序要注意把自己设置为开发者才能使用获取手机号这些api，并且前提小程序已做认证。
  5. 如果不想适配小程序以前的版本，可以设置小程序最低支持的版本，并且提示用户升级微信版本。

总结

小程序开发主要就是围绕官方文档，要注意各个APi使用的一些限制，熟读文档，开发是没问题的，并且要和后台密切配合。

avatar
文章
阅读
粉丝