静态h5页面跳转到微信小程序

一、需求：

通过发送的短信链接，打开一个H5页面，然后跳转到小程序

二、文档地址：

微信官方文档-H5跳小程序

三、准备工作：

开通静态网站、绑定自定义域名，需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行，才能拥有免鉴权的能力

四、静态html页面

1. 下图将文件下载下来，替换replace的地方

2. 按照下图点找到静态网站，现改为按量付费，然后就可以上传文件了

3. 改一下权限 

三、上传云函数：

1. 如果项目本身是云开发，直接将上面下载下来，放到下面的路径，如果不是云开发，就随便建一个云开发项目，appId选择好就行

2. 将上面下载的文件里面的public放到这个位置 

 3. 右键点击【上传并部署：云端安装依赖】

 4. 然后设置云函数权限

 

四、根据实际业务需求，动态获取参数，并传入小程序中

1. jump-mp.html部分：

function getUrlData() {
      var url = window.location.search;
      console.log('url', url)
      let dataObj = {}
      // if (url.indexOf("?") != -1) {
      //   var str = url.substr(1);
      //   var strs = str.split("&");
      //   for (var i = 0; i < strs.length; i++) {
      //     dataObj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
      //   }
      // }
      let btn = document.getElementById('launch-btn')
      let path = '/xxx/xxx/index' + url;
      btn.setAttribute('path', path);
      btn.addEventListener('launch', function (e) {
        console.log('success', e);
      });
      btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
      });
}
// 页面加载完成事件
window.onload = function () {
    console.log("页面加载完成！");
    getUrlData()
}

async function openWeapp(onBeforeJump) {
      var c = window.c
      const res = await c.callFunction({
        name: 'public',
        data: {
          action: 'getUrlScheme',
          url: '/xxx/xxx/index',
          query: window.location.search.split('?')[1] ? window.location.search.split('?')[1] : ''
        },
      })
      console.warn(res)
      if (onBeforeJump) {
        onBeforeJump()
      }
      location.href = res.result.openlink
}

2. 云函数部分

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  switch (event.action) {
    case 'getUrlScheme': {
      return getUrlScheme(event.url, event.query)
    }
  }

  return 'action not found'
}

async function getUrlScheme(url, query) {
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: url, // <!-- replace -->
      query: query,
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: false,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}

参考：

静态网站 H5 跳小程序 | 微信开放文档

短信跳小程序 | 微信开放文档

微信小程序--云开发静态网站h5跳小程序 - 小小小梅子 - 博客园