外部链接跳转微信小程序

外部链接跳转微信小程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpcKl0T3-1621677958755)(image-20210416142912242.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LzC7TExH-1621677958761)(image-20210416143524736.png)]

测试用例

https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IJhVZSmJ-1621677958762)(image-20210416153801742.png)]

H5在微信端被打开

可以使用

 <div id="wechat-web-container" class="hidden">
        <p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace -->
        <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
        <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
            <!-- path 需要手动加.html -->
          <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>
      </div>

在非微信环境就需要使用

<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" onclick="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>

1. 我们需要根据环境判断,第一是手机端还是pc端
2. 是在微信的浏览器还是,手机外部的浏览器

//判断逻辑
 docReady(async function() {
        var ua = navigator.userAgent.toLowerCase()
        var isWXWork = ua.match(/wxwork/i) == 'wxwork'
        var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
        var isMobile = false
        var isDesktop = false
        if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
          isMobile = true
        } else {
          isDesktop = true
        }

        if (isWeixin) {
          //在微信浏览器打开,显示<wx-open-launch-weapp>元素
          var launchBtn = document.getElementById('launch-btn')
          launchBtn.addEventListener('ready', function (e) {
            console.log('开放标签 ready')
          })
          launchBtn.addEventListener('launch', function (e) {
            console.log('开放标签 success')
          })
          launchBtn.addEventListener('error', function (e) {
            console.log('开放标签 fail', e.detail)
          })
            //微信的api接口
          wx.config({
            debug: true, // 调试时可开启
            appId: '小程序 AppID', // <!-- replace -->
            timestamp: 0, // 必填，填任意数字即可
            nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
            signature: 'signature', // 必填，填任意非空字符串即可
            jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
            openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
          })
        } else if (isDesktop) {
          // 在 pc 上则给提示引导到手机端打开
          //显示请在手机端打开
        } else{
            
			//在手机外部浏览器打开的,调用跳转URL Scheme
            //这个就需要调起localhost.href="weixin://dl/business/?ticket=l92578fd8404e0d4e3e975f910fa43f3a"
            //元素的显示隐藏(忽略)
             var c = new cloud.Cloud({    //事情使用的是微信的云开发方法
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: '小程序 AppID', // <!-- replace -->
            // 资源方环境 ID
            resourceEnv: '云开发环境 ID', // <!-- replace -->
          })
          await c.init()
          window.c = c
          var buttonEl = document.getElementById('public-web-jump-button')
          var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
          try {
            // 页面开始就触发openWeapp函数
            await openWeapp(() => {
              //去除loading图标
              buttonEl.classList.remove('weui-btn_loading')
              //隐藏weui-btn_loding元素
              buttonLoadingEl.classList.add('hidden')
            })
          } catch (e) {
            buttonEl.classList.remove('weui-btn_loading')
            buttonLoadingEl.classList.add('hidden')
            throw e
          }
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oygFwPfv-1621677958774)(image-20210416153525648.png)]

外部跳转处理函数

 async function openWeapp(onBeforeJump) {
        var c = window.c
        const res = await c.callFunction({   //云开发
          name: 'public',
          data: {
            action: 'getUrlScheme',
          },
        })
        console.log(res);  
     	//{errMsg: "cloud.callFunction:ok"
		//requestID: "46bd31f4-9e89-11eb-8a7e-525400549ebe"
		//result:{
		//errCode: 0
		//errMsg: "openapi.urlscheme.generate:ok"
		//openlink: "weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6"}
     	//}
        console.warn(res)
        if (onBeforeJump) {
          onBeforeJump()
        }
        location.href = res.result.openlink   //"weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6"
      }

总结

前端需要的获取的数据

微信客户端跳转小程序需要的(直接写死在标签上面)	描述	例子
username	小程序原始账号 ID（gh_ 开头的）	“gh_d43f693ca31f”
path	要跳转到的页面路径	“/page/component/index”

wx.config()	描述	例子
appId	‘小程序 AppID’	‘wxe5f52902cf4de896’
timestamp	必填，填任意数字即可	0
nonceStr	必填，填任意非空字符串即可	‘nonceStr’
signature	必填，填任意非空字符串即可	‘signature’
jsApiList	必填，随意一个接口即可	[‘chooseImage’]

外部浏览器跳转小程序需要=>URL Scheme	描述	例子
result.openlink	调用location.href跳转方法实现跳转到微信小程序	“weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6”

云开发(可以忽略,我们自己本来有服务) 根据上面示例

https://developers.weixin.qq.com/community/business/doc/000e26815e8de0db1ecae5a035b00d 云开发快速入门

1. 创建并部署云函数public

2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BlMZiZpn-1621677958776)(image-20210416160646073.png)]

3. index.js 写下云函数代码

   // 云函数入口文件
   const cloud = require('wx-server-sdk')
   
   cloud.init()
   
   // 云函数入口函数
   exports.main = async (event, context) => {
     const wxContext = cloud.getWXContext()
   
     switch (event.action) {
       case 'getUrlScheme': {
         return getUrlScheme()
       }
     }
   
     return 'action not found'
   }
   
   async function getUrlScheme() {
     return cloud.openapi.urlscheme.generate({
       jumpWxa: {
         path: '/page/component/index', // <!-- replace -->
         query: '',
       },
       // 如果想不过期则置为 false，并可以存到数据库
       isExpire: false,
       // 一分钟有效期
       expireTime: parseInt(Date.now() / 1000 + 60),
     })
   }
   
   

4. 编写好了，右键public

   

5. 接下来最后一步
   把开始写的h5页面部署到云服务的静态网站里
   云开发 -> 更多 -> 静态网站 -> 文件管理 -> 上传文件（上传刚写好的h5）

6. 上传好了，右方有个详情字样，点击后复制下载链接，并把该链接在手机的浏览器打开