小程序 webview、在网页中使用小程序的接口sdk方式

1、设置webview
	<webview
		src				webview指向网页的链接,可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名,	
		bindmessage		网页向小程序postMessage时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息,e.detail={data},data是多次postMessage的参数组成的数组	
		bindload		网页加载成功时候触发此事件,e.detail={src}	
		binderror		网页加载失败的时候触发此事件,e.detail={src}	

	></webview>

	(1)网页中跳转活和小程序通信,此时不需要进行wx.config验证
		网页中引入jssdk
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		
		wx.miniProgram.navigateTo	参数与小程序接口一致	
		wx.miniProgram.navigateBack	参数与小程序接口一致	
		wx.miniProgram.switchTab	参数与小程序接口一致	
		wx.miniProgram.reLaunch		参数与小程序接口一致	
		wx.miniProgram.redirectTo	参数与小程序接口一致	
		wx.miniProgram.postMessage	向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件
		wx.miniProgram.getEnv		获取当前环境	

2、在网页中使用小程序的接口sdk方式
	官网:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
	(1)获取acess_token
		https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
		其中:
			access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。
			
			appid和AppSecret	若小程序的错误,则使用关联公众号的
	
	(2)获取jsapi_ticket
		https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
	
	(3)根据sha1加密,获得signature
		
		noncestr=Wm3WZYTPz0wzccnW		//生成签名的随机串
		jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
		timestamp=1414587457
		url=http://mp.weixin.qq.com?params=value	//页面所在域名与使用的appid没有绑定
		
		可在https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign,使用签名工具测试签名
	
	(4)进行wx.config验证,在前端页面
		wx.config({
		  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		  appId: '', // 必填,公众号的唯一标识
		  timestamp: , // 必填,生成签名的时间戳
		  nonceStr: '', // 必填,生成签名的随机串
		  signature: '',// 必填,签名
		  jsApiList: [] // 必填,需要使用的JS接口列表
		});
		
		验证成功
		wx.ready(function(){
		  //config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行,对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
		});
		
		验证失败
		wx.error(function(res){
		  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
		});
		
		验证接口是否支持
		wx.checkJsApi({
		  jsApiList: ['chooseImage'], //需要检测的JS接口列表
		  success: function(res) {
			  //以键值对的形式返回,可用的api值true,不可用为false
			  //如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
		  }
		});
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
除了使用 `weixin-js-sdk`,在 Taro 微信小程序 webview 嵌套 Vue 3 + Vite 项目之间实现通信还有其他的方法,以下是一些常用的方法: 1. `window.postMessage()` 方法:可以通过 `window.postMessage()` 方法将消息发送到 Taro 微信小程序 webview 所在的 iframe 窗口。在 Taro 微信小程序,可以通过监听 `message` 事件来接收从 Vue 3 + Vite 项目发送的消息。 2. WebSocket:可以使用 WebSocket 在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目之间建立一个双向通信的连接。在 Taro 微信小程序,可以使用 `wx.connectSocket()` 方法来建立 WebSocket 连接,并通过监听 `wx.onSocketMessage()` 方法来接收从 Vue 3 + Vite 项目发送的消息。 3. Storage API:可以使用 Storage API 在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目之间共享数据。在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目都可以使用 `localStorage` 或 `sessionStorage` 对象来存储和读取数据。 4. 通过 URL 参数传递数据:可以通过在 URL 添加参数的方式传递数据。在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目都可以通过 `window.location.href` 或 `wx.navigateTo()` 方法来跳转页面,并在 URL 添加参数。 以上是一些常用的在 Taro 微信小程序 webview 嵌套 Vue 3 + Vite 项目之间实现通信的方法,根据实际需求可以选择不同的方法来实现。需要注意的是,在使用这些方法时要确保数据的安全性和正确性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值