开发笔记--H5页面跳转小程序

1,997 阅读2分钟

需求:

用户在任何环境下(pc除外),点击直播都能跳转到小程序对应直播间

分析:

环境包括:微信浏览器,小程序,其他浏览器,移动掌厅

微信浏览器:可使用微信开放标签或云函数
小程序:可直接调用 wx.miniProgram.navigateTo
其他浏览器:云函数
移动掌厅:掌厅内部方法(省略)

以上分析来看,主要还是通过云函数来实现较为方便,开搞

开发

一、创建云函数

开通云函数可自行研究,一般新建项目中都会有cloudfunctions文件夹,如果当前项目没有此文件夹可以新建文件夹,然后右键新建云函数,如果右键没有此菜单选项,可以直接新建个小程序,复制里面的文件夹即可

1636363969(1).png

这是创建后的目录结构

image.png

h5跳小程序,主要是通过小程序scheme码进行跳转的,由于需求是需要动态的scheme码,只能使用云函数来获取了,我们更改下入口函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event) => {
    return cloud.openapi.urlscheme.generate({
      jumpWxa: {
        path: event.path,
        query: event.query,
      },
      isExpire: true,
      expire_time: Math.round(new Date().getTime() / 1000) + 3600
    })
}

cloud.openapi.urlscheme.generate()的具体调用可以参考官方文档,event为调用时传入的参数

二、上传云函数

先在云函数权限中修改一下安全规则,允许所有用户访问

image.png

    "*": {
        "invoke": "auth != null"
    },
    "public": {
        "invoke": true
    }
}

直接上传

1636365528(1).png

三、用户端跳转公共方法

function getCurrentEnv() {
    let ua = navigator.userAgent.toLowerCase();
    return new Promise((resolve, reject) => {
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            wx.miniProgram.getEnv((res) => {
                if (res.miniprogram) {
                    //微信小程序
                    resolve('1')
                } else {
                    //微信浏览器
                    resolve('2')
                }
            })
        }  else {
            //其他外部浏览器
            resolve('4')
        }
    })
};
function goWxminiprog(path) {
    getCurrentEnv().then(env => {   //获取当前环境函数,
        if (env === '1') {   //小程序
            wx.miniProgram.navigateTo({ url: path });
        } 
        else{
            wx.config({
                // debug: true, // 调试时可开启
                appId: '**********', // <!-- 替换掉即可 -->
                timestamp: 0, // 必填,填任意数字即可
                nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
                signature: 'signature', // 必填,填任意非空字符串即可
                jsApiList: ['chooseImage'], // 必填,随意一个接口即可 
                openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
              })
              var c = new cloud.Cloud({
                // 必填,表示是未登录模式
                identityless: true,
                // 资源方 AppID
                resourceAppid: '**********', <!-- 替换掉即可 -->
                // 资源方环境 ID
                resourceEnv: '**********',<!-- 替换掉即可 -->
              })
              let data = path.split("?")
              path = data[0][0]==="/"?data[0].substr(1):data[0]  //去掉"/"
              let query = data[1]||''
              console.log('path:'+path)
              console.log('query:'+query)
              c.init().then(()=>{
                c.callFunction({
                    name: 'openMini',
                    data: {
                      path:path,
                      query:query  //参数的格式为"a=1&b=2"
                    },
                  }).then(res=>{
                    console.warn(res)
                    location.href = res.result.openlink
                  })
              })
        }
    }).catch(()=>{
        console.log('当前环境不支持跳转小程序')
    });
};
export default goWxminiprog

入参为完整跳转路径,包含参数,callFunctionname为云函数名称,data为云函数的参数,即云函数入口函数中的event参数, 一切就绪,来调用一下

image.png

可以看到,跳转的路径以及参数都已拿到

image.png 成功!!!