概述

起因是小弟接了个需求,说是做一个h5跳转到小程序的页面,我一脸懵逼,
微信小程序不是封闭的吗?还能跳转进去,然后需求就给我丢了个地址),
看完后确实可以,然后就开始了我的踩坑之旅
复制代码

微信官方地址:
developers.weixin.qq.com/miniprogram…

1.普通h5跳转微信小程序

1.1 前期准备

二个必须: 1.非个人主体并且已认证的(微信认证)小程序 2.必须开通云开发权限一点注意: 代码不全,只是把注意的点列出来(请自行到微信官方下载例子,上面的链接),注意注释的东西(那都是踩过的坑)

1.2 话不多说上代码

//需要引入的sdk  这里注意之前如果引入过微信的1.4.x版本的sdk记得删掉 只能留一个1.6.0
<!-- weui 样式 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 云开发 Web SDK -->
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

// html部分
<a
        id="public-web-jump-button"
        href="javascript:"
        class="weui-btn weui-btn_primary weui-btn_loading"
        @click="openWeapp()"
      >
        <span
          id="public-web-jump-button-loading"
          class="weui-primary-loading weui-primary-loading_transparent"
          ><i class="weui-primary-loading__dot"></i
        ></span>
        打开小程序
      </a>
      
//js 部分
// 初始化云函数
var c = new cloud.Cloud({
  // 必填，表示是未登录模式
  identityless: true,
  // 这个是wx小程序的id wx888888888888
  resourceAppid: "", // <!-- replace -->
  //这个是你的云函数的id
  resourceEnv: "", // <!-- replace -->
});
await c.init();
window.c = c;
// 跳转微信小程序
async openWeapp(onBeforeJump) {
  var c = window.c;
  // 这是调用云函数里面的方法
  const res = await c.callFunction({
    name: "public", // 云函数方法名
    data: {
      action: "getUrlScheme", //云函数里的case值
      path: this.path,  // 示例 '/page/index/index'
      query: location.hash.split("?")[1], // 动态传参,因为小弟是hash路由的
    },
  });
  console.warn(res);
  if (onBeforeJump) { //这个是跳转前你要执行的方法
    onBeforeJump();
  }
  location.href = res.result.openlink;
},
复制代码

// 微信云函数部分
// 云函数入口文件
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.options)
    }
  }

  return 'action not found'
}

async function getUrlScheme(options) {
/**
    注意这里是不能直接拿options.query 直接赋值给jumpWxa 里的query会报错
    因为他会默认把这个进行转码了
    需要进行一步decodeURIComponent(options.query)
    如果你的需求不是动态传参请当我在放屁
*/
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: options.path || '/page/index/index', // <!-- replace -->
      query: decodeURIComponent(options.query),
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: true,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}

复制代码