With my background in Mandarin Chinese I thought I would explore developing apps on a hugely popular platform for mainland China.
What is WeChat?
If you’ve never heard of it, don’t worry. Many people outside of Asia have never heard of this all-in-one app. WeChat combines the functionality found in apps such as Whatsapp, Google Pay, Expedia, Instagram, Uber and more.
Want a quick overview?
Some Data about WeChat…
WeChat had 1.17 billion monthly active users in the first quarter of 2020.
Total mini program transaction volume over 2019 came to 800 billion RMB (114 billion USD).
Read a ton more data about WeChat here.
What is a Mini Program?
A “sub-app” inside WeChat.
Limited to 10 MB.
Read A LOT more here.
Getting Started
I followed this tutorial to get setup. This platform is very easy to learn if you don’t get hung up on chinese language issues or wechat registration problems. Below I’m going to outline a few basic steps to create a new page with a form and post data to the cloud database.
Note: Download the “Nightly Version” of the WeChat Dev Tools. I tried the other versions and found out they are deprecated.
1. Create a new Page.
Create a new folder in ‘miniprogram/pages’. Create a corresponding page and the js, json, wxml, and wxss pages will be autogenerated.
2. Create a link to the new page.
In ‘index.wxml’ create a button with bindtap set to a function you will define in ‘index.js’.
<button bindtap='functionName' >Create a 'something'</button>
In index.js inside the Page({}) object add your function:
functionName: function() {
wx.navigateTo({
// This url will be autogenerated in app.json
url: '/pages/pageName/pageName',
})
},
3. Create the Form
wxml is very similar to html with a few differences. Instead of specifying an endpoint use bindsubmit to connect the form to the corresponding function in the ‘pageName.js’ file.
<form bindsubmit="functionName">
<input name='inputName' placeholder='placeholder'/>
<button form-type='submit'>Submit</button>
</form>
4. Create callback function
Create a corresponding function inside the object passed to the Page function. According to the docs, “It accepts an Object parameter to specify the initial data of the page, lifecycle callbacks, and event handlers.”
Page({
// other stuff...
functionName: function(event) {
wx.cloud.callFunction({
// we'll create this cloud function in the next step. This is the name of the function that will interact with database.
name: 'cloudFunctionName',
// next pass the event object to the cloud function.
data: event
},
// redirect to the home page on success
success: (res) => {
wx.navigateTo({
// find this url in app.json
url: '/pages/index/index',
})
},
fail: console.error
})
},
// other functions....
})
Curious about wx.cloud...? According to the docs wx is a “global object, used to carry APIs related to Mini Program capabilities.”
5. Create a collection in the Cloud Base
6. Create the cloud function
Select ‘New node.js cloud function’
In cloudFunctionName/index.js create a function according to the docs.
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
try {
return await db.collection('collectionName').add({
// event.detail.value returns an object with name/value pairs from the form.
data: event.detail.value
})
} catch(e) {
console.error(e)
}
}
From ‘cloudFunctions/cloudFunctionName’ select ‘Upload&&Deploy’.
This will take a few minutes to complete. The other versions of wechat dev tools told me at this point that I needed to update to the current version.
Once the cloud function is successfully deployed you should be able to save to the collection via your form and view the result in the Cloud Base.