最近，非個人主體的認證的小程序，可以直接在html頁面中打開，這個權限還挺有用的，不僅適用於微信內部的瀏覽器，而且還可以在外部瀏覽器或者app中打開，比如UC瀏覽器、華為瀏覽器等。這里注意一下，官方特別說明：是使用雲開發托管的網頁。
開通條件：
- 准備好非個人主體的認證的小程序
- 開通雲開發
- 使用雲開托管靜態網站
方法也很簡單，在正常的公眾號網頁開發中，引入公眾號JSSDK，
<!-- 公眾號 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
然后在wx.config可以傳入小程序 AppID 並且不需計算簽名，也就是免鑒權即可使用跳轉小程序的能力。
這里有個官方的例子：https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html ，可以直接復制到任意瀏覽器中打開。網頁會判斷所在的環境來覺得采用哪種跳轉方式，如檢測到微信客戶端內，則免鑒權使用開放標簽跳轉，如檢測到在外部瀏覽器或 App，則使用 URL Scheme(Deep Link) 跳轉小程序。
以下幾個參數必須要配置正確：
- 小程序 AppID：填入你的小程序 AppID
- 雲開發環境 ID：填入你的開通了靜態網站托管的雲開發環境 ID
- 小程序原始賬號 ID：填入你的小程序原始賬號 ID（gh_ 開頭）
- 小程序頁面路徑：填入要跳轉到的小程序的頁面路徑
- 小程序名稱：填入要跳轉到的小程序名稱
上面鏈接的例子，官方提（關注）正義的程序猿公眾號供了代碼，把replace的地方替換成你自己的：
jump-mp.html
<html>
<head>
<title>打開小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script>
window.onerror = e => {
console.error(e)
alert('發生錯誤' + e)
}
</script>
<!-- weui 樣式 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
<!-- 調試用的移動端 console -->
<!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
<!-- <script>eruda.init();</script> -->
<!-- 公眾號 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>
<script>
function docReady(fn) {
if (document.readyState === 'complete' || document.readyState === 'interactive') {
fn()
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
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) {
var containerEl = document.getElementById('wechat-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'wechat-web-container')
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)
})
wx.config({
// debug: true, // 調試時可開啟
appId: '小程序 AppID', // <!-- replace -->
timestamp: 0, // 必填，填任意數字即可
nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
signature: 'signature', // 必填，填任意非空字符串即可
jsApiList: ['chooseImage'], // 必填，隨意一個接口即可
openTagList:['wx-open-launch-weapp'], // 填入打開小程序的開放標簽名
})
} else if (isDesktop) {
// 在 pc 上則給提示引導到手機端打開
var containerEl = document.getElementById('desktop-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'desktop-web-container')
} else {
var containerEl = document.getElementById('public-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'public-web-container')
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 {
await openWeapp(() => {
buttonEl.classList.remove('weui-btn_loading')
buttonLoadingEl.classList.add('hidden')
})
} catch (e) {
buttonEl.classList.remove('weui-btn_loading')
buttonLoadingEl.classList.add('hidden')
throw e
}
}
})
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: 'public',
data: {
action: 'getUrlScheme',
},
})
console.warn(res)
if (onBeforeJump) {
onBeforeJump()
}
location.href = res.result.openlink
}
</script>
<style>
/**
* 樣式不重要，可以直接忽略
**/
</style>
</head>
<body>
<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" 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>
<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 -->
<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="desktop-web-container" class="hidden">
<p class="">請在手機打開網頁鏈接</p>
</div>
</div>
</body>
</html>
上面代碼，判斷在微信公眾號里面（關注）正義的程序猿，會使用wx-open-launch-weapp開放標簽，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html ，詳情可以看這個文檔。
開放標簽微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上。
如果是在手機瀏覽器中，就使用Cloud函數調用獲取指定的Url Scheme（deeplink），喚起微信，步驟打開就是這樣。
雲函數
-
新建一個雲函數
-
在雲開發控制台中的
設置 -> 權限設置中，將對應開通了靜態網站的雲環境開啟未登錄模式訪問 -
在雲開發控制台中的
雲函數 -> 權限設置中，配置安全規則，選擇“允許所有用戶訪問”的模板並確認
雲函數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(event.options)
}
}
return 'action not found'
}
async function getUrlScheme(options) {
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: '/page/component/index', // <!-- replace -->
query: '',
},
// 如果想不過期則置為 false，並可以存到數據庫
isExpire: true,
// 一分鍾有效期
expireTime: parseInt(Date.now() / 1000 + 60),
})
}
體驗效果如下：
微信瀏覽器中：
其他外部瀏覽器中：
至此，整個流程就差不多是這樣。這個功能個人小程序暫時無法使用，但是也有方法解決，比如通過企業認證小程序跳個人小程序，還有文章中也提到通過URL Scheme跳轉，而URL Scheme本身就已經很強大了，這里是不是會有一些可乘之機呢？我相信，這一功能的發放，對於靈敏的人早已發現新的玩法！這就是賺錢的機會啊。