vue引入微信的JSSDK h5与小程序之间的跳转方案
h5与微信小程序之间的相互跳转
·
vue引入微信的JSSDK使用 h5与小程序之间的跳转
vue如何使用 微信的JSSDK
安装
npm install weixin-js-sdk --save
我喜欢设置全局属性,所以在main.js文件里面引入:
import wx from ‘weixin-js-sdk’;
Vue.prototype.$wx = wx;
这样就不用在每个页面去引入了。
不想再全局引入的话可以再组件中引入,
var wx=require(‘weixin-js-sdk’)
下面以:微信小程序访问H5 H5返回到微信小程序为例 点击button按钮返回小程序 亲测有效
###原生 html页面的话 使用如下
微信小程序与h5之间的相互跳转
1.微信⼩程序跳转⼩程序 wx.navigateToMiniProgram
<script src='https://res.wx.qq.com/open/js/jweixin-1.3.0.js'></script>
navigateToMiniProgram(mAppId)
{
wx.navigateToMiniProgram({
appId: mAppId,
path: 'page/index/index?id=123',
extraData: {
foo: 'bar'
},
envVersion: 'release',
success(res) {
// 打开成功
ret_handler(res);
},
fail(res) {
}
})
},
2.h5跳转到⼩程序wx.miniProgram.navigateTo
<script src='https://res.wx.qq.com/open/js/jweixin-1.3.0.js'></script>
// 点击⽴即体验跳转到⼩程序(如果要跳转的⼩程序路径是tab页就⽤wx.miniProgram.switchTab,否则⽆效)
$('.experience').click(function () {
wx.miniProgram.navigateTo({
url: '/pages/index/index',
});
})
3.⼩程序⾥打开h5页⾯(webview)
⼩程序⾥代码:
<web-view src='{{url}}'></web-view>
let token = encodeURI(wx.getStorageSync('token'));
let openid = encodeURI(wx.getStorageSync('userinfo').openid);
that.setData({
url: pageUrl + '?token=' + token + '&openid=' + openid,
})
h5代码:
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
let token = getQueryString("token") || "";
let openid = getQueryString("openid") || ""
更多推荐
已为社区贡献6条内容
所有评论(0)