请教下前端我想在 vue 组件中使用企业微信 JSSDK 如何引用

2021-01-07 11:40:39 +08:00
 phpxiaowangzi

如题,我用 vue-cli 脚手架创建的应用,然后 vue 组件里想使用企业微信 JSSDK,直接用 import 引用文件会报错,求教如何使用

<template>
	<div>
		<div>ibeacon</div>
	</div>
</template>

<script>
	import Vconsole from 'vconsole'
    import '../../assets/js/jweixin-1.2.0'
    
	export default {
		name:'Ibeacon',
		mounted() {
			var code = this.$route.query.code
			if ( !code ) {
				alert('无法获取 sess 标识')
			} else {
                new Vconsole()

                var _this = this
                var reqData = {}
                reqData.type    = 'type1'
                reqData.version = '1.0'
                reqData.key     = '123456'
                reqData.parameter = {}
                reqData.parameter.code = code

                this.$http.post(
                    'http://api.test.com/',
                    reqData,
                    {emulateJSON:true}
                ).then(function(response){
                    if (response.data.errcode != 0) {
                        alert(response.data.errmsg)
                    } else {
                        _this.sess = response.data.data
                        this.getIbeacon()
                    }
                }).catch(function(error){
                    console.log(error)
                })
            
            }
		},
		methods:{
			getIbeacon:function(){

				var _this = this
				var url = location.href.split('#')[0]

				var reqData = {}
				reqData.type    = 'type2'
				reqData.version = '1.0'
				reqData.key     = '123456'
				reqData.parameter = {}
				reqData.parameter.url = url

				this.$http.post(
					'http://api.test.com/',
					reqData,
					{emulateJSON:true}
				).then(function(response){

					console.log(response.data.data)
					wx.config({
						beta: true,// 必须这么写,否则 wx.invoke 调用形式的 jsapi 会有问题
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
						appId: response.data.data.appId, // 必填,企业微信的 corpID
						timestamp: response.data.data.timestamp, // 必填,生成签名的时间戳
						nonceStr: response.data.data.noncestr, // 必填,生成签名的随机串
						signature: response.data.data.signature,// 必填,签名,见 附录-JS-SDK 使用权限签名算法
						jsApiList: ['startBeaconDiscovery', 'stopBeaconDiscovery', 'getBeacons','onBeaconUpdate','onBeaconServiceChange'] // 必填,需要使用的 JS 接口列表,凡是要调用的接口都需要传进来
					})
					var uuids = []
					wx.ready(function(){
						wx.startBeaconDiscovery({
							uuids:uuids,
							success(res) {

							}
						})
					})

				}).catch(function(error){

					console.log(error)
				})
			}
		}
	}
</script>
1596 次点击
所在节点    程序员
5 条回复
killmojo
2021-01-07 13:54:11 +08:00
wx 没有 UMD 封装吧,简单点就直接放 index.html
que01
2021-01-07 14:03:45 +08:00
towry
2021-01-07 15:52:49 +08:00
代码能写好就写好吧,为了你我他
KuroNekoFan
2021-01-07 16:38:45 +08:00
@que01 这种非官方发布的 npm 包真的敢用吗
sjhhjx0122
2021-01-08 08:53:28 +08:00
最简单的方法就是加到 public/index.html

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/742489

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX