小程式多端差異調研報告(微信,支付寶,頭條,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缺失,可能導致某些功能無法實現
  • 第三方插件支援度