Uni-app has been developed and released as a cross-end applet.

๐Ÿง guidelines

  • This is a detailed small program features each end of the real machine survey comparison report
  • Test machine: iPhone7 Plus IOS 12.4.1
  • Clients: wechat 7.0.5, Alipay 10.1.72, Toutiao 7.4.0, Douyin 8.1.0, QQ8.1.5.461
  • ๐Ÿšซ๏ธ Baidu small program only merchants can register, individual developers can not register, there is no appID function limited (such as Baidu developer tools can not use the preview function can not test the real machine), so temporarily unexpected Baidu small program

User Information Authorization

  • Authorization Method:
    • The authorization method of user information is still in the first version of wechat applet, that is, directly call getUserInfo to pop up the authorization popup. If the user chooses to allow, the subsequent call will not pop up the popup, but directly go to the success callback. If the user chooses to cancel, subsequent calls no longer pop up, but go straight to the FAIL callback
    • ใ€ wechat ใ€‘ใ€QQใ€‘ใ€ Alipay ใ€‘ uses button + callback event to activate the authorization popup. If the user chooses to allow, the subsequent click will not exit the popup and directly go back to the popup. If the user chooses to cancel, the subsequent click continues the popup to ask for authorization
  • Authorization information clearing method:
    • ใ€ wechat ใ€‘ Delete the small program to clear the authorization information
    • [Alipay] my – Settings – security Settings – account authorization
    • My – system setup – Clear cache. [Tiktok] No clearance method was found
    • [QQ] did not find the removal method (it is said that the QQ version of the open small program has not yet been gray released)

Applets login

  • ใ€ wechat ใ€‘wx.login
  • ใ€QQใ€‘ qi.login is basically the same as wechat
  • ใ€ alipay ใ€‘ My. GetAuthCode
  • [Headline] Same as wechat, no model document found

share

  • Behavior:
    • [wechat] Directly dial up the chat conversation list for selection
    • ใ€QQใ€‘ Set up the list of sharing channels:
      • QQ friends
      • QQ space
      • Click on the top right corner of the three points from the list of wechat friends and circle of friends two items, in wechat to open qq small program is to go to the middle page
    • ใ€AlipayCall up the list of sharing channels:
      • Alipay circle of friends
      • Alipay Contact
      • WeChat friends | QQ friends (save open alipay alipay generated share photos sweep code)
      • (The middle page automatically opens alipay mini program, the middle page does not automatically close)
      • Sina Weibo (middle page automatically opens alipay small program, and nails a middle page)
    • ใ€headlinesCall up the list of sharing channels:
      • Forward to the headlines
      • WeChat friends | WeChat friends (generated password, copy the password after open today’s headline pop-up identification plays the window)
      • QQ | QQ space (to open the page, click open (no response) QQ space point, another middle pages, automatically open the AppStore, order to open up today’s headlines, finally didn’t open the small program ๐Ÿฅด!!!)
    • [Tiktok] Set the list of sharing channels:
      • Flash more friends
      • WeChat friends | WeChat friends | | QQ friends QQ space (images generated trill code, open the trill sweep code identification)
  • [headline]Webview forwarding is not supported:
    • [Toutiao] It can be forwarded, but the forwarded link always prompts loading failure after clicking! It may also be because the mini program has not been released. Scanning the official demo of UNI-App for webview forwarding can be opened normally
    • [Douyin] Does not support forwarding, there is only one close button in the upper right corner of the capsule

Jump to other applets

  • Support WeChat ใ€‘ ใ€ (navigateToMiniProgramAppIdList + navigateToMiniProgram)
  • [QQ] support
  • [headline] support (navigateToMiniProgramAppIdList + navigateToMiniProgram)
  • [alipay] support (background configuration + navigateToMiniProgram)

๐Ÿšซ๏ธ ๏ธQQ, Alipay and Toutiao are not authenticated by the real machine because of the need for an other small program appId

The session of the service

  • ใ€ๅพฎไฟกใ€‘ Support (button open-type=”contact”)
  • [QQ] support, users must add a customer service robot as a friend
  • ใ€ alipay ใ€‘ support (contact-button)
  • No support.

pay

  • ใ€ wechat ใ€‘ support (activate wechat pay)
  • ใ€QQใ€‘ support (adjust QQ payment)
  • [Alipay] Support (transfer alipay payment)
  • Support (Call up alipay App for payment)

๐Ÿšซ ๏ธQQ, Alipay and Toutiao are not authenticated by real machines, because only merchants have access to the payment interface

The geographical position

  • [wechat] Support (permission word end must be configured in app.json). After the user refuses authorization, the call will no longer pop up the ask window, but directly go through the FAIL callback
  • [QQ] support. The real phone behaves like wechat. QQ developer tools to deny authorization call again will still pop up the ask window
  • Support, same as wechat
  • [Alipay] support, the user refused to authorize the call again continue to ask popup

Video playback

  • [wechat] support
  • [QQ] support
  • Support
  • Alipay support? (Uni-app says that Alipay does not support it, and the Alipay document does not find the video component, but the video can be rendered and played normally in the page, is it just supported ๐Ÿค” yesterday?)

Copy the words

  • Behavior:
    • [wechat] [QQ] A default toast for successful replication is set and cannot be controlled
    • [alipay] [Toutiao] No toast after successful replication
  • Jurisdiction:
    • ใ€ Alipay ใ€‘my.setClipboardThis function only supports enterprise Alipay accounts. The reality is that personal accounts can be copied on the IDE, but are reported when called on a real machineERROR 4: This interface is not allowed to be callederror
    • ใ€ wechat ใ€‘ใ€QQใ€‘ใ€ Headlines ใ€‘ Unlimited

Make a phone call

ใ€ wechat ใ€‘ใ€QQใ€‘ใ€ Alipay ใ€‘ใ€ headlines ใ€‘ support

Shipping address

  • [wechat] support
  • [QQ] Not supported
  • [Toutiao] supported (actually measured [Toutiao] supported, [Douyin] not supported)
  • [Alipay] support. But only merchants have access. At present, the my.getAddress interface does not support debugging in developer tools and real machine debugging, only real machine preview

Camera/picture related

  • Photo/album select pictures

    • [wechat] [QQ] support
    • [Alipay] support. An album authorization query popup pops up on the IDE, but there is no popup on the real machine
    • Support. But there will be two ask pop-ups (camera permissions, album permissions)

  • Shoot/Album Select video

    • [wechat] [QQ] support
    • [Alipay] support. An album authorization query popup pops up on the IDE, but there is no popup on the real machine. My.choosevideo must be called (document not found), uni.chooseVideo will report an error
    • Support. But there will be two ask pop-ups (camera permissions, album permissions)
    • โš ๏ธchooseVideo’s maxDuration option in [wechat] and [Alipay] is only limited to the shooting duration, in [Toutiao] is limited to the album selection video duration and shooting duration

  • Preview picture

    ใ€ wechat ใ€‘ใ€QQใ€‘ใ€ Alipay ใ€‘ใ€ headlines ใ€‘ support

  • Save pictures to albums

    • ใ€ wechat ใ€‘ใ€QQใ€‘ใ€ headlines ใ€‘ support, popup window only ask once
    • ใ€ Alipay ใ€‘tt.saveImageToPhotosAlbumError reported on IDEtt.saveImageToPhotosAlbum is not a function, an error is reported on the real machineThis interface is not allowed to be invoked, the document is not mentioned, guess is only available to merchants, and does not support debugging in developer tools and real machine debugging, only support real machine preview

Interface return value difference

  • ใ€ wechat ใ€‘ใ€QQใ€‘ใ€ alipay ใ€‘ใ€ headlines ใ€‘
/ / alipay
{
  'nickName': 'test'.'gender': 'm'.'city': 'Beijing'.'province': 'Beijing'
  'countryCode': 'CN'.'avatar': 'https:\/\/tfs.alipayobjects.com\/images\/partner\/T1_38eXnRiXXXXXXXX'.'code': '10000'.'msg': 'Success',}/ / WeChat
{
  'nickName': 'test'.'gender': 1.'city': 'Xinxiang'.'province': 'Henan'.'country': 'China'.'avatarUrl': 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJCzUl7llykqrMLicpULvVfkbbL2bVDua4tI8ibjxq5E9ib1oPW3F4QazLIUdS2GsFMAGnrWSYjN0 5Ew/132'
  'language': 'zh_CN',}// QQ
{
  'nickName': 'test'.'gender': 1.'city': 'xinxiang'.'province': 'henan'
  'country': 'China'.'avatarUrl': 'https://thirdqq.qlogo.cn/qqapp/1108100302/D64611B2AE700324589177922EEBA5F4/100'.'language': 'zh_CN',}// Toutiao department (Toutiao, Douyin, Pipi Shrimp and Watermelon videos take their respective user information)
{
  'nickName': 'test'.'gender': 1.'city': Xinxiang City.'province': 'Henan Province'
  'country': 'China'.'avatarUrl': 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM5uibSytRCXFs0Y3xSpdy12thibjWIoMrBIsf7FiaPp2ibnFg/0'.'language': ' ',}Copy the code
  • ใ€ wechat ใ€‘ใ€ alipay ใ€‘ใ€ headlines ใ€‘ใ€QQใ€‘
/ / WeChat https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
[
  'scope.userInfo'.// User information
  'scope.userLocation'.// Location
  'scope.address'.// Mailing address
  'scope.record'.// Recording function
  'scope.camera'./ / camera
  'scope.writePhotosAlbum'.// Save to album

  'scope.userLocationBackground'.// Background location
  'scope.invoiceTitle'.// Invoice title
  'scope.invoice'.// Get the invoice
  'scope.werun'.// The number of steps on wechat
]
Headline / / https://developer.toutiao.com/dev/miniapp/uQjMy4CNyIjL0IjM
[
  'scope.userInfo'.// User information
  'scope.userLocation'.// Location
  'scope.address'.// Mailing address
  'scope.record'.// Recording function
  'scope.camera'./ / camera
  'scope.album'.// * Save to album *
]
/ / pay treasure to https://docs.alipay.com/mini/api/xmk3ml#-1
[
  'userInfo'.// User information
  'location'.// Location
  'audioRecord'.// Recording function
  'camera'./ / camera
  'album'.// Save to album
]
// QQ https://q.qq.com/wiki/develop/game/frame/open-ability/authorize.html
[
  'scope.userInfo'.// User information
  'scope.userLocation'.// Location
  'scope.qqrun'.// The number of QQ steps
  'scope.writePhotosAlbum'.// Save to album
  'scope.appMsgSubscribed'.// Subscribe to the message
]
Copy the code

The main entrance

  • ใ€ WeChat ใ€‘
    • The first screen chat list drops down
    • scan
    • Discover -> applets
    • search
  • ใ€ Alipay ใ€‘
    • scan
    • search
    • Home page my small program
  • [Today’s headlines]
    • My -> sweep it
    • search
  • ใ€ trill.
    • Search -> Scan
  • “QQ”
    • scan

๐Ÿ’ฃ headline applets trap

  • At present, only toutiao Android version 7.2.9 and later support the real machine debugging function. IOS currently does not support real machine debugging
  • There is no debugger option on the tiktok App’s miniprogram, and only a close button in the upper right corner of the capsule

๐Ÿ’ฃ pay treasure small program trap

  • My.getopenuserinfo is used to obtain the basic information of Alipay members. It can only be debug-ed on the real machine, not in the IDE. That is, as long as there are pages authorized by users, they need to be pushed to the real machine for development and debugging!
  • Alipay authorization platform only returns tocken and UID, byThe session validity period is maintained by the developer.checkSessionMethod not available
  • The debugger panel on which debugging is enabled disappears when the user authorization popup window is raised. In this case, use the real machine to debug

๐Ÿ’ฃ uni – app trap

  • uni.getSetting, the document said [Alipay] support, call errorAlipay small program, temporarily does not support getSetting, and direct adjustment of alipay’s APImy.getSettingYes
  • uni.chooseVideo, the document said [Alipay] support, call errorAlipay small procedures, temporarily do not support chooseVideo, and directly call Alipay API my.ChooseVideo (document not found) is supported
  • Uni. ChooseAddress, the document says [Alipay] is not supported, in fact it is supported, but you need to call my. GetAddress, and only merchants can use it
  • uni.getImageInfoSupport, call errorHeadlines small program, do not support getImageInfo, while the direct header bar APItt.getImageInfoYes

๐Ÿ“Œ TODO

  • Template message
  • Third-party plug-ins

Uni-app cross-end applets risk points

  • Back-end interfaces. The back-end interfaces of different terminals are different and need to be evaluated by the back-end. Example: template messages (WeChat | alipay | headlines); When designing the user system, it should be noted that wechat and QQ have their own openID and unionID, Alipay only has UID, toutiao only has openID; Access to wechat, QQ, Alipay payment of various transfer parameters are not the same
  • Share and forward. The main way for Alipay and Toutiao applets to be shared to wechat and QQ is to generate passwords or generate applets code pictures or go through the middle page, resulting in a long transmission path
  • Some important functions are missing. Example: [Headline] No support for customer service sessions. Tiktok does not support webView forwarding. [QQ] Does not support the delivery address
  • If some apis are missing, some functions may be unavailable
  • Third party plug-in support