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

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

首先呢在小程序的 “拓展插件” 里面有一个 “营销工具” ，可以通过配置，无需开发便能实现我的需求，还有我们不想用腾讯的短信服务（我们专一，哈哈，忠于自己的短信平台 哈哈哈哈其实是不想花钱），所以借用了一下网址而已，用我们自己的平台发。

营销活动目前仅支持
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接口暂不支持。

---

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