聊聊从H5页面跳转到小程序的几种实现方案,h5制作小程序

4747 1942 2022-10-16

本文讲述了聊聊从H5页面跳转到小程序的几种实现方案,h5制作小程序。

如何从H5页面跳转到小程序?下面本篇文章给大家介绍一下从H5页面跳转到小程序的几种实现方案,以及分享踩坑记录和注意要点,希望对大家有所帮助!

程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步

最近负责的一个需求涉及到H5页面跳转小程序的场景,具体应用场景是:

运营通过短信发送链接触达用户 => 用户点开链接 => 跳转至小程序指定的某个页面

下面我们来看看H5跳转小程序目前有哪些实现方案~

实现方案

实现H5跳转小程序的方案目前有多种,可以根据自己的实际场景选择,上面提到的场景采用第二种更合适,我们先来一个个看。

第一种:通过 URL Scheme

适合在外部浏览器运行的H5页面,通过 URL Scheme 的方式来拉起微信打开指定小程序。

小程序的 URL Scheme 如果借助于云开发的话,是免鉴权,直接调用即可获取.

那如何获取小程序的 URL Scheme 呢?可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。

使用示例

下图是通过:【小程序管理后台 - 工具 - 生成 URL Scheme 】的页面

填入具体的路径以及参数,点击【生成】按钮,将生成的 URL Scheme 存起来,直接放在按钮的点击事件中,如:

1

2

3

openWeapp() {

    location.href = 'weixin://dl/business/?t=xxxxxx'

}

第二种:直接用微信的短链(URL Link)

这种一般适用于不需要额外开发H5页面,直接生成链接,用户通过打开链接即可跳转指定的小程序页面。

打开链接后,会有微信默认的H5中转页(想要自定义H5中转页也是可以的),目前的版本已经支持默认自动跳转小程序,不需要用户确认,这点很不错。

获取 URL Link 的方式

通过服务端接口可以获取打开小程序任意页面的 URL Link

踩坑记录

  • 调微信生成 URL Link 的接口中,参数 path 只认正式版,虽然有 env_version 这个环境变量,然而并没有用(也就是说设定的 path 必须是正式版已经存在的,否则会报:invalid weapp pagepath )。

  • 生成的 URL Link,也就是 https://wxaurl-/pFawq35qbfd 这种短链在微信环境中打开只会跳【正式版】,即使你的 env_version 设定了【体验版】或【开发版】,需要在外部浏览器打开才能跳转指定的版本,参考。

  • 在某些OPPO自带的浏览器中打开(如下图),提示“请在手机打开网页链接”,兼容性还需努力啊……

第三种:在自定义H5页面嵌入微信标签

这种适用于运行在微信环境的自定义H5页面,将跳转按钮融合在自研H5应用,点击按钮后跳转指定小程序页面。

  • 需要 js-sdk-1.6.0 以上才支持 (https://res.wx.qq.com/open/js/jweixin-1.6.0.js)

  • wx.config中增加openTagList(开放标签列表)

1

2

3

4

5

6

7

8

9

wx.config({

  debug: true// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印

  appId: ''// 必填,公众号的唯一标识

  timestamp: , // 必填,生成签名的时间戳

  nonceStr: ''// 必填,生成签名的随机串

  signature: '',// 必填,签名

  jsApiList: [], // 必填,需要使用的JS接口列表

  openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']

});

openTagList(开放标签列表)目前支持配置:

  • wx-open-launch-weapp - 指H5跳转小程序

  • wx-open-launch-app - 指H5跳转app

  • wx-open-subscribe - 服务号订阅通知按钮

  • wx-open-audio - 音频播放

HTML标签示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="module-wrap">

    <div class="module-A">

        ...

    </div>

    <wx-open-launch-weapp

      id="launch-btn"

      username="gh_xxxxxxxx"

      path="pages/home/index?user=123&action=abc"

    >

      <script type="text/wxtag-template">

        <style>.btn { padding: 12px }</style>

        <button class="btn">打开小程序</button>

      </script>

    </wx-open-launch-weapp>

</div>

注意要点

  • 使用该功能必须是非个人主体认证的小程序。

  • 只能跳已发布的【正式版】小程序,不能跳【体验版】或【开发版】。

  • path 属性,官方文档一般是 pages/home/index?user=123&action=abc 这种示例,但实际使用可能会报页面不存在,需要在所声明的页面路径后添加 .html 后缀,如 pages/home/index.html,有毒。

  • 小程序可以被用来做营销,做活动,还能用来开店,做线上业务拓展,引流涨粉,拓客推广。而在如今的时代,有了第三方平台的帮助,普通人制作已经不是一件困难的事。

  • 许多从业者都开始跃跃欲试想制作小程序,那么今天,我们就来讲讲h5制作小程序都有哪些类型?以及第三方小程序制作平台怎么选择?

  • h5制作小程序都有哪些类型?

  • 1.h5游戏小程序

  • h5互动小游戏常被用于商家的活动营销和推广,也会被自媒体运营者用来给账号涨粉。

  • 常见的h5互动小程序有转盘/抽奖/答题/拼团/秒杀/投票/长期签到等等,可以做到品牌传播,获客拉新,付费转化,活跃留存等功能。

  • 在节日的前后几天用来做活动的效果最佳,既能利用好节日的热度,又能充分发挥h5游戏小程序的营销功能。

  • 2.品牌/商业线上小程序

  • 搭建商业线上小程序,可以帮助门店/品牌开拓线上的业务渠道,依靠微信10亿的流量,用对了推广方法就能获去比线下更多的流量和顾客资源。

  • 制作小程序的功能中有信息展示,服务预约,内容查询等功能,顾客扫码进来后 就能主动快速了解自家平台店铺的基本情况,吸引有需求的顾客主动咨询,节省人力。

  • 可以在微信的”周边小程序”中查找到自己的小程序,只要顾客在微信上打开附近的小程序,就能看到,还附带导航功能,极大地削弱了因地理位置而导致的门店经营情况不佳。

  • -

  • 制作小程序的平台怎么选择?

  • 可以简单归类为这几项:

  • >>看规模:有无营业执照;成立时间长短;是否经常被顾客投诉/退款。

  • >>看案例:制作小程序的官网中都会放上一些以往的优秀案例作为宣传,去体验这些案例,并以此评估这家小程序制作平台的整体水平。

  • >>看报价:在价格和需求中找到平衡点,可以选择【价格定制】模式的制作小程序网站,以功能决定价格,未来可以升级套餐,可选择程度高,中途放弃也不会损失太多成本。

  • >>看售后:制作小程序开发不是一劳永逸的,小程序上线之后可能会出现一些问题,售后是否到位,小程序出现问题了找谁,是否呢能及时处理问题,都是需要评估的部分。

  • 上文就是小编为大家整理的聊聊从H5页面跳转到小程序的几种实现方案(附常见坑点),h5制作小程序。

  • 国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:深入解读:小程序SDK是什么?什么是SDK
下一篇:hybrid app开发指南,hybrid app开发教程
相关文章

 发表评论

暂时没有评论,来抢沙发吧~