小程序多端差異調研報告(微信,支付寶,頭條,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功能受限(如百度開發者工具無法使用預覽功能導致無法真機測試),所以暫時不測百度小程序

用戶信息授權

  • 授權方式:
    • 頭條】用戶信息授權方式還停留在微信小程序第一版,即直接調用 getUserInfo 彈出授權彈窗,如果用戶選擇允許,則後續調用不再出彈窗,而是直接走 success 回調。如果用戶選擇取消,則後續調用也不再出彈窗,而是直接走 fail 回調
    • 微信】【QQ】【支付寶】則採用 button + 回調事件的方式調起授權彈窗,如果用戶選擇允許,則後續點擊不再出彈窗,直接走回調。如果用戶選擇取消,則後續點擊繼續彈窗詢問授權
  • 授權信息清除方式:
    • 【微信】刪除小程序即可清除授權信息
    • 【支付寶】我的-設置-安全設置-賬號授權
    • 【今日頭條】我的-系統設置-清除緩存。【抖音】未找到清除方法
    • 【QQ】未找到清除方法(據說開放小程序的QQ版本尚未灰度發佈)

小程序登錄

分享

  • 行為:
    • 【微信】直接調起聊天對話列表進行選擇
    • 【QQ】調起分享渠道列表:
      • QQ好友
      • QQ空間
      • 點右上角三個點調起的列表還有微信好友和朋友圈兩個項,在微信中打開qq小程序是走中間頁
    • 支付寶】調起分享渠道列表:
      • 支付寶朋友圈
      • 支付寶聯繫人
      • 微信好友|QQ好友(保存支付寶生成的分享圖片後打開支付寶掃碼)
      • 釘釘好友(中間頁自動打開支付寶小程序,中間頁不自動關閉)
      • 新浪微博(中間頁自動打開支付寶小程序,和釘釘一個中間頁)
    • 頭條】調起分享渠道列列表:
      • 轉發到頭條
      • 微信好友|微信朋友圈(生成口令,複製口令後打開今日頭條彈出識別彈窗)
      • QQ|QQ空間(打開中間頁,點擊打開(QQ空間點了沒反應),出現另一個中間頁,自動打開AppStore,再點打開調起今日頭條,最後居然沒打開那個小程序?!!!)
    • 【抖音】調起分享渠道列列表:
      • 多閃好友
      • 微信好友|微信朋友圈|QQ好友|QQ空間(生成抖音碼圖片,打開抖音掃碼識別)
  • 【頭條】webview的轉發暫未支持
    • 【今日頭條】能轉發,但轉發的鏈接點擊後總是提示加載失敗!也可能是小程序未發佈的原因,掃uni-app官方demo進行 webview轉發是能正常打開的
    • 【抖音】不支持轉發,右上角膠囊只有一個關閉按鈕

跳轉到其他小程序

  • 【微信】支持(navigateToMiniProgramAppIdList + navigateToMiniProgram)
  • 【QQ】支持
  • 【頭條】支持(navigateToMiniProgramAppIdList + navigateToMiniProgram)
  • 【支付寶】支持(後台配置 + navigateToMiniProgram)

?️ ️QQ,支付寶和頭條未真機驗證,因為須要一個其他小程序的appId

客服會話

支付

  • 【微信】支持(調起微信支付)
  • 【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,在真機上報錯 無權調用該接口,文檔未提及,猜測是僅商戶可用,且不支持在開發者工具調試和真機調試,僅支持真機預覽

接口返回值差異

// 支付寶  {    '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的小程序上沒有打開調試器選項,右上角膠囊只有一個關閉按鈕

? 支付寶小程序陷阱

? 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缺失,可能導致某些功能無法實現
  • 第三方插件支持度