小程式多端差異調研報告(微信，支付寶，頭條，QQ)-有解無憂

?? 須知

這是一份詳細的小程式各特性各端真機調研對比報告
測驗機：iPhone7 plus IOS 12.4.1
客戶端：微信7.0.5，支付寶10.1.72，今日頭條7.4.0，抖音8.1.0，QQ8.1.5.461
??? 百度小程式只有商戶才能注冊，個人開發者無法注冊，沒有appid功能受限（如百度開發者工具無法使用預覽功能導致無法真機測驗），所以暫時不測百度小程式

用戶資訊授權

授權方式：
- 【頭條】用戶資訊授權方式還停留在微信小程式第一版，即直接呼叫 getUserInfo 彈出授權彈窗，如果用戶選擇允許，則后續呼叫不再出彈窗，而是直接走 success 回呼，如果用戶選擇取消，則后續呼叫也不再出彈窗，而是直接走 fail 回呼
- 【微信】【QQ】【支付寶】則采用 button + 回呼事件的方式調起授權彈窗，如果用戶選擇允許，則后續點擊不再出彈窗，直接走回呼，如果用戶選擇取消，則后續點擊繼續彈窗詢問授權
授權資訊清除方式：
- 【微信】洗掉小程式即可清除授權資訊
- 【支付寶】我的-設定-安全設定-賬號授權
- 【今日頭條】我的-系統設定-清除快取，【抖音】未找到清除方法
- 【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】支持(調起QQ支付)
【支付寶】支持(調起支付寶支付)
【頭條】支持(調起支付寶App進行支付)

?? ?QQ，支付寶和頭條未真機驗證，因為支付介面只有商戶才有權限

地理位置

【微信】支持(須在app.json中配置permission字端)，用戶拒絕授權后再次呼叫不再出詢問彈窗，而是直接走fail回呼
【QQ】支持，真機行為同微信，QQ開發者工具上拒絕授權再次呼叫仍會出詢問彈窗
【頭條】支持，同微信
【支付寶】支持，用戶拒絕授權后再次呼叫繼續出詢問彈窗

視頻播放

【微信】支持
【QQ】支持
【頭條】支持
【支付寶】支持？(uni-app里說支付寶不支持，支付寶檔案也沒找到video組件，但放在頁面里video能正常渲染和播放，難道是昨天剛支持??)

復制文字

行為：
- 【微信】【QQ】復制成功后有一個默認的復制成功toast且無法控制
- 【支付寶】【頭條】復制成功后沒有toast
權限：
- 【支付寶】my.setClipboard 此功能僅支持企業支付寶賬號，實際情況是：在IDE上個人賬號是可以復制的，但在真機上呼叫就會報 ERROR 4: 無權呼叫該介面 錯誤
- 【微信】【QQ】【頭條】無限制

打電話

【微信】【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，在真機上報錯 無權呼叫該介面，檔案未提及，猜測是僅商戶可用，且不支持在開發者工具除錯和真機除錯，僅支持真機預覽

介面回傳值差異

getUserInfo【微信】【QQ】【支付寶】【頭條】

// 支付寶
{
  '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': '',
}

getSetting【微信】【支付寶】【頭條】【QQ】

// 微信 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缺失，可能導致某些功能無法實作
第三方插件支持度

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177002.html

標籤：JavaScript

上一篇：React Ref 和 React forwardRef

下一篇：JavaScript的深淺復制

小程式多端差異調研報告(微信，支付寶，頭條，QQ)

?? 須知

用戶資訊授權

小程式登錄

分享

跳轉到其他小程式

客服會話

支付

地理位置

視頻播放

復制文字

打電話

識訓地址

相機/圖片相關

介面回傳值差異

主要入口

?? 頭條小程式陷阱

?? 支付寶小程式陷阱

?? uni-app 陷阱

?? TODO

uni-app 跨端小程式風險點