首页 > 编程语言> > 外部浏览器 H5 跳转小程序（mpvue 踩坑云函数）

外部浏览器 H5 跳转小程序（mpvue 踩坑云函数）

2021-07-11 23:59:55 作者：互联网

关于外展推广的那点事
背景目前的vue公众号项目有个投放需求投放位置在非微信端为了转化效率我们使用了小程序要在用户购买后可以直接跳转小程序使得用户的流程更加顺畅但是在 H5 跳转小程序的时候尤其是在建立云函数的时候踩了很多坑

期望效果:https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

开发环境 H5 （vue）；小程序（mpvue）；

H5 代码如下

// index.html 文件还需要引入一下 云开发文件哦

//<!-- 云开发Web SDK -->
<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

<template>
  <div class="page full">
    <div id="public-web-container" class="hidden">
      <p class="">正在打开 “小程序”...</p> <!-- replace -->
      <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>
    </div>
  </div>
</template>

<script>
export default {
  name: "h5Tomimidemo",
  data(){
    return{
      cloudData:null
    }
  },
  mounted() {
    let that = this
      this.docReady(async function() {

          that.cloudData = new cloud.Cloud({
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: '小程序ID', // <!-- replace -->
            // 资源方环境 ID
            resourceEnv: '云开发环境ID', // <!-- replace 云开发环境ID 所在位置在 微信开发者工具 =》 云开发 =》 设置 =》 环境设置 =》 环境ID  -->
          })
          await that.cloudData.init()  /// 初始化 cloud
          try {
            await that.openWeapp(() => {})   // 自动触发
          } catch (e) {
            throw e
          }
      })
  },
  methods:{

    docReady(fn) {
      if (document.readyState === 'complete' || document.readyState === 'interactive') {
        fn()
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    },


    async openWeapp(onBeforeJump) {
      const res = await this.cloudData.callFunction({
        name: 'public',  //  要调用的云函数 名称
        data: {
          action: 'getUrlScheme',
          pageInfo:{  ///  这是你要跳转的 小程序页面信息
            path:'/pages/FundCalculator/main',
            query:'qqq=123'
          }
        },
      })
      console.warn(res)   /// res 则为返回值
      if (onBeforeJump) {
        onBeforeJump()
      }
      location.href = res.result.openlink  /// openlink 就是生成的 小程序链接
    }
  }
}
</script>

mpvue 小程序代码如下

//  小程序我们 需要在 main.js 文件中 新增
wx.cloud.init({ // 我查的意思是开启 云函数功能 但是不写能不能成 我也不清楚了 感觉和这个关系不大 望读者可以测试一下
  traceUser: true
})

接下来我们去下载微信提供的云函数进行导入下载地址为 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

如果找不到下载按钮可以 ctrl + f 搜索云函数有个云函数 public: 点击下载即可我们需要的是
cloudfunctions 这个文件夹把这个文件夹复制丢到 src 文件

注：直接下载下来的是不支持自定义跳转地址的如果想实现动态小程序地址把 public/index.js 文件内容修改如下

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

cloud.init()

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

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

  return 'action not found'
}

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

然后配置云函数列表

//  小程序我们 在 project.config.json 文件中 新增

  "cloudfunctionRoot": "cloudfunctions", // cloudfunctions 这个就是你 刚刚复制的那个文件的文件名
//  和你的appID 同级

然后你就可以npm run dev 跑一下你的小程序需要查看四个地方生成的 dist文件
1、是否有生成了project.config.json
2、是否有生成了project.config.json 是否包含你设置的 “cloudfunctionRoot” 参数（大多数情况没有生成此参数）
3、文件名后面是否有当前环境如果没有请检查第二项文件名后面是否有当前环境如果没有请检查第二项
4、cloudfunctions 文件下 public 中的文件内容和你刚刚复制的文件内容是否一致（目前我这边每次编译完只能生成其中两个解决办法就是你手动把你缺失的文件直接丢进对应的文件夹就好了）

检查无误我们便可上传这个云函数了
第一步
微信开发者工具打开云开发选择=》云函数 =》云函数权限 =》自定义安全规则修改为以下内容（目的放开 public 云函数登录权限支持未登录访问）

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

第二步
右击 public 点击上传并部署：云端安装依赖不上传 node_modules

第三步
微信开发者工具打开云开发选择=》云函数 =》云函数列表 =》查看是否有你刚刚上传的函数函数状态是否为已部署

标签：mpvue,函数,pageInfo,程序,H5,public,跳转,event,cloud
来源： https://blog.csdn.net/qq_43229374/article/details/118661201

外部浏览器 H5 跳转小程序 （mpvue 踩坑 云函数）

外部浏览器 H5 跳转小程序（mpvue 踩坑云函数）