建站
咨詢
售后
建站咨詢
新聞中心
- 打開小程序
- 打開小程序原理
- URL Scheme
- 小程序調(diào)起機(jī)制
- scheme 生成工具
- 調(diào)起功能開發(fā)
- H5 打開小程序
- 小程序打開小程序
- 在 web-view 中打開小程序
- 如何判斷 H5 頁面是否在小程序 web-view 打開
- 小程序來源統(tǒng)計(jì)
- 打開小程序原理
打開小程序
我們除了為小程序提供搜索、信息流等流量入口，還為小程序開發(fā)者提供了自主開發(fā)小程序入口的能力，如：掃碼打開小程序，在 H5 中打開智能小程序，在小程序中打開另一小程序。開發(fā)者可以利用這些能力自主開發(fā)小程序入口，提升小程序流量。
打開小程序原理
下面的內(nèi)容可以稍作了解，我們提供了封裝好的調(diào)起能力，可以根據(jù)不同場(chǎng)景直接調(diào)用。
URL Scheme
URL Scheme 是一種 App 間的調(diào)起協(xié)議。App 內(nèi)部注冊(cè)協(xié)議后，當(dāng)用戶在瀏覽器或其他 App 內(nèi)點(diǎn)擊相應(yīng)的 scheme 鏈接，就能夠調(diào)起 App 并打開 App 內(nèi)的相關(guān)頁面。
下面是“智能小程序示例”小程序的調(diào)起 scheme：
| 字段 | 說明 | |
| Scheme | baiduboxapp | scheme協(xié)議。這部分表示使用百度App處理這個(gè)url。使用百度App打開小程序時(shí)，這部分保持不變。 |
| Source | swan | 小程序標(biāo)識(shí)，保持不變。用來通知百度App調(diào)起小程序框架。 |
| appKey | 想要打開的小程序appKey。 | |
| page | 小程序打開的頁面路徑。頁面路徑可以在小程序代碼app.json文件的pages屬性中取到，常見形式為 “pages/index/index” 。page為空或不正確，則打開首頁。 | |
| query | 小程序頁面路徑參數(shù) |
一般情況下開發(fā)者不需要手動(dòng)拼寫 scheme，可以通過調(diào)起協(xié)議生成工具快速生成 scheme，使用方法參考scheme 生成工具。
小程序調(diào)起機(jī)制
小程序調(diào)起機(jī)制如下圖，當(dāng)用戶在 H5 頁面中點(diǎn)擊含有 Scheme 協(xié)議的 url 時(shí)：
- 移動(dòng)設(shè)備會(huì)識(shí)別 scheme 協(xié)議，打開百度 APP，并將 url 的 Source 傳遞給百度 APP。
- 當(dāng)百度 APP 接受到 source 后，識(shí)別小程序標(biāo)識(shí)，調(diào)起小程序框架。
- 小程序框架通過 appKey 加載小程序代碼，打開指定小程序。
- 小程序根據(jù) path 和 query 渲染具體頁面，加載頁面內(nèi)容。
scheme 生成工具
開發(fā)者在商業(yè)投放、上線前驗(yàn)證等場(chǎng)景下可能需要獲取小程序調(diào)起協(xié)議（scheme），這時(shí)可以通過調(diào)起協(xié)議生成工具快速生成小程序 scheme 和二維碼。
生成工具的參數(shù)填寫示例如下：
其中需要填寫的參數(shù)，與 scheme 的對(duì)應(yīng)關(guān)系如下：
| 參數(shù)名 | 對(duì)應(yīng) scheme 參數(shù) | 參數(shù)含義 |
|---|---|---|
| App Key | appKey | 小程序 appKey |
| 啟動(dòng)頁面 | page | 打開的小程序頁面路徑 |
| 啟動(dòng)參數(shù) | query | 小程序路徑的參數(shù) |
| 進(jìn)入場(chǎng)景 | from | 場(chǎng)景值 |
調(diào)起功能開發(fā)
根據(jù)小程序打開場(chǎng)景的不同，我們根據(jù)不同場(chǎng)景，封裝了三種能力幫助開發(fā)者為自己的小程序添加入口，分別為：
- H5 打開小程序
- 小程序打開小程序
- 在 web-view 中打開小程序
使用這三種能力開發(fā)調(diào)起功能，只需要配置必需的小程序參數(shù)，不需要開發(fā)者拼接 scheme。
H5 打開小程序
如果開發(fā)者有自己的 H5 頁面，在 H5 中想要打開小程序時(shí)，可以使用我們提供的 H5 通用調(diào)起 SDK——swanInvoke。
swanInvoke 功能：
- 自動(dòng)拼接 scheme
- 判斷瀏覽器和系統(tǒng)環(huán)境，選擇最佳的方法調(diào)用 scheme，打開小程序。
- 同時(shí)支持百度 APP 端內(nèi)端外跳轉(zhuǎn)
- 如果跳轉(zhuǎn)失敗，引導(dǎo)用戶以其他方式打開
-
引用
像其他 javascript 庫一樣，在 html 中用 script 標(biāo)簽引入。
代碼示例 -
調(diào)起方法
在綁定事件中調(diào)用 swanInvoke 方法觸發(fā)調(diào)起功能。
代碼示例由于原生能力限制，在某些環(huán)境下，scheme 調(diào)起必須由用戶行為觸發(fā)。請(qǐng)盡量綁定用戶事件觸發(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 的延時(shí) |
這里的 appKey、path、query，對(duì)應(yīng) scheme 中的同名參數(shù)（scheme 參數(shù)請(qǐng)參考URL Scheme）。
swanInvoke 方法的 query 可以填寫 Object 類型，不需要拼接成類似“aa=1&bb=2“的字符串形式。具體形式參考代碼示例。
-
調(diào)起失敗
如果用戶沒有安裝百度 APP，或由于某些瀏覽器或 App 禁止跳轉(zhuǎn)到其他 App，會(huì)出現(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',// 調(diào)起失敗跳轉(zhuǎn)的頁面failUrl: 'https://www.baidu.com'});
暫不支持在宿主 APP 中打開小程序。
百度 APP 安卓 11.15 版本以下，不支持非百度域的 H5 頁面打開小程序。
小程序打開小程序
在小程序中打開另一個(gè)小程序可以通過組件或 API 的方式。
-
組件：在小程序中使用組件打開另一個(gè)小程序，請(qǐng)參考navigator 組件中 target=”miniProgram”的使用方法。
-
API：在小程序中使用 API 打開另一個(gè)小程序，請(qǐng)參考swan.navigateToSmartProgram
在 web-view 中打開小程序
在小程序的 web-view 中打開另一個(gè)小程序，需要在引入 jssdk 后，調(diào)用 swan.navigateToSmartProgram 接口。
引入 jssdk 和接口調(diào)用的詳細(xì)方法，請(qǐng)參考web-view 網(wǎng)頁容器
如何判斷 H5 頁面是否在小程序 web-view 打開
在 H5 頁面中，有兩種方式判斷是否運(yùn)行在小程序 web-view 中。
第一種是引用 JSSDK，并且調(diào)用接口 swan.webView.getEnv，判斷其回調(diào)參數(shù)的屬性 smartprogram 的值，true 則代表運(yùn)行在小程序 web-view 中。
第二種是通過環(huán)境標(biāo)識(shí)，userAgent 含有 swan/ 以及 window.name 含有 webswan- 均表示運(yùn)行在小程序 web-view 中。
代碼示例
// 頁面加載時(shí)判斷是否在小程序 web-view 環(huán)境中const isSmartApp = function () {// 方法一，需要引用 JSSDKswan.webView.getEnv(function (res) {console.log(res.smartprogram);alert(`當(dāng)前頁面是否運(yùn)行在小程序中：${res.smartprogram}`); // true});// 方法二，判斷環(huán)境標(biāo)識(shí)，注意兩個(gè)條件均需要，均屬于小程序 web-view 環(huán)境const isWebView = /swan\\//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);alert(`當(dāng)前頁面是否運(yùn)行在小程序中：${isWebView}`); // true};
小程序來源統(tǒng)計(jì)
百度已為小程序提供了搜索、信息流等流量入口。這部分流量可以在開發(fā)者平臺(tái)——數(shù)據(jù)統(tǒng)計(jì)——來源統(tǒng)計(jì)中查看。
如果需要統(tǒng)計(jì)自行開發(fā)的小程序入口，或當(dāng)開發(fā)者平臺(tái)不能滿足統(tǒng)計(jì)需求時(shí)，可以使用下面的方法，在小程序中手工打點(diǎn)統(tǒng)計(jì)。
-
開發(fā)調(diào)起功能時(shí)，配置對(duì)應(yīng)的調(diào)起參數(shù)。
-
在小程序 App() 生命周期函數(shù)的
onLaunch和onShow中取得 Scheme 中小程序的相關(guān)參數(shù)。
代碼示例App({onShow: function (options) {swan.requrest({// 小程序路徑path: options.path,// 小程序傳入的參數(shù)query: options.query,// 場(chǎng)景值scene: options.scene})},})
兩種調(diào)起能力的配置參數(shù)，與 onShow 中獲取的參數(shù)名稱不完全相同，參數(shù)對(duì)應(yīng)關(guān)系如下表所示。
| 參數(shù) | H5 打開小程序配置參數(shù)名 | 小程序打開小程序配置參數(shù)名 | onShow 中獲取的參數(shù)名 |
|---|---|---|---|
| 小程序 appKey | appKey | app-id | - |
| 小程序頁面路徑 | path | path | path |
| 小程序路徑的參數(shù) | query | extra-data | query |
| 入口場(chǎng)景值 | - | - | scene |
場(chǎng)景值說明
- 百度各流量入口自動(dòng)添加了場(chǎng)景值，標(biāo)識(shí)小程序入口。想了解場(chǎng)景值對(duì)應(yīng)的小程序入口，請(qǐng)參考場(chǎng)景值文檔。
- 為防止污染已有的入口場(chǎng)景數(shù)據(jù)，調(diào)起能力的場(chǎng)景值固定，不可配置。使用調(diào)起能力開發(fā)時(shí)，如需區(qū)分開發(fā)的多個(gè)入口，可以在 query 中添加自定義參數(shù)作以區(qū)分。
- 對(duì)獲取的參數(shù)值進(jìn)行埋點(diǎn)數(shù)據(jù)上報(bào)。具體實(shí)現(xiàn)方式與其他統(tǒng)計(jì)需求，如 UV、PV 等，可以參考手工埋點(diǎn)統(tǒng)計(jì)。
當(dāng)前名稱：創(chuàng)新互聯(lián)百度小程序教程：打開小程序
URL鏈接：http://www.5511xx.com/article/cdhjjcg.html
