Slide 1
Slide 1 text
Let’s Chat about WeChat
Slide 2
Slide 2 text
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.
Slide 3
Slide 3 text
Chat
Slide 4
Slide 4 text
Chat (cont’d)
Slide 5
Slide 5 text
Moments
Slide 6
Slide 6 text
Wallet
Slide 7
Slide 7 text
Wallet apps
Slide 8
Slide 8 text
Subscription/ Service Accounts
Slide 9
Slide 9 text
Subscription/ Service Accounts (cont’d)
Slide 10
Slide 10 text
What’s 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”
Slide 11
Slide 11 text
SELECT *
FROM ORDERS
WHERE ID=
”ORD-22746248”
What’s 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
Slide 12
Slide 12 text
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”);
!
Slide 13
Slide 13 text
Your
server
Tencent
server
In-Browser
web page
2. open
page in
embedded
web
browser
1. send
event
message
to your
server (via
Tencent)
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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 user’s WeChat Wallet)
...this essentially is the “WeChat Platform” everyone’s talking about: some JS, and a web browser!
http://admin.wechat.com/wiki/
Slide 16
Slide 16 text
September… mini-apps!
Slide 17
Slide 17 text
September… mini-apps! (demo)
Slide 18
Slide 18 text
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 user’s WeChat Wallet)
( https://pay.weixin.qq.com/wiki/doc/api/index.html )
https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161122
Slide 19
Slide 19 text
The problem
$10M
$20M
$17M
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Some services built on top of WeChat...
https://www.grata.co/
Slide 22
Slide 22 text
...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.
Slide 23
Slide 23 text
...beyond WeChat?
Slide 24
Slide 24 text
...beyond WeChat?
https://developers.facebook.com/docs/messenger-plat
form/complete-guide/payments
Slide 25
Slide 25 text
...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/
Slide 26
Slide 26 text
Questions?
@alxdwn