文章目录
- uniapp、h5跳转到小程序、定位信息、导航、分享朋友、分享朋友圈、分享QQ、分享QQ空间,最细讲解,完美解决方案。
- 前言
- 一、设置JS接口安全域名(非常重要)
- 二、下载js-sdk包,并引入包
- 1.下载js-sdk包
- 2.在需要跳转的h5页面导入该包
- 三、视图层需要填写代码块
- 四、js代码代码段
前言 一、设置JS接口安全域名(非常重要) 登录H5公众号的微信公众平台=>“公众号设置”的“功能设置”里填写“JS接口安全域名”(这个必须要加里面,否则会导致标签无法生成。而且是线上版本的前缀链接,一般找运维要就行) 二、下载js-sdk包,并引入包 1.下载js-sdk包
代码如下(示例):
npm install jweixin-module --save2.在需要跳转的h5页面导入该包
代码如下(示例):
import wx from 'jweixin-module'三、视图层需要填写代码块
//此为h5跳转到小程序,跳转其他页面可以在js里面的jsApiList里取用
需要注意username为跳转到的小程序里面的小程序的原始id
username: 原始id 需要登录公众平台,扫码选择要跳转的小程序,进入之后拉到最
底层就会有个一个以gh_xxx的开头的原始id 粘贴放入username里即可.
path: 要跳转到微信小程序的页面,结尾以.html结尾。不填默认跳转微信小程序首页
methods: {
//getBtn方法是从后台获取的数据方法
getBtn() {
const url = window.location.href.split('#')[0]
console.log(url,'------------');
wx.config({
debug: true, // 开启调试模式,返回值会在客户端alert出来。
appId: res.appId, // 必填,公众号的唯一标识,后台接口返回的数据
timestamp: res.timestamp, // 必填,生成签名的时间戳,后台接口返回的数据
nonceStr: res.noncestr, // 必填,生成签名的随机串,后台接口返回的数据
signature: res.signature, // 必填,签名,后台接口返回的数据
openTagList: ['wx-open-launch-weapp'], // 可选,需要使用的开放标签列表
jsApiList: [
'wx-open-launch-weapp', // 跳转小程序
'getLocation', // 获取定位信息
'openLocation', // 导航
'onMenuShareAppMessage', // 分享给朋友
'onMenuShareTimeline', // 分享到朋友圈
'onMenuShareQQ', // 分享到QQ
'onMenuShareQZone', // 分享到QQ空间
'checkJsApi' // 判断当前客户端版本是否支持指定JS接口
] // 必填,需要使用的JS接口列表
});
wx.ready(function() {});
},
},
onLoad() {
this.getBtn();
}
用到的标签jsApiList里面直接模板使用即可



