引微信js-sdk 可以用 npm 安装 (npm install weixin-js-sdk --save)
配置wx.config 信息一定要正确

1.在根目录common文件下新建wechat.js 配置wx.config

//引入js-sdk
import wx from '@/node_modules/weixin-js-sdk/index.js';
//引入request(可以直接用uni.request)
export default {
	getConfig() { 
		WxOpenApp({  //调用后台接口用来获取配置微信config的信息
			targetUrl: 'https:/xxx.xxx.xxx/share/' //传给后台的参数
		}).then(res => {
			wx.config({
				debug: false,  //测试时候用true 能看见wx.config的状态是否是config:ok
				appId: res.data.appid, // 必填,公众号的唯一标识(公众号的APPid)
				timestamp: res.data.timestamp, // 必填,生成签名的时间戳
				nonceStr: res.data.noncestr, // 必填,生成签名的随机串
				signature: res.data.signature, // 必填,签名
				jsApiList: [
					'onMenuShareTimeline', // 分享给好友
					'onMenuShareAppMessage', // 分享到朋友圈
					'updateAppMessageShareData', // 分享给好友1.4
					'updateTimelineShareData' // 分享到朋友圈1.4
				], // 必填,需要使用的JS接口列表
				openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
			});
		});
	}
}

新建一个唤起APP的组件 load.vue

<template>
	<view>
			<wx-open-launch-app id="launch-btn" appid="需要唤起app的appid" :extinfo="extinfoStrTwo">
				<script type="text/wxtag-template">
					<button style="margin-top: 30rpx!important;font-size: 32rpx;">APP内打开</button>
				</script>
			</wx-open-launch-app>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		extinfoStrTwo: String    //传给APP的参数,用来判断跳转指定页面,可传可不传
	},
	mounted() {
		setTimeout(() => {
			var btn = document.getElementById('launch-btn');
			btn.addEventListener('launch', e => {
				// 在此处可设置粘贴板内数据,数据是传递给 app 的参数进,
			});
			btn.addEventListener('error', e => {
				// 在此处可设置粘贴板内数据,数据是传递给 app 的参数进,
				if (uni.getSystemInfoSync().platform == 'ios') {
					location.href = 'http://itunes.apple.com/app/id1541793795';
				} else if (uni.getSystemInfoSync().platform === 'android') {
					location.href = 'http://app.xiaomi.com/detail/1276426';
				}
				// 唤醒失败的情况下,可用于降级处理比如在此处跳转到应用宝
			});
		}, 1000);
	}
};
</script>

在main.js全局注入

import upload from './components/load.vue'
// #ifdef H5
import wx from './common/jweixin.js'
import wechat from './common/wechat.js'
Vue.prototype.$wx = wechat
// #endif

Vue.component('upload', upload)

在需要唤起APP的H5页面调用load组件

<template>
	<view>
		<upload :extinfoStrTwo="extinfoStrTwo"></upload>
	</view>
</template>


data(){
	extinfoStrTwo: ' '          //传给APP的参数,用来判断跳转指定页面,可传可不传
},
onLoad(){
	this.extinfoStrTwo = 'dakaDetail/' + '111';
}

app的启动页 ,接到参数判断跳转指定页

plus.globalEvent.addEventListener('newintent', e => {
			// plus.runtime.argumrnts为打开时APP传的值(<wx-open-launch-app>中的extinfo),可以传字符串通过符号截取判断类型
			if (plus.runtime.arguments) {
				//我截取了字符串,判断是商品并且根据ID跳转到商品详情页
				var str = plus.runtime.arguments;
				var arr = str.split('/');
				 if(arr[0] == 'dakaDetail') {
					uni.navigateTo({
						url: '/pages/tabbar/tabbar-1/dakaDetail/dakaDetail?professorId=' + arr[1]
					});
				}
			}
		});
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐