新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：打開小程序

打開小程序
- 打開小程序原理
  - URL Scheme
  - 小程序調(diào)起機制
- scheme 生成工具
- 調(diào)起功能開發(fā)
  - H5 打開小程序
  - 小程序打開小程序
  - 在 web-view 中打開小程序
  - 如何判斷 H5 頁面是否在小程序 web-view 打開
- 小程序來源統(tǒng)計

打開小程序

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

打開小程序原理

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

URL Scheme

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

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

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

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

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

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

scheme 生成工具

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

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

其中需要填寫的參數(shù)，與 scheme 的對應關系如下：

參數(shù)名	對應 scheme 參數(shù)	參數(shù)含義
App Key	appKey	小程序 appKey
啟動頁面	page	打開的小程序頁面路徑
啟動參數(shù)	query	小程序路徑的參數(shù)
進入場景	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)端外跳轉
如果跳轉失敗，引導用戶以其他方式打開

引用

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

調(diào)起方法

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

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

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

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

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

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

調(diào)起失敗
如果用戶沒有安裝百度 APP，或由于某些瀏覽器或 App 禁止跳轉到其他 App，會出現(xiàn)調(diào)起失敗的情況。調(diào)起失敗默認跳轉到我們提供的中間頁，引導用戶用其他方式跳轉小程序。如果想要自己設置調(diào)起失敗跳轉頁面，可以配置 failUrl 參數(shù)，代碼示例如下：
代碼示例
```
   
   
   
    
    
    window.swanInvoke({
    
    
     appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
    
    
     path: 'pages/view/view',
    
    
     // 調(diào)起失敗跳轉的頁面
    
    
     failUrl: 'https://www.baidu.com' 
    
    
    });
   
   
   
```
暫不支持在宿主 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)用的詳細方法，請參考web-view 網(wǎng)頁容器

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

在 H5 頁面中，有兩種方式判斷是否運行在小程序 web-view 中。

第一種是引用 JSSDK，并且調(diào)用接口 swan.webView.getEnv，判斷其回調(diào)參數(shù)的屬性 smartprogram 的值，true 則代表運行在小程序 web-view 中。

第二種是通過環(huán)境標識，userAgent 含有 swan/ 以及 window.name 含有 webswan- 均表示運行在小程序 web-view 中。

代碼示例

 
 
 
  
  
  // 頁面加載時判斷是否在小程序 web-view 環(huán)境中
  
  
  const isSmartApp = function () {
  
  
   // 方法一，需要引用 JSSDK
  
  
   swan.webView.getEnv(function (res) {
  
  
   console.log(res.smartprogram);
  
  
   alert(`當前頁面是否運行在小程序中：${res.smartprogram}`); // true
  
  
   });
  
  
  
  
  
   // 方法二，判斷環(huán)境標識，注意兩個條件均需要，均屬于小程序 web-view 環(huán)境
  
  
   const isWebView = /swan\\//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);
  
  
   alert(`當前頁面是否運行在小程序中：${isWebView}`); // true
  
  
  };

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

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

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

開發(fā)調(diào)起功能時，配置對應的調(diào)起參數(shù)。

在小程序 App() 生命周期函數(shù)的onLaunch和onShow中取得 Scheme 中小程序的相關參數(shù)。
代碼示例

   
   
   
    
    
    App({
    
    
     onShow: function (options) {
    
    
     swan.requrest({
    
    
     // 小程序路徑
    
    
     path: options.path,
    
    
     // 小程序傳入的參數(shù)
    
    
     query: options.query,
    
    
     // 場景值
    
    
     scene: options.scene
    
    
     })
    
    
     },
    
    
    })

兩種調(diào)起能力的配置參數(shù)，與 onShow 中獲取的參數(shù)名稱不完全相同，參數(shù)對應關系如下表所示。

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

場景值說明

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

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

文章題目：創(chuàng)新互聯(lián)百度小程序教程：打開小程序
文章轉載：http://m.fisionsoft.com.cn/article/cdhjjcg.html