在App中打開小程序的功能發(fā)布有一段時間了啦膜,網(wǎng)上關于這個的新聞很多有送,但是技術資料并不多,我們有項目需要嘗試這種方式僧家,特意試了一下雀摘,發(fā)現(xiàn)還是有一些坑,分享給大家八拱。
首先微信官方文檔在微信.開放平臺上阵赠,截圖如下:
一. 開發(fā)前先得做好幾個準備工作:
-
在微信開放平臺上有賬號而且有通過的移動應用。
-
在微信公眾平臺有賬號而且有小程序肌稻,最好發(fā)布為體驗版本
在微信開放平臺把對應的移動應用和小程序建立關聯(lián)清蚀。這個過程來回需要登陸和掃二維碼n次。
二. 在android和ios調(diào)試官方sample打開小程序
注意官方下載的sample配置的證書和bundle id必須和在微信開放平臺對應的移動應用使用的一致爹谭。
打開小程序的核心代碼不多枷邪,里面有幾個參數(shù)必須設置正確
String appId = "wxd930ea5d5a258f4f"; // 填應用AppId
IWXAPI api = WXAPIFactory.createWXAPI(context, appId);
WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
req.userName = "gh_d43f693ca31f"; // 填小程序原始id
req.path = path; //拉起小程序頁面的可帶參路徑,不填默認拉起小程序首頁
req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可選打開 開發(fā)版诺凡,體驗版和正式版
api.sendReq(req);
上面幾個參數(shù)再詳細說一下:
- appId指的是微信開放平臺對應移動應用的appId东揣,而不是小程序的appId,這里注意
-
userName是微信公眾平臺里小程序的原始Id腹泌,是gh開頭的嘶卧。
- req.path就是打開小程序的路徑,傳遞參數(shù)就是通過這個來傳遞凉袱,但是文檔上并沒有說芥吟,試出來的。
req.path="page/index?key1=xxx&key2=yyy";//類似http的url方法來傳遞參數(shù)
*req.miniprogramType選的是開發(fā)和體驗版本专甩,正式版本的小程序沒有測試過运沦。
ios和android類似,不再細說配深。
3. 在小程序端接受App傳遞過來的參數(shù)
上面的App打開的path是'path/index',所以需要把App的onLaunch事件定義在page/index.js上
這里的options.scene是1069携添,這個場景id表示從app打開。
options.query.key1和options.query.key2就是app打開小程序傳遞的參數(shù)篓叶。
4. 關閉小程序回到App并傳遞數(shù)據(jù)
//小程序端通過navigateBackApplication來關閉
f1: function (e) {
wx.navigateBackApplication({
"extraData":"傳遞到app的數(shù)據(jù)"
})
}
其中navigateBackApplication是一個新的函數(shù)烈掠,在微信小程序的API和IDE的自動提示里都沒有羞秤。
Android和iOS通過一個回調(diào)函數(shù)來接受這個參數(shù):
public void onResp(BaseResp resp) {
if (resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) {
WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp;
String extraData =launchMiniProResp.extMsg; // 對應JsApi navigateBackApplication中的extraData字段數(shù)據(jù)
}
}
這里有一個坑,應該是bug或許后期微信會解決左敌。就是Android接受的參數(shù)必須是一個js對象瘾蛋,ios接受的參數(shù)是一個字符串。
也就是在小程序端現(xiàn)在必須這么寫:
//小程序端通過navigateBackApplication來關閉
f1: function (e) {
if(在android下){//wx.getSystemInfo
wx.navigateBackApplication({
"extraData":{key:"傳遞到app的數(shù)據(jù)"}
})
else{
wx.navigateBackApplication({
"extraData":"傳遞到app的數(shù)據(jù)"
})
}
}
大概過程就是這樣矫限,能在app里打開小程序而且還能傳遞參數(shù)這個功能還是非常有用的哺哼,小程序和app很多共通的功能可以只實現(xiàn)一套小程序就可以了。
AppWorker官方已經(jīng)在do_TencentWX 組件集成了這個功能叼风,可以跨平臺使用這個功能取董。