IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> uniapp h5页面集成企业微信js-sdk -> 正文阅读

[移动开发]uniapp h5页面集成企业微信js-sdk

一、引入

? ? 1、?在新建的uniapp 项目根目录下面创建一个html文件,我这里直接叫index.html;然后在manifest.json中的h5配置中,配置这个html文件。

1.1、在index.html中引入(我就用这种方式,其他没有)

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

?2、初始化sdk配置?

? ? ? 这里需要特别注意的是在企业微信官方文档里调用api的前缀都是wx,但是在uniapp框架已经内置了wx这个对象,这个给开发微信小程序使用的,但是在这里使用的话就会有冲突,所以官方提供了“jWeixin”’对象;但是在我开发过程中发现,在Android端用“jWeixin”’,的确没问题,但是ios就不起作用了,经过我测试才发现还是得用“wx”才行,原因嘛,还没找到!!!,为了方便我直接写在main,js。


	if (/(Android)/i.test(navigator.userAgent)) {
		 Vue.prototype.sdk=jWeixin  
	}
	if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
		Vue.prototype.sdk=wx
	}

?

?2.1、封装配置:

	

initsdk() {
				let url = window.location.href.split("#")[0]
				uni.request({
					url: "与后端协商好的请求地址"+"?url="+encodeURI(url),//可能还需要其他参数,请自己与后端协商,这里是为了获取的各种配置项,后端都会处理好,前端只需要使用就可以了
					method: "GET",
					success: (res) => {
						if (res.data.Status == true) {
							let WXConfig = res.data.ResData
							
							this.sdk.config({
								beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
								appId: WXConfig.appId, // 必填,企业微信的corpID
								timestamp: WXConfig.timestamp, // 必填,生成签名的时间戳
								nonceStr: WXConfig.nonceStr, // 必填,生成签名的随机串
								signature: WXConfig.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
								jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
							});
							this.sdk.ready(function(re) {
								console.log('re', re)
								// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
							});
							this.sdk.error(function(err) {
								console.log('err', err)
								// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
							});
						} else {}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},

2.2、在需要的页面调用封装好的方法后,就可以调用相关的apil ,

官网链接:https://open.work.weixin.qq.com/api/doc/90001/90144/90547

注意:

1,要使用的接口,一定要提前配置好!

2,配置好后,请重新运行项目,不然不起作用,反正我这里是这样的!

?

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 12:03:47  更:2021-07-17 12:04:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 13:14:52-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码