背景

小程序内嵌翼支付h5，翼支付h5头部有返回按钮，需要我们提供返回链接，并且只支持h5链接，需求是需要返回小程序指定页面

（ps：如果支付成功可以通过轮询支付接口，监听到需要返回的动作，小程序中直接处理跳转）

方案

做一个h5中转页，由中转页跳回到小程序指定页

实现

首先要实现h5页面。

调用wx.config进行全局配置（微信JS-SDK提供的功能（如获取用户信息、分享、支付等））中，增加以下配置

openTagList: ['navigateToMiniProgram']

写一个h5中转页面，页面需要写一个按钮，需要用户点击触发跳转（微信不允许自动跳转）

wx.miniProgram.navigateTo({
    url: url 
})

h5发布后，在小程序后台管理中增加白名单，完成。

全部代码示例

 componentDidMount() {
    console.log(process.env.TARO_ENV, isWeChat())
    if (process.env.TARO_ENV === 'h5' && isWeChat()) {
      /**
       * appId 和 appSecret 作为敏感信息为非必传
       * 项目真实的 appId 和 appSecret 后端会自己去获取
       * 当你想调试微信测试号的时候
       * 可以使用这两个参数传入微信测试号的 appId 和 appSecret来进行调试
       */
      const params: any = {
        appId: OFFICIAL_ACCOUNT_APPID,
        // appSecret: OFFICIAL_ACCOUNT_SECRET,
        url: window.location.href.split('#')[0]
      }
      getPayWeChatMobileGetSignature(params).then(({ code, data }) => {
        if (code === 1000) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: [
              'onMenuShareQQ',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'updateAppMessageShareData',
              'updateTimelineShareData', 
              'chooseWXPay',
              'hideMenuItems',
            ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            openTagList: ['wx-open-launch-weapp', 'navigateToMiniProgram'] //微信JSSDK中的一个特殊配置项，用于指定网页中可以使用的开放标签
          });
        }
      })
    }

  }

/**
 * h5跳转至小程序中转页面
 */
import React from 'react'
import { getCurrentInstance } from '@tarojs/taro';
import { View } from '@tarojs/components';
import './index.scss'

const TransferPage = () => {
  const { router: { params: { orderId } } } = getCurrentInstance()

  //跳转回小程序
  const handleConfirm = async () => {
    const url =  `/packages/order/pages/mycommodityDetails/index?categoryIndex=0&orderId=${orderId}`
    wx.miniProgram.navigateTo({
      url: url 
    })
  }

  return (
    <View style={{ flex: 1, textAlign: 'center', padding: 15,  }}>
      <View className='container'>
        继续使用***小程序，点击跳转
    </View>
      <View className='foot' onClick={handleConfirm}>
        继续使用“***”
      </View>
    </View>
  )
}

export default TransferPage

注意点

wx.config中参数必须正确
小程序后台需要添加h5地址的白名单,否则无法访问

从h5页面跳转到小程序指定页面

背景

方案

实现

全部代码示例

注意点