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") || ""

vue引入微信的JSSDK h5与小程序之间的跳转方案相关推荐

实现H5和小程序之间相互跳转
功能描述: 1. 当点击理赔服务的时候,跳转到小程序页面 2. 当点击返回的时候,从小程序跳回H5页面(内嵌H5以及关闭小程序) 功能1:H5跳转小程序 vue中实现步骤 == 在 template ...
小程序与小程序之间相互跳转、传值、接收参数、navigator、navigateToMiniProgram
小程序之间相互跳转的2种方法,以及接收另一个小程序传参目录一.通过标签 navigator 直接跳转二.通过事件触发 wx.navigateToMiniProgram 跳转三.小程序接收另一个 ...
小程序中实现两个或者多个小程序之间互相跳转
前言: 小程序中实现两个或者多个小程序之间互相跳转,a小程序带参跳转到b小程序中. 官方入口:wx.navigateToMiniProgram(Object object) 点我https://dev ...
如何实现公众号和小程序之间的跳转？
现在互联网上会有这样的需求,公众号小程序之间实现流量共享,将公众号的粉丝引流至小程序.将小程序的用户转化成公众号粉丝.有需求就有解决的方法,那方法有哪些了? 接下来我们详细探究一下有哪几种跳转方法? ...
Vue、React使用微信开发标签跳转H5和小程序（最详细）
前言微信目前已经提供四种开放标签 wx-open-launch-weapp wx-open-launch-app wx-open-subscribe wx-open-audio 主要对开发提供了跳转 ...
微信小程序和微信小程序之间的跳转和传参示例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:微信小程序跳转使用限制需要用户触发跳转从 2.3.0 版本开始,若用户未点击小程序页面任意位 ...
微信小程序之间如何跳转,如何跳转到别人的小程序
1.需要现在app.json配置 "navigateToMiniProgramAppIdList": ["要跳转目标小程序的appid"], to(){wx.n ...
uniApp h5和小程序锚点跳转
需求是点击导航的icon 自动定位锚点到当前页代码如下console.log(xitem, '锚点');uni.createSelectorQuery().select("." ...
小程序： webview与小程序之间的跳转
康桑思密达安妮哈赛有

vue引入微信的JSSDK h5与小程序之间的跳转方案

vue引入微信的JSSDK使用 h5与小程序之间的跳转

vue如何使用微信的JSSDK

vue引入微信的JSSDK h5与小程序之间的跳转方案相关推荐

最新文章

热门文章

vue引入微信的JSSDK h5与小程序之间的跳转方案

vue引入微信的JSSDK使用 h5与小程序之间的跳转

vue如何使用 微信的JSSDK

vue引入微信的JSSDK h5与小程序之间的跳转方案相关推荐

最新文章

热门文章

vue如何使用微信的JSSDK