用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

H5打开跳转小程序的心路历程

Rolan 2021-3-24 09:12

前言:公司的短信营销,想要发送短信给用户,用户打开短信中的网址后,进入我们公司自己的小程序项目。首先呢在小程序的 “拓展插件” 里面有一个“营销工具”,可以通过配置,无需开发便能实现我的需求,还有我们不 ...

前言:公司的短信营销,想要发送短信给用户,用户打开短信中的网址后,进入我们公司自己的小程序项目。

首先呢在小程序的 “拓展插件” 里面有一个 “营销工具” ,可以通过配置, 无需开发 便能实现我的需求,还有我们不想用腾讯的短信服务(我们专一,哈哈,忠于自己的短信平台

哈哈哈哈其实是不想花钱

),所以借用了一下网址而已,用我们自己的平台发。

营销活动目前仅支持

1.境内非个人主体注册的小程序开通使用;

2.云开发模式下可免鉴权下发支持跳转到相应小程序的短信;

3.短信内容包含支持在微信内或微信外打开链接,用户点击链接可一键跳转至相应小程序。

链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序。

教程

于是抱着省钱的心态,一直白票这个功能。没有开发,达到效果,没有比这更爽的啦~~~~

好日子没过多久,因为是云开发免鉴权模式,这个工具内部实现了一些云函数的调用,以及托管功能,我们云开发的免费额度用完了,提醒已欠费。。。欠费。。。费。。。。。

好吧,那还是自己开发吧,逃不过的(认命),我是在vue下开发的。跳转分为两种环境,手机浏览器环境和微信环境。

在代码里面分别操作就行了。

手机浏览器环境

链接的网页在外部浏览器是通过 URL Scheme 的方式 来拉起微信打开主体小程序,小程序的 URL Scheme 如果借助于云开发的话,是 免鉴权 ,直接调用就可以获取的,在这不做过多的赘述,感兴趣的小伙伴自己去查吧,我继续。

那我怎么手动拿到我的小程序的 URL Scheme 呢,需要在 微信公众平台 右上角“工具”—“生成URL Scheme”

里面具体需要路径以及参数,这样就是可以打开的小程序的路径及参数了。

把生成的URL Scheme存起来,直接放在按钮的点击事件里。

openWeapp(){
        location.href = 'weixin://dl/business/?t=aaaaaa'
    }

微信环境

跳转小程序的开放标签 — <wx-open-launch-weapp>

在template部分使用,使用的方法为官方写法代码入下:

<wx-open-launch-weapp   
        id="launch-btn"     
        username="gh_xxxxxxxxxx"          
        path="/pages/pages/index.html"
        @launch="handleLaunchFn"
        @error="handleErrorFn"
    >
    <script type="text/wxtag-template">      
        <button class="open">跳转小程序</button>      
    </script> 
    </wx-open-launch-weapp>

在对应文件引入对应的包。

import wx from 'jweixin-1.6.0';

在created/beforeCreated中调用获取你们微信公众号基本信息的参数,在回调用wx.config,我们项目中有微信的鉴权,所以这一步进入页面的时候,就直接加载微信环境了。

如果按钮不显示的话,很有可能是调用 wx.config 时出了问题。

如果想改按钮的样式的话需要在script里面放style标签实现,但是这个样式很严格空格多一个都有可能出不来,也不能兼容一些样式。比如 position 就不可以。

<script type="text/wxtag-template">  
        <style>
            .open{ 
                background-color:#04BE02;
                color: #fff;
                width: 180px;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                border-width: 0px;}</style>      
        <button class="open">跳转小程序</button>      
    </script>

如果你想让按钮浮动起来,需要在最外侧加一个div,去控制div的浮动距离

position: fixed;bottom: .8rem;right: 28vw;

<div style="position: fixed;bottom: .8rem;right: 28vw;">
        <wx-open-launch-weapp>
            <script type="text/wxtag-template">       
                <button class="open">跳转小程序</button>      
            </script> 
        </wx-open-launch-weapp>
    </div>

注意事项

  • 使用该功能必须是 非个人主体 认证的小程序。
  • 基于wxjssdk1.6.0+版本。
  • 按量计费的云开发环境才可以开通静态网站托管。
  • vue 下为了避免编译错误, template标签 需要改成 script标签 。
  • <wx-open-launch-weapp> 使用的是 username 属性(小程序的原始id)而不是 appId 。
  • path 属性,所声明的页面路径必须添加 .html 后缀,如 pages/home/index.html 。
  • 目前静态网站仅支持h5跳转小程序开放标签权限,其余 jssdk 接口暂不支持。

以上便是我开发调试的整个经历,希望可以帮到你。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 闫雪 来自: segmentfault