百度智能小程序基本原理

百度智能小程序 SmartUI

百度智能小程序綜合能力實例

百度智能小程序工具

閱讀(2.2k) 書簽贊(0) 我要糾錯

百度智能小程序打開小程序

2020-09-05 14:59 更新

我們除了為小程序提供搜索、信息流等流量入口，還為小程序開發(fā)者提供了自主開發(fā)小程序入口的能力，如：掃碼打開小程序，在 H5 中打開智能小程序，在小程序中打開另一小程序。開發(fā)者可以利用這些能力自主開發(fā)小程序入口，提升小程序流量。

打開小程序原理

下面的內(nèi)容可以稍作了解，我們提供了封裝好的調(diào)起能力，可以根據(jù)不同場景直接調(diào)用。

URL Scheme

URL Scheme 是一種 App 間的調(diào)起協(xié)議。App 內(nèi)部注冊協(xié)議后，當(dāng)用戶在瀏覽器或其他 App 內(nèi)點擊相應(yīng)的 scheme 鏈接，就能夠調(diào)起 App 并打開 App 內(nèi)的相關(guān)頁面。下面是“智能小程序示例”小程序的調(diào)起 scheme：

	字段	說明
Scheme	baiduboxapp	scheme協(xié)議。這部分表示使用百度App處理這個url。使用百度App打開小程序時，這部分保持不變。
Source	swan	小程序標(biāo)識，保持不變。用來通知百度App調(diào)起小程序框架。
	appKey	想要打開的小程序appKey。
	page	小程序打開的頁面路徑。頁面路徑可以在小程序代碼app.json文件的pages屬性中取到，常見形式為 "pages/index/index" 。page為空或不正確，則打開首頁。
	query	小程序頁面路徑參數(shù)

一般情況下開發(fā)者不需要手動拼寫 scheme，可以通過調(diào)起協(xié)議生成工具快速生成 scheme，使用方法參考scheme 生成工具。

小程序調(diào)起機(jī)制

小程序調(diào)起機(jī)制如下圖，當(dāng)用戶在 H5 頁面中點擊含有 Scheme 協(xié)議的 url 時：

移動設(shè)備會識別 scheme 協(xié)議，打開百度 APP，并將 url 的 Source 傳遞給百度 APP。
當(dāng)百度 APP 接受到 source 后，識別小程序標(biāo)識，調(diào)起小程序框架。
小程序框架通過 appKey 加載小程序代碼，打開指定小程序。
小程序根據(jù) path 和 query 渲染具體頁面，加載頁面內(nèi)容。

scheme 生成工具

開發(fā)者在商業(yè)投放、上線前驗證等場景下可能需要獲取小程序調(diào)起協(xié)議（scheme），這時可以通過調(diào)起協(xié)議生成工具快速生成小程序 scheme 和二維碼。

生成工具的參數(shù)填寫示例如下：

其中需要填寫的參數(shù)，與 scheme 的對應(yīng)關(guān)系如下：

參數(shù)名	對應(yīng) scheme 參數(shù)	參數(shù)含義
App Key	appKey	小程序 appKey
啟動頁面	page	打開的小程序頁面路徑
啟動參數(shù)	query	小程序路徑的參數(shù)
進(jìn)入場景	from	場景值

調(diào)起功能開發(fā)

根據(jù)小程序打開場景的不同，我們根據(jù)不同場景，封裝了三種能力幫助開發(fā)者為自己的小程序添加入口，分別為：

H5 打開小程序
小程序打開小程序
在 web-view 中打開小程序

使用這三種能力開發(fā)調(diào)起功能，只需要配置必需的小程序參數(shù)，不需要開發(fā)者拼接 scheme。

H5 打開小程序

如果開發(fā)者有自己的 H5 頁面，在 H5 中想要打開小程序時，可以使用我們提供的 H5 通用調(diào)起 SDK——swanInvoke。swanInvoke 功能：

自動拼接 scheme
判斷瀏覽器和系統(tǒng)環(huán)境，選擇最佳的方法調(diào)用 scheme，打開小程序。
同時支持百度 APP 端內(nèi)端外跳轉(zhuǎn)
如果跳轉(zhuǎn)失敗，引導(dǎo)用戶以其他方式打開

引用
像其他 javascript 庫一樣，在 html 中用 script 標(biāo)簽引入。
代碼示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 調(diào)起sdk 文件 -->
    <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js" rel="external nofollow" ></script>
</head>
</html>

調(diào)起方法
在綁定事件中調(diào)用 swanInvoke 方法觸發(fā)調(diào)起功能。
代碼示例

<body>
    <button id='btn'>調(diào)起</button>
    <script type="text/javascript">
    document.getElementById('btn').addEventListener('click', function () {
        window.swanInvoke({
            appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
            path: 'pages/view/view',
            query: {
                id:1,
                type: 'a'
            }
        });
    });
</script> 
</body>

由于原生能力限制，在某些環(huán)境下，scheme 調(diào)起必須由用戶行為觸發(fā)。請盡量綁定用戶事件觸發(fā) swanInvoke 方法。

swanInvoke()方法參數(shù)說明

參數(shù)名	類型	必填	默認(rèn)值	說明
appKey	String	是	-	要打開的小程序 App Key
path	String	否	-	要打開的小程序頁面的路徑
query	Object	否	-	給小程序傳遞的參數(shù)
failUrl	String	否	默認(rèn)的調(diào)起中間頁	調(diào)起小程序失敗后 H5 跳轉(zhuǎn)頁面
timeout	Number	否	200	非百度 APP 內(nèi)打開 H5 頁面調(diào)起小程序，跳轉(zhuǎn)到 failUrl 的延時

這里的 appKey、path、query，對應(yīng) scheme 中的同名參數(shù)（scheme 參數(shù)請參考URL Scheme）。

swanInvoke 方法的 query 可以填寫 Object 類型，不需要拼接成類似“aa=1&bb=2“的字符串形式。具體形式參考代碼示例。

調(diào)起失敗
如果用戶沒有安裝百度 APP，或由于某些瀏覽器或 App 禁止跳轉(zhuǎn)到其他 App，會出現(xiàn)調(diào)起失敗的情況。調(diào)起失敗默認(rèn)跳轉(zhuǎn)到我們提供的中間頁，引導(dǎo)用戶用其他方式跳轉(zhuǎn)小程序。如果想要自己設(shè)置調(diào)起失敗跳轉(zhuǎn)頁面，可以配置 failUrl 參數(shù)，代碼示例如下：
代碼示例
```
window.swanInvoke({
    appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c', 
    path: 'pages/view/view',
    failUrl: 'https://www.baidu.com' // 調(diào)起失敗跳轉(zhuǎn)的頁面 
});
```
暫不支持在宿主 APP 中打開小程序。百度 APP 安卓 11.15 版本以下，不支持非百度域的 H5 頁面打開小程序。

小程序打開小程序

在小程序中打開另一個小程序可以通過組件或 API 的方式。

組件：在小程序中使用組件打開另一個小程序，請參考 navigator 組件中 target="miniProgram"的使用方法。
API：在小程序中使用 API 打開另一個小程序，請參考 swan.navigateToSmartProgram

在 web-view 中打開小程序

在小程序的 web-view 中打開另一個小程序，需要在引入 jssdk 后，調(diào)用 swan.navigateToSmartProgram 接口。

引入 jssdk 和接口調(diào)用的詳細(xì)方法，請參考 web-view 網(wǎng)頁容器

如何判斷 H5 頁面是否在小程序 web-view 打開

H5 運行時，通過 window.navigator.userAgent 獲取瀏覽器 userAgent。當(dāng) userAgent 字符串中包含小程序標(biāo)識：‘swan/’時，則說明當(dāng)前環(huán)境為小程序 web-view。

代碼示例

    // 在 H5 文件中
    let UA = window.navigator.userAgent;
    var regex = /swan\//;
    console.log( regex.test(UA) );// 若為true，則是在小程序的web-view中打開

小程序來源統(tǒng)計

百度已為小程序提供了搜索、信息流等流量入口。這部分流量可以在開發(fā)者平臺——數(shù)據(jù)統(tǒng)計——來源統(tǒng)計中查看。

如果需要統(tǒng)計自行開發(fā)的小程序入口，或當(dāng)開發(fā)者平臺不能滿足統(tǒng)計需求時，可以使用下面的方法，在小程序中手工打點統(tǒng)計。

開發(fā)調(diào)起功能時，配置對應(yīng)的調(diào)起參數(shù)。
在小程序 App() 生命周期函數(shù)的 onLaunch 和 onShow 中取得 Scheme 中小程序的相關(guān)參數(shù)。
代碼示例
```
App({
    onShow: function (options) {
        swan.requrest({
            path: options.path, // 小程序路徑
            query: options.query，// 小程序傳入的參數(shù)
            scene: options.scene // 場景值
        })
    }, 
})
```
兩種調(diào)起能力的配置參數(shù)，與 onShow 中獲取的參數(shù)名稱不完全相同，參數(shù)對應(yīng)關(guān)系如下表所示。

參數(shù)	H5 打開小程序配置參數(shù)名	小程序打開小程序配置參數(shù)名	onShow 中獲取的參數(shù)名
小程序 appKey	appKey	app-id	-
小程序頁面路徑	path	path	path
小程序路徑的參數(shù)	query	extra-data	query
入口場景值	-	-	scene

場景值說明

百度各流量入口自動添加了場景值，標(biāo)識小程序入口。想了解場景值對應(yīng)的小程序入口，請參考場景值文檔。
為防止污染已有的入口場景數(shù)據(jù)，調(diào)起能力的場景值固定，不可配置。使用調(diào)起能力開發(fā)時，如需區(qū)分開發(fā)的多個入口，可以在 query 中添加自定義參數(shù)作以區(qū)分。

對獲取的參數(shù)值進(jìn)行埋點數(shù)據(jù)上報。具體實現(xiàn)方式與其他統(tǒng)計需求，如 UV、PV 等，可以參考手工埋點統(tǒng)計。

以上內(nèi)容是否對您有幫助：

← 百度智能小程序小程序發(fā)布

寫筆記

我要補(bǔ)充

百度智能小程序 打開小程序