;

vue h5公众号页面跳转小程序出坑

2024-05-30 阅读:53
;
您当前位置:首页 | 新闻列表 | 新闻详情

前段时间开发的微信h5公众号页面,又添加新需求了~ 原本有些跳转是直接跳h5外链,现在要改成跳转到微信小程序,通过一系列的文档、经验分享,发现这个坑可以踩,并且能够填上,那就开始吧。

首先要能成功填坑,需要满足最基础的三个条件:

1、微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

2、引入的sdk至少要1.6以上

3、公众号和要跳转的小程序需要进行关联

只有能做到以上三点,才能开始我们下边的开发工作~

一、需要在main.js里注册组件

就是在使用前要把组件绑定到app实例上,类似于日常我们的组件引用。

	
ini
复制代码
app.config.ignoredElements = [ 'wx-open-launch-weapp', ]

二、跳转内容开发

关于wx-open-launch-weapp这个组件的使用方法,是有两种:一种是在页面中直接使用组件方式插入,另一种是通过v-html的方式插入。

1、对于第一种方式我试过了,但是并没有生效,可能是缺少配置,有兴趣的小伙伴可以研究下,简单放个示例代码。

	
xml
复制代码
<wx-open-launch-weapp id="launch-btn" username="gh_12345678" path="pages/index/index" > <script type="text/wxtag-template"> <style> .btn { width: 100px; height: 100px; } </style> <button class="btn">打开小程序</button> </script> </wx-open-launch-weapp>

2、 主要说一下第二种v-html方式:

简单说就是将上边代码的内容,通过模板字符串形式插入到html中,相比上边的写法,html插入的方式更接近我们日常的开发语法,写起来也更容易。

	
css
复制代码
// home.vue <span v-html="indexData.miniHtml"></span> const indexData = relative({ miniHtml: '' }) const getHtml = () => { let script = document.createElement('script') script.type = 'text/wxtag-template' script.text = ` <div style=" width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center;" > <img style="width: 32px; height: 32px;" src="" /> <span style=" font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 22px; margin-top: 13px; ">充值</span> </div>` if(process.env.NODE_ENV === 'production'){ // 生产环境 indexData.miniHtml = `<wx-open-launch-weapp style="height: 107px;width: 100%;" id="launch-btn" username="gh_123456789" path="/pages/index/index">${script.outerHTML} </wx-open-launch-weapp>` } else { // 测试环境 indexData.miniHtml = `<wx-open-launch-weapp style="height: 107px;width: 100%;" id="launch-btn" username="gh_987654321 path="/pages/index/index">${script.outerHTML} </wx-open-launch-weapp>` } nextTick(() => { let launchButton = document.getElementById('launch-btn'); (launchButton as any).addEventListener('launch', function(e: any) { console.log('success', e) }); (launchButton as any).addEventListener('error', function(e: any) { console.log('fail', e) }) }) }

说一下上边代码,通过动态创建一个script标签,添加到页面中。组件部分通过innerHtml方式插入,编写采用模板字符串方式。

其中wx-open-launch-weapp的几个主要参数:

username:要跳转的小程序原始id,就是gh开头的id

path:要跳转的小程序对应的路径,可以跳转webview内嵌的h5页面

最后通过addEventListener监听组件是否加载成功,如果有需要处理组件加载成功、失败逻辑的,可以在这里进行区分判断。

3、 配置wx.config并加载组件

大家都知道,在wx内嵌的h5页面,如果需要调用相关api和组件,需要进行配置,配置成功后才可使用。

	
typescript
复制代码
const params = { } http.getWxShare(params).then((res) => { if (res.code === 200 && res.data) { (proxy as any).$wx.config({ debug: false, appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名 jsApiList: ["onMenuShareAppMessage"], openTagList: ['wx-open-launch-weapp'] //,'wx-open-launch-weapp' }); setTimeout(() => { // 加载组件内容 getHtml(); (proxy as any).$wx.ready(() => { document.addEventListener("WeixinOpenTagsError", function (e: any) { console.error(e!.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响 }); console.log('config配置成功') }); (proxy as any).$wx.error((res: any) => { console.log('config配置失败') }); }, 1000) } else { console.log('准备失败'); } }, function (err: any) { console.log('准备失败', err); })

上边代码就不过多解释了,很容易看懂。至此开发就完成了,发布测试环境我们可以看到能成功加载,并能正常跳转。

但是对于我这个页面,有个很明显的问题

有一列图标都可以点击跳转,其他图标是跳转h5页面或者公众号内部跳转,只有这一个是需要加载组件跳转小程序。

在页面初始化进来的时候可以看到,其他图标和文字都是瞬间加载出来了,但是跳转组件会晚一点才会出现,会有明显的空白位置出现,用户体验不好

针对上面的问题,我这边的处理方式是:先将图片和文字初始化进去,此时组件未加载,也就相当于页面上只是个静态图和文字,并不能点击。组件加载完成之后,直接替换掉初始化内容。体现在代码上就是我们给上边的miniHtml变量一个初始值:

	
css
复制代码
const indexData = reactive({ miniHtml: `<div style=" width: 100px; height: 100px; > <img style="width: 32px; height: 32px;" src="" /> <span style=" font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 22px; margin-top: 13px; ">充值</span> </div>` )}

至此完美~入了坑并且完好的爬出来了


上一篇:广告公司是如何做商城小程序的解决方案 下一篇:微信小程序登录、支付方式即请求加密方法

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

在线预约

  • 您的姓名
  • 联系电话

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 小程序定制 生鲜小程序 全平台开发 网站建设 外包开发 自主研发产品 sitemap robots

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部