微信小程序开发记录-静态H5跳转小程序并携带参数

发现问题：

H5跳转小程序

需要携带参数，且参数中包含特殊字符等

可能在非微信浏览器或者非小程序中打开

解决思路

普通H5 --> 通过部署在小程序云开发服务器上的静态H5（免鉴权）做中转 --> 再跳转到小程序

具体步骤及操作

普通H5

window.location.href跳转即可，唯一需要注意点：携带特殊字符时使用encodeURIComponent编译处理 2. 部署在小程序云开发服务器上的静态H5

操作这一步时，需要先完成如下操作

a. 对应的小程序开通云开发 b. 开通静态网站，绑定自定义域名 c. 了解小程序云开发云函数基础知识（照着小程序开发文档操作即可） 3. 文档中没有的内容及关键点操作我们需要传递的参数主要通过页面url带参的方式传递，所以要在部署的静态H5中做如下（实例参考）类似操作

    /**
     * @description: 获取页面url中的参数
     * @params {*}
     * @return {*}
     */
 function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }
    /**
     * @description: 获取页面传递的参数
     * @params {*}
     * @return {*}
     */
    const productType = getQueryVariable('productType')
    const paramUri = getQueryVariable('paramUri')
    const id = getQueryVariable('id')
    const hotelid = getQueryVariable('hotelid')
    const hotelFlag = getQueryVariable('hotelFlag')
复制代码

修改调用云函数时的方法,将获取到的参数再传递到云函数中去

async function openWeapp(onBeforeJump) {

      var c = window.c
      const res = await c.callFunction({
        name: 'public',
        data: {
          action: 'getUrlScheme',
          productType: productType,
          paramUri: paramUri,
          id:id,
          hotelid:hotelid,
          hotelFlag:hotelFlag
        },
      })
      console.warn(res)
      if (onBeforeJump) {
        onBeforeJump()
      }
      location.href = res.result.openlink
    }
复制代码

再修改云函数中的相关,我这里的业务逻辑是根据参数跳转3种不同的页面，每种页面传不同的参数，如下，这里值得注意的是decodeURIComponent ，要记得解析之前加密的字符

async function getUrlScheme(event) {
  console.log('event参数', event)
  let paramUri = event.paramUri
  let paramStr = decodeURIComponent(paramUri)
  let param = JSON.parse(paramStr)
  console.log('param参数', param)
  let path = "",
    query = "";

  const rule = {
    '0': () => {
      path = `pageGoods/goods-detail/index`
      query = `id=${event.id}`
    },
    '1': () => {
      // path = 'pageGoods/goods-detail/index'
      // query = decodeURIComponent(param)
      path = `pageHotel/hotel-detail/index`
      query = `hotelid=${event.hotelid}&hotelFlag=${event.hotelFlag}`
    },
    '2': () => {
      if (param.ExternalProjectCode) {
        // 国旅线路
        path = '/pages/product-detail/product-detail'
        query = `RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}&ExternalProjectCode=${param.ExternalProjectCode}`

      } else {
        path = '/pages/product-detail/product-detail'
        query = `RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}`

      }

    },

  }
  rule[event.productType]()
  console.log('跳转路径', path)
  console.log('跳转参数', query)
  console.log('调用')
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: path, // <!-- replace -->
      query: query,
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: false,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}
复制代码

走到这一步，我们的H5在其他浏览器里应该已经能顺利跳转你所要跳转的小程序页面，但是注意：在微信中直接打开是，它是通过按钮点击跳转的，这里我们还需要对静态H5的按钮点击事件做下修改

示例中的跳转如下：

  <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
      <wx-open-launch-weapp id="launch-btn" username="gh_f05781f17c55" path="pages/index/index">
        <!-- replace -->
        <template>
          <button
            style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>

        </template>
      </wx-open-launch-weapp>
复制代码

这里的问题是path是写死的，我们需要根据参数动态设置它，我是这样操作的

//在静态H5页面的最后补充一段js
let param = JSON.parse(decodeURIComponent(paramUri))
    let path = ''
    const rule = {
      0: () => {
        // 电商
        path = `pageGoods/goods-detail/index?id=${id}`
      },
      1: () => {
        // 酒店
        path = `pageHotel/hotel-detail/index?hotelid=${hotelid}&hotelFlag=${hotelFlag}`
      },
      2: () => {
        // 线路
        if (param.ExternalProjectCode) {
          // 跳转国旅线路
          path = `pageCommon/product-detail/index?RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}&ExternalProjectCode=${param.ExternalProjectCode}`

        } else {
          path = `pages/product-detail/product-detail?RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}`

        }

      },
    }
    rule[productType] && rule[productType]()
    document.getElementById('launch-btn').setAttribute('path', path)
复制代码