WeChat mini-program challenge
Build a simple mini-program in 1 day.
Background & objectives
Today we will discover the basics of the mini-program framework. The main assignment is to build a copycat of “FML: your every day life stories”, check it out now.
Day objectives:
- Master the WeChat MP Integrated Development Environment.
- Understand the config of Mini-programs.
- Play with the view/logic layers.
- Discover the framework components and APIs.
Exercise objectives:
- Setup your workstation
- Setup the MP.
- Display a list of user-generated content (FML “stories”)
- Setup, fetch and persist remote data using Leancloud.
- Post a user-generated content.
- Update content.
See it yourself:
![](asset/new-fml.gif)
1. Setup
Get your development environment:
- Install the IDE and read the quick tutorial provided.
- Create a mini-program project within the IDE (your teacher will provide the MP AppID necessary to create a project).
- Add the Quickstart source code in the folder
- Init git, commit and push it to your own Github repo
- If you are not able to preview your MP, ask help from a teacher
2. Mini-program configuration
The WeChat framework allows to configure five items:
- Routing
- Window
- Tab bar
- Network timeout (not used here)
- Debug (not used here)
Specs
The app.json
file is where to start your mini-program:
- Create your routes using
pages
.
- Style your
window
.
- Generate your
tabBar
.
Here is a section of our manual to help you to configure your MP.
Further resources:
3. Create dynamic pages
In this step you will start to use the core principles of the framework. We recommend that you read this part of the manual before you start.
Specs
- Create a list of cards to display your FML stories on the index.wxml.
- Bring out your designer skills and add wxcss classes.
- Use data binding methods to get data from your index.js file
Further suggestions:
4. Leancloud DB
The goal here is to fetch the data from Leancloud. You will need to use a shared cloud DB, named FML-miniprogram, and use it to inject content into the cards you created ;)
Specs
- Sign up to Leancloud. It’s free.
- Don’t forget to verify your email address.
- Send your username to a teacher: you will be added to the wagon-alumni team and will then get access to the FML-miniprogram app on Leancloud
- Setup Leancloud in your MP. Read this.
- Fetch data from the shared DB (FML-miniprogram) and bind data in your cards.
Here is a tutorial that should be helpful.
Further resources:
- Leancloud mini-program setup.
- Leancloud data storage guide.
5. Submit a new FML
Now, it is time to create a new page which allows users to submit a FML story!
Specs
- Create a new page to submit a FML.
- Post the data collected from the form (.wxml) to the logical layer (.js) then to Leancloud.
Everything is in the tutorial just follow it.
Further resources:
- Leancloud mini-program setup.
- Leancloud data storage guide.
6. Upvote (optional)
Here is a bit of challenge: create a counter which allows users to upvote a FML story.
Specs
- The Leancloud DB has an upvotes column
- Each time a user taps on the upvote icon or btn, increment the counter.
- Post the update to Leancloud.
Further suggestions & resources:
Divide the work in three steps:
- Get the object ID of the FML clicked by user.
-
Persist updated data to Leancloud DB:
- Increment counter
- Persist data in the DB
- Update local data:
- Find the object ID in the local data storage
- Increment counter and update local data.