h5跳转微信小程序

框架&版本：Taro 1.3.9，样式语言：scss
以Taro编译h5为例，react语法

方案：用h5页面做中转。短信内的链接指向一个固定h5链接，打开页面后再引导跳转至小程序

1、逻辑代码

1.1获取打开该h5的设备类型

页面加载后执行该函数

• 如果为微信内打开，需要使用JS-SDK
• 如果为移动端其他浏览器打开，则打开小程序

/*
 * 获取设备类型
 * 微信内打开：使用微信开放标签打开小程序
 * PC端打开：提示使用手机打开页面
 * 移动端其他浏览器打开：使用URL Scheme打开小程序
 * */
initDeviceType = () => {
    let ua = navigator.userAgent.toLowerCase()
    let isWXWork = ua.match(/wxwork/i) == 'wxwork' // wxwork 企业微信
    let isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
    let isMobile = false
    let isDesktop = false
    if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
        isMobile = true
    } else {
        isDesktop = true
    }

    this.setState({
        isWeixin,
        isMobile,
        isDesktop,
    })

    if (isWeixin) {
        this.getWxConfig()
    } else if (isDesktop) {
        console.log('isDesktop')
    } else if (isMobile) {
        this.h5launchWeapp()
    }
}

1.2 微信内跳转h5，调用jssdk

JS-SDK 说明文档 ↗️

1.2.1 绑定域名

登录微信公众平台（公众号账号）→ 设置 → 公众号设置 → 功能设置 → JS接口安全域名

1.2.2 引入JS文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

1.2.3 通过config接口注入权限验证配置

必填参数可由后台调用微信接口，再返回给前端。jsApiList可填入任意合法的值如’onMenuShareTimeline’

wx.config({
  debug: true, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

1.3 非微信内置浏览器跳转h5

此处的 urlScheme 为使用微信公共平台提供的工具生成的永久 URL Scheme。
登录微信公众平台（小程序账号） → 头部导航栏工具 → 生成URL Scheme（选择永久有效）

h5launchWeapp = () => {
    location.href = urlScheme 
}

1.4 在移动端避免使用100vh

页面加载后执行

initPageHeight = () => {
    let vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`) // 赋值给自定义属性 --vh

    window.addEventListener('resize', () => {
        let vh = window.innerHeight * 0.01
        document.documentElement.style.setProperty('--vh', `${vh}px`)
    })
}

2、页面结构

<View className='h5LaunchWeapp-index'>
     {
         isWeixin ?
             <View className='weixin'>
                 <View className='title'>点击以下按钮打开“小程序”View>
                 <wx-open-launch-weapp id='launch-btn' username="小程序原始ID，开头为gh_" path="页面路径，如：/pages/home/index.html">
                     <script type='text/wxtag-template'> {/* react不支持，用script替代 */}
                         <View
                             style={{
                                 width: '170px',
                                 padding: '8px 0 8px 0',
                                 textAlign: 'center',
                                 fontSize: '18px',
                                 display: 'block',
                                 margin: '0 auto',
                                 fontWeight: 400,
                                 background: 'rgb(26, 185, 78)',
                                 color: '#fff',
                                 borderRadius: '6px',
                             }}
                         >打开小程序</View>
                     script>
                 wx-open-launch-weapp>
             View>
             :
             isDesktop ?
                 <View className='desktop'>
                     <View>请在手机打开网页链接View>
                 View>
                 :
                 <View className='mobile'>
                     <View className='title'>正在打开 “小程序”...View>
                     <View className='launchBtn' onClick={this.h5launchWeapp}>打开小程序View>
                 View>
     }
 View>

3、样式

.h5LaunchWeapp-index {
  width: 100vw;
  // var(--vh, 1vh) 表示使用自定义属性 --vh，如果自定义属性值无效则使用回退值 1vh
  height: calc(var(--vh, 1vh) * 100 ); // 在移动端避免使用100vh
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .weixin {
    font-size: 36px;
    .title {
      color: #333;
      margin-bottom: 360px;
    }
  }
  .desktop {
    font-size: 26px;
    color: #333;
  }
  .mobile {
    font-size: 36px;
    .title{
      color: #333;
      margin-bottom: 360px;
    }
    .launchBtn {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      width: 100%;
      padding: 14px 0;
      background: rgb(26, 185, 78);
      color: #fff;
      border-radius: 12px;
    }
  }
}