vue和uniapp单页面实现微信h5打开微信小程序

说明

需要写个接口获取公众号配置, 引入微信sdk的js, 拿到小程序的原始id来实现跳转, 小程序后台

https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=2002641475

没有花里胡哨的复制黏贴文,直接上代码

代码

<template><view><!-- #ifdef H5 --><view v-html="wxOpenTags"></view><!-- #endif --></view>
</template><script>var weixin = document.createElement('script');weixin.type = 'text/javascript';weixin.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';document.body.appendChild(weixin);export default {data() {return {wxOpenTags: '打开小程序1'};},onLoad(){if (uni.getSystemInfoSync().platform == 'ios') {var href = window.location.href.split('#')[0] || window.location.href} else {var href = window.location.href}// 这里要换成自己的api接口,返回公众号配置this.$get('api/v1/wx/jsconfig', {url: href}).then(response => {response.jsApiList=['checkJsApi',//判断当前客户端是否支持指定JS接口'updateAppMessageShareData',//好友'updateTimelineShareData',//朋友圈'scanQRCode',//扫一扫'chooseWXPay',//支付'startRecord',//开始录音'stopRecord',//停止录音'playVoice',//播放语音'pauseVoice',//暂停播放语音'stopVoice',//停止播放语音'uploadVoice',//上传语音'downloadVoice',//下载语音'translateVoice',//语音识别'wx-open-launch-weapp'//打开小程序]wx.config({debug: response.debug,appId: response.appId,timestamp: response.timestamp,nonceStr: response.nonceStr,signature: response.signature,jsApiList: response.jsApiList,openTagList:['wx-open-launch-weapp'//打开小程序]})wx.ready(() => {setTimeout(()=>{// 这里的username代表小程序的原始id,需要到小程序后台去看,和appid不同,需要换成自己的小城idthis.wxOpenTags=`<wx-open-launch-weapp path="pages/index/index" id="launch-wxapp" username="gh_6ff3f1da728a">  <template>  <style>  .btn-open-weapp{  background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%);  border: 0;  color: #424242;  text-shadow: 0px 1px 1px #fff;  border-radius: 50px;  text-align: center;  width: 120px;  height: 35px;  line-height: 35px;  outline:none;  }  </style>  <button class="btn-open-weapp">打开小程序2</button >  </template>  </wx-open-launch-weapp>`;  },1000);  })}).catch(error => {console.log(error)})}}
</script>

效果图

vue和uniapp单页面实现微信h5打开微信小程序相关推荐

H5打开支付宝小程序
H5打开支付宝小程序 window.location.href=`https://ulink.alipay.com/?scheme=`+ encodeURIComponent("alipay ...
【IOS invalid signature】记录一次微信H5跳转小程序的坑
今天开发微信H5页面跳转小程序,安卓和开发者工具都没问题,IOS第一次进入会报错验签失败,我的是vue项目. 实测添加一行代码解决,只传原始地址,不能传完整url,看其他人什么刷新,什么判断都无效 l ...
企业微信中打开的小程序wx.qy.getEnterpriseUserInfo接口调用报错42013
当在企业微信中打开已关联的小程序,发现调用wx.qy.getEnterpriseUserInfo的接口是报错,如下图: 在调用wx.qy.getEnterpriseUserInfo之前,我是有先调wx ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
如何在微信H5页面链接跳转到第三方小程序的任意页面？
在微信内的H5界面,跳转到第三方小程序的前提条件: 佣有已认证的服务号,服务号添加"JS接口安全域名", 即访问H5界面的域名获得第三方小程序的原始ID 这个只能手动获取,微信官 ...
uniapp单页面背景音乐
uniapp单页面背景音乐实现 uniapp中提供了背景音乐的API,配置非常的繁琐,而且需要申请权限.如果只是一个页面需要,我们不如直接利用音频API,来进行曲线救国,简单方便!我可真是个小机灵鬼( ...
Bwsaas框架基于Thinkphp6.x开发的微信公众号，小程序，app，H5等多端打通的框架
完善bwsaas框架并开源原生小程序商业版本前端应用新增 1插件安装升级,安装平台系统插件(type=admin_system)时可同时添加多个角色组(平台系统功能+租户系统功能),需要在group ...
V2微信内外网页H5跳转小程序链接生成系统开发
V2微信内外网页H5跳转小程序链接生成系统开发网页支持H5.服务号.封装app 功能// banner.首页.标题:创建您的链接.功能区.创建链接.选择类型.8种类型.小程序.一个人小程序.公众号. ...
vue 实现H5跳转小程序
vue实现H5跳转小程序公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅. 适用环境微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上. ...

vue和uniapp单页面实现微信h5打开微信小程序

说明

代码

效果图

vue和uniapp单页面实现微信h5打开微信小程序相关推荐

最新文章

热门文章