際際滷

際際滷Share a Scribd company logo
Lets Chat about WeChat
Disclaimer
This presentation was prepared by the author in his personal capacity. All material used in this
presentation is publicly available, and its use does not infringe any reserved right, need to know
agreement or NDA that may have been signed by the Author, or by his employer on his behalf.
The opinions herein expressed are the author's own and do not reflect the views of his employer.
Chat
Chat (界看稼岳d)
Moments
Wallet
Wallet apps
Subscription/ Service Accounts
Subscription/ Service Accounts (界看稼岳d)
Whats the status of my
order ORD-22746248??
(ORD)-d{8}
Hello Alessio!
Your order number
ORD-22746248 left our
warehouse yesterday at
11:45pm HKT.
You can track the shipment
using this link:
https://track.aftership.com/
1ZXF14759096815439
Your
server
Tencent
server
In-chat
SELECT *
FROM ORDERS
WHERE ID=
ORD-22746248
SELECT *
FROM ORDERS
WHERE ID=
ORD-22746248
Whats the status of my
order ORD-22746248??
Hello Alessio!
Your order number
ORD-22746248 left our
warehouse yesterday at
11:45pm HKT.
You can track the shipment
using this link:
https://track.aftership.com/
1ZXF14759096815439
Your
server
Tencent
server
In-chat
Let me know when my order
ORD-22746248 is delivered!
Hello Alessio!
Your order number
ORD-22746248 have been
delivered today at 11:45pm
HKT.
You can track the shipment
using this link:
https://track.aftership.com/
1ZXF14759096815439
Your
server
Tencent
server
In-chat
INSERT INTO
NOTIF (id, event)
VALUES
(ORD-22746248,
delivered);
!
Your
server
Tencent
server
In-Browser
web page
2. open
page in
embedded
web
browser
1. send
event
message
to your
server (via
Tencent)
In-Browser
IF
a. page runs inside the WeChat browser
b. page runs from an authorised domain
c. page provide valid auth token/signature
THEN
page can use the WeChat JS API (via
wx./jWeixin. object)
When the page opens, you have to wait for the browser to call:
wx.ready(function(){ // ... });
then you can start making calls to the WeChat JS API.
wx.checkJsApi({
jsApiList: ['chooseImage'] // List of JS APIs to be checked.
success: function(res) {
// Key-value pairs, false for unavailable APIs
// Example:
// { "checkResult": {"chooseImage":true},
// "errMsg":"checkJsApi:ok" }
});
Each API calls, as a result of its invocation, some callbacks:
 success: ok
 fail: ko
 complete: called no matter what
Some API have also:
 cancel: if the API displays an UI with buttons and the user tap cancel
 trigger: called when some menu items are clicked
JavaScript API
 Share on Moments/ Send to Chat
 Image Picker/ Camera/ Image Preview/ Upload/ Download
 Audio Record/Play/Upload/Download
 Voice Dictation
 Device Info and Network Status
 Location
 View Location on a Map within WeChat
 Get Location
 Interface Controls
 Hide/ Display Top Right Menu
 Hide/Close Current Window
 Hide/ Display menu items and item groups
 Scanning a QR Code
 Coupons picker
 Add/ View Coupons in WeChat Card Pack
 WiFi hotspot
 Request a payment (促 amount from the users WeChat Wallet)
...this essentially is the WeChat Platform everyones talking about: some JS, and a web browser!
http://admin.wechat.com/wiki/
September mini-apps!
September mini-apps!
Mini-apps:
 Login
 UI widget library (animation, slides, pickers, )
 Canvas
 Local data storage
 Requests, Websockets
 Image Picker/ Camera/ Image Preview/ Upload/ Download
 Audio Record/Play/Upload/Download
 Device Info and Network Status, Sensors (compass, accelerometer, ..)
 File upload/management
 Location
 View Location on a Map within WeChat
 Get Location
 Scanning a QR Code
 Coupons picker
 Add/ View Coupons in WeChat Card Pack
 Can be added to home screen
 Request a payment (促 amount from the users WeChat Wallet)
( https://pay.weixin./wiki/doc/api/index.html )
https://mp.weixin./debug/wxadoc/dev/api/?t=20161122
The problem
$10M
$20M
$17M
Let's Chat about WeChat... one year later
Some services built on top of WeChat...
https://www.grata.co/
...beyond WeChat?
WhatsApp have no public API, and actively ban
numbers of applications that interface with their
servers directly using FunXMPP.
Line have what they call
Business Connect.
You can send/receive
messages, and develop
channel web apps similar to
the way you do in WeChat
official accounts.
...beyond WeChat?
...beyond WeChat?
https://developers.facebook.com/docs/messenger-plat
form/complete-guide/payments
...beyond WeChat?
https://developer.apple.com/reference/applepayjs
https://developers.google.com/web/updates/
2016/07/payment-request
https://developers.google.com/web/fundame
ntals/discovery-and-monetization/payment-re
quest/
Questions?
@alxdwn

More Related Content

Let's Chat about WeChat... one year later

  • 2. Disclaimer This presentation was prepared by the author in his personal capacity. All material used in this presentation is publicly available, and its use does not infringe any reserved right, need to know agreement or NDA that may have been signed by the Author, or by his employer on his behalf. The opinions herein expressed are the author's own and do not reflect the views of his employer.
  • 10. Whats the status of my order ORD-22746248?? (ORD)-d{8} Hello Alessio! Your order number ORD-22746248 left our warehouse yesterday at 11:45pm HKT. You can track the shipment using this link: https://track.aftership.com/ 1ZXF14759096815439 Your server Tencent server In-chat SELECT * FROM ORDERS WHERE ID= ORD-22746248
  • 11. SELECT * FROM ORDERS WHERE ID= ORD-22746248 Whats the status of my order ORD-22746248?? Hello Alessio! Your order number ORD-22746248 left our warehouse yesterday at 11:45pm HKT. You can track the shipment using this link: https://track.aftership.com/ 1ZXF14759096815439 Your server Tencent server In-chat
  • 12. Let me know when my order ORD-22746248 is delivered! Hello Alessio! Your order number ORD-22746248 have been delivered today at 11:45pm HKT. You can track the shipment using this link: https://track.aftership.com/ 1ZXF14759096815439 Your server Tencent server In-chat INSERT INTO NOTIF (id, event) VALUES (ORD-22746248, delivered); !
  • 13. Your server Tencent server In-Browser web page 2. open page in embedded web browser 1. send event message to your server (via Tencent)
  • 14. In-Browser IF a. page runs inside the WeChat browser b. page runs from an authorised domain c. page provide valid auth token/signature THEN page can use the WeChat JS API (via wx./jWeixin. object) When the page opens, you have to wait for the browser to call: wx.ready(function(){ // ... }); then you can start making calls to the WeChat JS API. wx.checkJsApi({ jsApiList: ['chooseImage'] // List of JS APIs to be checked. success: function(res) { // Key-value pairs, false for unavailable APIs // Example: // { "checkResult": {"chooseImage":true}, // "errMsg":"checkJsApi:ok" } }); Each API calls, as a result of its invocation, some callbacks: success: ok fail: ko complete: called no matter what Some API have also: cancel: if the API displays an UI with buttons and the user tap cancel trigger: called when some menu items are clicked
  • 15. JavaScript API Share on Moments/ Send to Chat Image Picker/ Camera/ Image Preview/ Upload/ Download Audio Record/Play/Upload/Download Voice Dictation Device Info and Network Status Location View Location on a Map within WeChat Get Location Interface Controls Hide/ Display Top Right Menu Hide/Close Current Window Hide/ Display menu items and item groups Scanning a QR Code Coupons picker Add/ View Coupons in WeChat Card Pack WiFi hotspot Request a payment (促 amount from the users WeChat Wallet) ...this essentially is the WeChat Platform everyones talking about: some JS, and a web browser! http://admin.wechat.com/wiki/
  • 18. Mini-apps: Login UI widget library (animation, slides, pickers, ) Canvas Local data storage Requests, Websockets Image Picker/ Camera/ Image Preview/ Upload/ Download Audio Record/Play/Upload/Download Device Info and Network Status, Sensors (compass, accelerometer, ..) File upload/management Location View Location on a Map within WeChat Get Location Scanning a QR Code Coupons picker Add/ View Coupons in WeChat Card Pack Can be added to home screen Request a payment (促 amount from the users WeChat Wallet) ( https://pay.weixin./wiki/doc/api/index.html ) https://mp.weixin./debug/wxadoc/dev/api/?t=20161122
  • 21. Some services built on top of WeChat... https://www.grata.co/
  • 22. ...beyond WeChat? WhatsApp have no public API, and actively ban numbers of applications that interface with their servers directly using FunXMPP. Line have what they call Business Connect. You can send/receive messages, and develop channel web apps similar to the way you do in WeChat official accounts.