Master WeChat Mini Program

Name: Master WeChat Mini Program
Rating: 4.6 (15 reviews)

Build a production ready WeChat Mini-Program

Highest Rated

Created byDavid Yu

Last updated 6/2020

English

What you'll learn

10 sections • 54 lectures • 3h 13m total length

Switching to English1:00
Using NPM4:21
Install and manage npm packages in a WeChat mini program by enabling npm, installing qs, building npm to copy packages into the mini program npm folder, and testing the results.
Async-Await Support1:10
Master WeChat mini program introduces async-await support by enabling a new dev tools feature that transforms any function into an async function, simplifying promises and callbacks for http requests.
Latest Version of Devtools1:17
Domain Name Verification1:37
Enable domain name verification during development to test a WeChat mini program on local IP or wifi, then disable it before production to ensure ICP compliance.
Check on Real Device2:17

Avoid Redefining This2:28
Use Async Await3:05
Wrap callback based WeChat mini program APIs into promises using new Promise with resolve and reject, enabling async/await syntax and handling status code 200.
Use Destructure3:30
Use String Interpolation1:48
Dynamic Object Key3:34
Dont Mutate Data Directly0:47
Ways to Clone Object and Array5:11
Learn practical techniques to clone arrays and objects before mutation, including slice, spread syntax, set to remove duplicates, and object.assign or spread for merging and copying.
Use Object as Param for Function2:26

General Links0:02
End Results0:49
Learn how to implement login flow in a WeChat mini program, handle permission prompts, retrieve user information and nickname, and access the user's phone number to populate the profile page.
Using Global Data4:00
What is WeStore?1:00
WeStore is a redux-like package that provides a single source of truth to manage data across components and pages, updating consistently when data changes.
How to setup WeStore?4:53
Learn how to set up we store in your program, import the store, create and pass the store to pages to initialize and keep data in sync.
Three Types of Login4:59
How to get user's Open ID?8:00
How to get user's info?11:02
Learn to obtain user information in WeChat mini program using the get user info button, decrypt with session key and iv, then fetch open ID and union ID from backend.
How to get user's phone number?3:36

General Links0:01
What is Custom Component?0:22
End Result and Overview of Quantity Increment Component0:30
Create the Cart Button Component Files1:21
Create a cart button component in the cart button directory, leveraging the existing item quantity component and a global store that updates each item's cart quantity.
Setup Component JS1:58
Create Component WXML & WXSS3:06
Importing the Component into Page View2:03
Using Computed Properties to Reactively Show Cart Quantity6:16
learn how to use a computed property to reactively display the total cart quantity in a WeChat mini program by watching the global store's cart items and reducing their quantities.
Create Button Methods1:06

General Links0:02
End Result0:31
The Flow2:29
Explore the WeChat mini program payment flow: backend creates orders, obtains prepay id, signs parameters, triggers frontend payment, and updates order status after callback.
Where to find credentials?1:39
WeChat Pay Module1:45
Backend Setup12:12
Building the cart page3:06
Load cart items by implementing the show lifecycle to fetch products from the global cart store, map to IDs, and retrieve details from the backend for both entry points.
Building the payment button9:48

While developing WeChat Mini Program, I found there was a lack of English resources online about it.

I hope this course will fill the gap for curious web developers to build a complete WeChat Mini Program.

We will use a basic structure of an e-commerce platform to learn about the crucial functionalities that makes a great Mini Program