小程式多端差異調研報告(微信,支付寶,頭條,QQ)
- 2019 年 11 月 2 日
- 筆記
已經使用uni-app開發並發布了一個跨端小程式啦,嘻嘻嘻!
? 須知
- 這是一份詳細的小程式各特性各端真機調研對比報告
- 測試機:iPhone7 plus IOS 12.4.1
- 客戶端:微信7.0.5,支付寶10.1.72,今日頭條7.4.0,抖音8.1.0,QQ8.1.5.461
- ?️ 百度小程式只有商戶才能註冊,個人開發者無法註冊,沒有appid功能受限(如百度開發者工具無法使用預覽功能導致無法真機測試),所以暫時不測百度小程式
用戶資訊授權
- 授權方式:
- 授權資訊清除方式:
- 【微信】刪除小程式即可清除授權資訊
- 【支付寶】我的-設置-安全設置-帳號授權
- 【今日頭條】我的-系統設置-清除快取。【抖音】未找到清除方法
- 【QQ】未找到清除方法(據說開放小程式的QQ版本尚未灰度發布)
小程式登錄
- 【微信】wx.login
- 【QQ】qq.login 基本同微信
- 【支付寶】my.getAuthCode
- 【頭條】大致同微信,未找到模型文檔
分享
- 行為:
- 【微信】直接調起聊天對話列表進行選擇
- 【QQ】調起分享渠道列表:
- QQ好友
- QQ空間
- 點右上角三個點調起的列表還有微信好友和朋友圈兩個項,在微信中打開qq小程式是走中間頁
- 【支付寶】調起分享渠道列表:
- 支付寶朋友圈
- 支付寶聯繫人
- 微信好友|QQ好友(保存支付寶生成的分享圖片後打開支付寶掃碼)
- 釘釘好友(中間頁自動打開支付寶小程式,中間頁不自動關閉)
- 新浪微博(中間頁自動打開支付寶小程式,和釘釘一個中間頁)
- 【頭條】調起分享渠道列列表:
- 轉發到頭條
- 微信好友|微信朋友圈(生成口令,複製口令後打開今日頭條彈出識別彈窗)
- QQ|QQ空間(打開中間頁,點擊打開(QQ空間點了沒反應),出現另一個中間頁,自動打開AppStore,再點打開調起今日頭條,最後居然沒打開那個小程式?!!!)
- 【抖音】調起分享渠道列列表:
- 多閃好友
- 微信好友|微信朋友圈|QQ好友|QQ空間(生成抖音碼圖片,打開抖音掃碼識別)
- 【頭條】webview的轉發暫未支援:
- 【今日頭條】能轉發,但轉發的鏈接點擊後總是提示載入失敗!也可能是小程式未發布的原因,掃uni-app官方demo進行 webview轉發是能正常打開的
- 【抖音】不支援轉發,右上角膠囊只有一個關閉按鈕
跳轉到其他小程式
- 【微信】支援(navigateToMiniProgramAppIdList + navigateToMiniProgram)
- 【QQ】支援
- 【頭條】支援(navigateToMiniProgramAppIdList + navigateToMiniProgram)
- 【支付寶】支援(後台配置 + navigateToMiniProgram)
?️ ️QQ,支付寶和頭條未真機驗證,因為須要一個其他小程式的appId
客服會話
- 【微信】支援(button open-type="contact")
- 【QQ】支援,須用戶加一個客服機器人為好友
- 【支付寶】支援(contact-button)
- 【頭條】不支援。
支付
? ️QQ,支付寶和頭條未真機驗證,因為支付介面只有商戶才有許可權
地理位置
- 【微信】支援(須在app.json中配置permission字端),用戶拒絕授權後再次調用不再出詢問彈窗,而是直接走fail回調
- 【QQ】支援。真機行為同微信。QQ開發者工具上拒絕授權再次調用仍會出詢問彈窗
- 【頭條】支援,同微信
- 【支付寶】支援,用戶拒絕授權後再次調用繼續出詢問彈窗
影片播放
複製文字
- 行為:
- 【微信】【QQ】複製成功後有一個默認的複製成功toast且無法控制
- 【支付寶】【頭條】複製成功後沒有toast
- 許可權:
- 【支付寶】my.setClipboard 此功能僅支援企業支付寶帳號。實際情況是:在IDE上個人帳號是可以複製的,但在真機上調用就會報
ERROR 4: 無權調用該介面
錯誤 - 【微信】【QQ】【頭條】無限制
- 【支付寶】my.setClipboard 此功能僅支援企業支付寶帳號。實際情況是:在IDE上個人帳號是可以複製的,但在真機上調用就會報
打電話
【微信】【QQ】【支付寶】【頭條】都支援
收貨地址
- 【微信】支援
- 【QQ】不支援
- 【頭條】支援(實測【今日頭條】支援,【抖音】不支援)
- 【支付寶】支援。但僅商戶才有使用許可權。且目前 my.getAddress 介面暫不支援在開發者工具調試和真機調試,僅支援真機預覽
相機/圖片相關
- 拍照/相冊選圖片
- 【微信】【QQ】支援
- 【支付寶】支援。IDE上會彈一個相冊授權詢問彈窗,真機上並沒有彈窗
- 【頭條】支援。但會彈出兩個詢問彈窗(相機許可權,相冊許可權)
- 拍攝/相冊選影片
- 【微信】【QQ】支援
- 【支付寶】支援。IDE上會彈一個相冊授權詢問彈窗,真機上並沒有彈窗。須調用 my.chooseVideo(文檔未找到),uni.chooseVideo會報錯
- 【頭條】支援。但會彈出兩個詢問彈窗(相機許可權,相冊許可權)
- ⚠️chooseVideo的maxDuration選項在【微信】和【支付寶】是只限制拍攝時長,在【頭條】是同時限制相冊選擇影片時長和拍攝時長
-
【微信】【QQ】【支付寶】【頭條】都支援
- 保存圖片到相冊
- 【微信】【QQ】【頭條】支援,彈窗僅詢問一次
- 【支付寶】tt.saveImageToPhotosAlbum 在IDE上報錯
tt.saveImageToPhotosAlbum is not a function
,在真機上報錯無權調用該介面
,文檔未提及,猜測是僅商戶可用,且不支援在開發者工具調試和真機調試,僅支援真機預覽
介面返回值差異
// 支付寶 { 'nickName': 'test', 'gender': 'm', 'city': '北京市', 'province': '北京' 'countryCode': 'CN', 'avatar': 'https://tfs.alipayobjects.com/images/partner/T1_38eXnRiXXXXXXXX', 'code': '10000', 'msg': 'Success', } // 微信 { 'nickName': 'test', 'gender': 1, 'city': 'Xinxiang', 'province': 'Henan', 'country': 'China', 'avatarUrl': 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJCzUl7llykqrMLicpULvVfkbbL2bVDua4tI8ibjxq5E9ib1oPW3F4QazLIUdS2GsFMAGnrWSYjN05Ew/132' 'language': 'zh_CN', } // QQ { 'nickName': 'test', 'gender': 1, 'city': '新鄉', 'province': '河南' 'country': '中國', 'avatarUrl': 'https://thirdqq.qlogo.cn/qqapp/1108100302/D64611B2AE700324589177922EEBA5F4/100', 'language': 'zh_CN', } // 頭條系(今日頭條,抖音,皮皮蝦,西瓜影片分別取各自用戶資訊) { 'nickName': 'test', 'gender': 1, 'city': '新鄉市', 'province': '河南省' 'country': '中國', 'avatarUrl': 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM5uibSytRCXFs0Y3xSpdy12thibjWIoMrBIsf7FiaPp2ibnFg/0', 'language': '', }
// 微信 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html [ 'scope.userInfo', // 用戶資訊 'scope.userLocation', // 地理位置 'scope.address', // 通訊地址 'scope.record', // 錄音功能 'scope.camera', // 攝影機 'scope.writePhotosAlbum', // 保存到相冊 'scope.userLocationBackground', // 後台定位 'scope.invoiceTitle', // 發票抬頭 'scope.invoice', // 獲取發票 'scope.werun', // 微信運動步數 ] // 頭條 https://developer.toutiao.com/dev/miniapp/uQjMy4CNyIjL0IjM [ 'scope.userInfo', // 用戶資訊 'scope.userLocation', // 地理位置 'scope.address', // 通訊地址 'scope.record', // 錄音功能 'scope.camera', // 攝影機 'scope.album', // *保存到相冊* ] // 支付寶 https://docs.alipay.com/mini/api/xmk3ml#-1 [ 'userInfo', // 用戶資訊 'location', // 地理位置 'audioRecord', // 錄音功能 'camera', // 攝影機 'album', // 保存到相冊 ] // QQ https://q.qq.com/wiki/develop/game/frame/open-ability/authorize.html [ 'scope.userInfo', // 用戶資訊 'scope.userLocation', // 地理位置 'scope.qqrun', // QQ運動步數 'scope.writePhotosAlbum', // 保存到相冊 'scope.appMsgSubscribed', // 訂閱消息 ]
主要入口
- 【微信】
- 首屏對話列表下拉
- 掃一掃
- 發現->小程式
- 搜索
- 【支付寶】
- 掃一掃
- 搜索
- 首頁我的小程式
- 【今日頭條】
- 我的->掃一掃
- 搜索
- 【抖音】
- 搜索->掃一掃
- 【QQ】
- 掃一掃
? 頭條小程式陷阱
- 目前僅在頭條Android版本7.2.9及以上版本支援真機調試功能。iOS暫時不支援真機調試
- 抖音App的小程式上沒有打開調試器選項,右上角膠囊只有一個關閉按鈕
? 支付寶小程式陷阱
- my.getOpenUserInfo用於獲取支付寶會員基礎資訊,只能在真機上調試,無法在 IDE 中調試,也就是只要有用戶授權的頁面都需要推送到真機上開發調試!
- 支付寶授權平台只返回tocken和uid,由開發者自己維護session有效期,
checkSession
方法不可用 - 打開調試的調試器面板在調起用戶授權彈窗時會消失,此時須使用真機調試
? uni-app 陷阱
- uni.getSetting,文檔上說【支付寶】支援,調用卻報錯
支付寶小程式,暫不支援getSetting
,而直接調支付寶的api my.getSetting 確是支援的 - uni.chooseVideo,文檔上說【支付寶】支援,調用卻報錯
支付寶小程式,暫不支援chooseVideo
,而直接調支付寶的api my.chooseVideo(文檔未找到) 確是支援的 - uni.chooseAddress,文檔上說【支付寶】不支援,實際上是支援的,只是需要調用 my.getAddress,且僅商戶才能使用
- uni.getImageInfo,文檔上說【頭條】支援,調用卻報錯
頭條小程式,暫不支援getImageInfo
,而直接調頭條的api tt.getImageInfo 確是支援的
? TODO
- 模版消息
- 第三方插件
uni-app 跨端小程式風險點
- 後端介面。不同端的後端介面不一樣,需要後端評估一下。舉例:模版消息(微信|支付寶|頭條);設計用戶系統時需注意微信和QQ都有各自的openID和unionID,支付寶只有uid,頭條只有openID;接入微信,QQ,支付寶支付時各種傳參不一樣
- 分享轉發。支付寶,頭條小程式分享至微信和QQ的主要方式是生成口令或者生成小程式碼圖片或者走中間頁,導致傳播路徑較長
- 某些端重要功能缺失。舉例:【頭條】不支援客服會話。【抖音】不支援webview轉發。【QQ】不支援收貨地址
- 某些端api缺失,可能導致某些功能無法實現
- 第三方插件支援度