uniapp 开发微信小程序笔记

已于 2024-12-16 14:36:14 修改
阅读量1k 收藏 1
点赞数 4
文章标签： uni-app 微信小程序 笔记
于 2024-11-26 09:24:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38388578/article/details/144050292
版权

1、授权获取openId和手机号
 

<button class="sub_btn " v-if="!phone&&!openId" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权并获取手机号</button>
getPhoneNumber (e) {
			  
			  console.log(e.detail,'获取手机号')  // 动态令牌
			  // console.log(e.detail.code)  // 动态令牌
			  // console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			  // console.log(e.detail.errno)  // 错误码（失败时返回）
			  this.phoneCode=e.detail.code
			  this.phoneEncryptedData=e.detail.encryptedData
			  this.phoneIv=e.detail.iv
			   //
			  this.login()
			},
login(){
				uni.login({
				        provider: 'weixin',
				        success:  async (loginRes)=> {
				        	//	打印临时凭证
				        	console.log(loginRes.code,'code');
							this.getSessionKey(loginRes.code)
							// let res = await getOpenId({code:loginRes.code})
							// console.log(JSON.parse(res).openId,'获取opneid')
							// uni.setStorageSync('openId',JSON.parse(res).openId);
							 // // 获取用户信息
							 //    uni.getUserInfo({
							 //      provider: 'weixin',
							 //      success: function (infoRes) {
							 //        console.log('用户昵称为：' + infoRes.userInfo.nickName);
							 //        console.log(infoRes);
							 //      }
							 //    });
				    	}
				});
			},
async getSessionKey(code){
				console.log('开始获取openId')
				let res = await getOpenId({code})
				console.log(JSON.parse(res),'获取opneid')
				this.openId = JSON.parse(res).openId;
				this.sessionKey = JSON.parse(res).session_key;
				uni.setStorageSync('openId',JSON.parse(res).openId);
				this.decrypt()
				// uni.request({
				// 	url: 'https://api.weixin.qq.com/sns/jscode2session',// 请求微信服务器
				// 	method:'GET',
				// 	data: {
				// 		appid: this.appid,        //你的小程序的APPID
				// 		secret: this.secret,    //你的小程序秘钥secret,  
				// 		js_code: code,    //wx.login 登录成功后的code
				// 		grant_type:'authorization_code' //此处为固定值
				// 	},
				// 	success: (res) => {
				// 		console.log('获取信息',res); 
				// 		this.openId = res.data.openid;
				// 		uni.setStorageSync('openId',res.data.openid)
				// 		this.sessionKey = res.data.session_key;
				// 		this.decrypt()
				// 	}
				// });
			},
decrypt(){
				console.log(this.sessionKey,this.phoneEncryptedData,this.phoneIv,'解密参数')
				let pc = new WXBizDataCrypt(appId,this.sessionKey);
				let data = pc.decryptData(this.phoneEncryptedData , this.phoneIv);  
				console.log(data,'解密结果')       //data就是最终解密的用户信息  
				this.phone = data.phoneNumber // 手机号
				uni.setStorageSync('phone',data.phoneNumber)
				this.savePhone()
				
			},
async savePhone(){
				let res = await saveGndhSign({openId:this.openId,phone:this.phone})
				console.log(res,'保存手机号')
				uni.showModal({
					title: '提示',
					content: '是否允许订阅消息',
					success:  (res) =>{
						if (res.confirm) {
							uni.requestSubscribeMessage({
									tmplIds,
									success: res => {
										console.log(res,'订阅消息成功')
										//if(res.tmplId=='acc')
									},
									fail: res=>{
										console.log(res,'取消订阅消息')
									}
									
						});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

WXBizDataCrypt.js

var crypto = require('crypto')

function WXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode
  var sessionKey = new Buffer(this.sessionKey, 'base64')
  encryptedData = new Buffer(encryptedData, 'base64')
  iv = new Buffer(iv, 'base64')

  try {
     // 解密
    var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
    // 设置自动 padding 为 true，删除填充补位
    decipher.setAutoPadding(true)
    var decoded = decipher.update(encryptedData, 'binary', 'utf8')
    decoded += decipher.final('utf8')
    
    decoded = JSON.parse(decoded)

  } catch (err) {
    throw new Error('Illegal Buffer')
  }

  if (decoded.watermark.appid !== this.appId) {
    throw new Error('Illegal Buffer')
  }

  return decoded
}

module.exports = WXBizDataCrypt

2、小程序订阅消息
 

uni.showModal({
					title: '提示',
					content: '是否允许订阅消息',
					success:  (res) =>{
						if (res.confirm) {
							uni.requestSubscribeMessage({
									tmplIds,//消息模版id
									success: res => {
										console.log(res,'订阅小程序消息成功')
										//if(res.tmplId=='acc')
										this.showOverlay=false
                                        //跳转嵌套公众号页面
										uni.navigateTo({
											url:'/pages/official/official'
										})
									},
									fail: res=>{
										console.log(res,'取消订阅消息')
									}
									
						});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

3、嵌套公众号H5页面

<template>
	<view class="offical">
		<!-- <web-view  src="https://****/jidian/#/pages/authorize/authorize" @message="getMessage"></web-view> -->
		<web-view  :src="src" @message="getMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//phone:
				 src:``
			};
		},
		onLoad() {
			let phone=uni.getStorageSync('phone')
			this.src=`https://****/jidian/?phone=${phone}#/pages/authorize/authorize`
			this.$forceUpdate()
		},
		methods: {
			getMessage(e) {
				
				console.log(e,'H5传给小程序的参数')
                //获取不到--网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。
				//if(e.detail.data){
					//uni.setStorageSync('wxopenId',e.detail.data[0].wxopenId);
					//uni.navigateBack()
				//}
			}
		},
	}
</script>

<style lang="scss" scoped>
.offical{
	width: 100%;
	height: 100%;
}
</style>

4、公众号H5页面

<template>
	<view class="authorize">
		<view class="container">
			<el-banner></el-banner>
			<view class="main">
				<view class="des">
					‌微信授权‌是指用户在使用微信相关服务时，允许微信平台获取和使用其个人信息的行为。微信授权的主要目的是为了保障用户的合法权益，提高用户体验，同时确保平台的安全性和服务的个性化。
				</view>
				<view class="des">
					‌该页面为了获取用户信息，从而根据用户身份码（openid）给用户推送订阅消息。
				</view>
				<view class="add_btn"  @click="saveOpenId">订阅消息</view>
			</view>
			<el-footer></el-footer>
		</view>
	</view>
</template>

<script>
	var jWeixin = require('jweixin-module');
	export default {
		data() {
			return {
				phone:'',
				// openId:uni.getStorageSync('wxopenId')
			};
		},
		onReady() {
			console.log(jWeixin,'公众号wx对象')
			console.log(uni.getStorageSync('openId'),'公众号openId')
			console.log(uni.getStorageSync('mpopenId'),'小程序openId')
			this.phone = this.GetUrlParame('phone')
			console.log(this.phone,'小程序phone')
		},
		methods: {
			getQueryString(name) {
			  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			  var r = window.location.search.substr(1).match(reg);
			  if (r != null) {
			    return unescape(r[2]);
			  }
			  return null;
			},
			// 截取code
			GetUrlParame(parameName) {
			  /// 获取地址栏指定参数的值
			  /// <param name="parameName">参数名</param>
			  // 获取url中跟在问号后面的部分
			  var parames = window.location.search;
			  // 检测参数是否存在
			  if (parames.indexOf(parameName) > -1) {
			    var parameValue = "";
			    parameValue = parames.substring(
			      parames.indexOf(parameName),
			      parames.length
			    );
			    // 检测后面是否还有参数
			    if (parameValue.indexOf("&") > -1) {
			      // 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
			      parameValue = parameValue.substring(0, parameValue.indexOf("&"));
			      // 去掉参数名, 得到最终纯值字符串
			      parameValue = parameValue.replace(parameName + "=", "");
			      return parameValue;
			    }
			    return "";
			  }
			},
            //保存公众号opneId以便推送消息
			saveOpenId() {
				console.log(uni.getStorageSync('openId'),uni.getStorageSync('wxopenId'),'获取openId');
				uni.request({
					url:'https://*****/fmis-api/gndh/wx/about/savePublicGndhSign',
					method:'POST',
					 header: {
					         'content-type': 'application/json' // 根据后端要求设置合适的Content-Type
					       },
					data: {
					        openId:uni.getStorageSync('wxopenId'),
							phone:this.phone?this.phone:uni.getStorageSync('wxphone')
					},
					dataType: "json",
					success: (res) => {
						console.log(res,uni.getStorageSync('openId'),'保存公众号openId');
						console.log(res.data.code,'res.code')
						// uni.showToast({
						// 	title:JSON.stringify(res)
						// })
						//H5页面
						//code=1成功 
						uni.showToast({
							title:'授权成功',
							icon:'success',
							duration:3000,
							success: () => {
								if(jWeixin.miniProgram){
									// webview代码块js,需要特别注意，得先返回再去postMessage
									 //  jWeixin.miniProgram.navigateBack({
									 //     delta: 1
									 // })
									 // jWeixin.miniProgram.postMessage({
									 //     openId: uni.getStorageSync('openId')
									 // })
									 setTimeout(()=>{
										 jWeixin.miniProgram.redirectTo({
										 	url:`/pages/index/index?wxopenId=${uni.getStorageSync('openId')}`
										 })
										 jWeixin.miniProgram.postMessage({ data: {wxopenId: uni.getStorageSync('openId')}})
									 },2000)
									
								}
								
							}
						})
						// if(res.data.code){
							
						// }else{
						// 	uni.showToast({
						// 		title:'授权失败',
						// 		icon:'error',
						// 		duration:3000,
						// 		success: () => {
						// 			if(jWeixin.miniProgram){
						// 				// webview代码块js,需要特别注意，得先返回再去postMessage
						// 				  jWeixin.miniProgram.navigateBack({
						// 				     delta: 1
						// 				 })
										
						// 			}
									
						// 		}
						// 	})
						// }
						
					}
					
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.authorize{
	width:100%;
	height: 100%;
	.add_btn{
		width:620rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: $uni-default-color;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		margin:0 auto;
	}
	.container{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		
		.main{
			width: 95%;
			margin:20rpx auto;
			flex:1;
			background-color: rgba(255, 255, 255, 0.5);
			padding: 29px 19px;
			border-radius: 20rpx;
			.des{
				text-indent: 2em;
				line-height: 50rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>

5、跳转回程序获取公众号授权的opneId
 

onLoad(options) {
			console.log(options,'公众号传参')
			if(options.wxopenId){
				uni.setStorageSync('wxopenId',options.wxopenId)
				this.wxopenId=options.wxopenId
				this.showOverlay=false
				this.$forceUpdate()
			}
		},

6、后端根据opneId给公众号推送消息

uniapp 微信小程序 获取手机号码 兼容高低版本
weixin_42066070的博客
12-28 897
【代码】uniapp 微信小程序 获取手机号码 兼容高低版本。
koajs+uniapp实现微信小程序自动登录
guiplan
12-03 141
打开小程序自动获取微信id，并完成登录。用户首次登录自动完成注册。本章节会把整个前后端流程讲解清楚，由于流程过于复杂，步骤过于繁琐。所以还需要把整个流程与思路捋清楚，并且要做好笔记，因为时间长了很快就忘记了，而又重新再去研究那样会浪费更多的时间。所以后续再做小程序登录只需看看文档，复制代码即可。思路清晰，代码齐全才可省时省力。此文章可减去三天的研究时间。哪怕你不是用的node后端，你也能在此文章中找到思路与流程。
Uniapp 小程序获取用户手机号功能实现
小雪的博客
02-25 1193
获取用户手机号需要用户主动授权，并且要确保后端接口的安全性，防止数据泄露。
uniapp 微信公众号 获取手机号并存储
weixin_42487883的博客
07-23 1645
uni-app是一个跨平台框架，可以通过编写一套代码来构建不同平台的应用，包括微信公众号。
uniapp微信小程序获取用户手机号uniCloud云开发版
最新发布
嗨，大家好，我是爱搞知识的咸虾米
03-31 1057
微信小程序通过unicloud获取真实的用户手机号的实用方法
uniapp_微信小程序_WebApi_openid、phone接口获取
yqsy123123的博客
09-06 2520
今天发现小程序数据接口访问不到了，查询是因为小程序禁用合法域名https://api.weixin.qq.com，索性就干脆做一次详细的微信接口调用。不得不说，好久没用可，微信这API改动真的大。闲话不说了，开干。
微信小程序（总结三）：uniapp开发，如何获取微信用户手机号（最新）
qq_45796592的博客
02-02 1万+
微信小程序获取微信用户手机号
uniapp 微信小程序 获取用户手机号码
zhao949895887的专栏
01-04 1284
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取用户手机号</button> <script> export default { data() { return { }; }, methods: { getPhoneNumber(e) {
uniapp开发微信小程序笔记11-获取手机号授权登录流程
wzy_PROTEIN的博客
12-25 1478
微信小程序通常会有一个一键获取用户手机号的功能，这个功能是前后端配合完成的。先由前端弹起授权界面，用户同意后要将传给后端，后端会拿到这些身份信息去微信官方获取到用户的手机号，再传回给前端。
零基本开发uniapp微信小程序教程《树洞笔记本》教程源文件与接口
05-27
《零基础开发uniapp微信小程序教程《树洞笔记本》教程源文件与接口》是一套针对初学者设计的全面教程，旨在帮助没有编程经验的人快速掌握微信小程序的开发技能。本教程以“树洞笔记本”这一实际项目为例，通过源代码...
使用uniapp开发微信小程序的人脸采集功能人脸识别功能
m0_67393619的博客
05-18 665
作者简介：大家好我是，励志成为全栈工程师的一枚程序猿，也是喜欢在学习和开发中记录笔记的小白博主！ ??个人主页：的主页 ??系列专栏：uniapp前端 ??如果觉得博主的文章还不错的话，请点赞??+收藏+留言??支持一下博主哦?? 本篇文章是借助微信小程序平台，添加人脸采集的功能，你看上面的漂亮姐姐有什么理由不去采集一下她的人脸呢。??? 开发环境： 开发框架：uniapp 开发平台：微信小程序 标签和样式先上： 标签： <template> <view class="page..
UniApp微信小程序地图使用指南
qq_40649554的博客
02-27 2340
在UniApp中集成微信小程序的地图功能，可以为用户提供位置展示、导航、路线规划等丰富的交互体验。本技术文档将指导你如何在UniApp微信小程序中集成和使用地图功能。
UniApp微信小程序画布技术文档
qq_40649554的博客
02-27 975
UniApp的canvas组件为我们提供了在微信小程序中进行绘图操作的能力。通过掌握canvas的基本用法和常用API，我们可以在UniApp中实现丰富的图形绘制功能。同时，我们也需要注意canvas的坐标系统、绘图上下文的获取以及单位转换等细节问题。
uniapp使用按钮@getPhoneNumber获取手机号提示“getPhoneNumber:fail no permission“解决方法
avecvous的博客
10-08 3726
这是由于没有在小程序后台（
uni-app微信小程序getPhoneNumber
m0_53719511的博客
02-26 494
用了uni-app之后发现uniCloud.httpclient.request各种47001 ：data form error 头都大了。这两个缺一不可，不写就会报错，太坑了~一个是body，一个是数据都要限定。终于成功了，格式，还是格式，搜了很多文章没有直接写的，路过此处防止踩坑哈~pre:之前用小程序原生开发+云开发没什么问题非常顺畅,轻松＋愉快。消息体要用post 传json(重点：格式问题）；→uni-app reques格式文档如下。参数不要传access_token;
uniapp微信小程序获取手机号
wbb1126的博客
05-23 969
【代码】uniapp微信小程序获取手机号。
JAVA_uniapp微信小程序获取手机号
m0_56546327的博客
09-28 859
好的下一步uniapp代码（可以看见这个就是我们需要的）接下来代码展示怎么使用。废话不多说封装好的代码和演示，开箱即用。然后把code传给我们的后端，直接秒杀。也是非常简单（一个按钮）
uniapp开发微信小程序：用户手机号授权获取全流程详解与实战示例
热门推荐
JINGWHALE
05-29 1万+
本文介绍了微信小程序获取用户手机号码，前端通过调用API获取加密手机号，后端则负责解密处理具体代码示例。取用户手机号码整个流程需遵守微信小程序平台的隐私政策和规定，确保用户数据的安全与合规，为用户提供透明、可控的授权体验。
uniapp 微信小程序 获取手机号并存储
weixin_42487883的博客
07-23 1029
通过以上步骤和代码示例，你可以在uni-app开发的微信小程序中实现获取用户手机号并存储的功能。关键点在于用户授权、会话密钥的获取以及服务器端的解密处理。希望这些内容对你有所帮助！
微信小程序教程：从零开始开发uniapp《树洞笔记本》
资源摘要信息: "本教程主要讲解如何使用uniapp框架开发微信小程序。uniapp是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、以及各种小程序等多个平台。教程以《树洞笔记本》为项目案例，从零基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值