Master WeChat Mini Program

Learn to use developer tools to accelerate WeChat mini program development, start from a blank project, and switch the editor language from Chinese to English via the top-left menu.

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.

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.

Learn how to use the latest dev tools for WeChat mini programs, comparing official, RC, and nightly builds, and apply updates to access bug fixes and new features.

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.

Learn to validate mini program UI and scripts on real devices rather than relying on dev tools, testing on Android and iPhone, and using remote debugging for real-time error tracking.

Master JavaScript tips for WeChat mini programs by avoiding redefining this, and use arrow functions to inherit the page instance's this for access to this.data in callbacks.

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.

Learn to use destructuring to extract parts of objects and arrays in a WeChat mini program, using rest syntax to handle unused keys and access the first array element.

Learn to build strings with interpolation using backticks to insert variables, preserving spaces and avoiding plus concatenation, for dynamic rendering in wxaml or from a database.

Learn to use dynamic object keys in any program to handle unknown data, deduplicate arrays of objects by unique IDs, and map results efficiently.

Avoid mutating data directly; update data by setting a new value with setData to trigger render during the mini program lifecycle.

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.

Wrap function parameters in an object to improve readability and make arguments self-descriptive for teams working with WeChat mini programs.

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.

Learn to manage state in a WeChat mini program by caching user data locally and globally and implement we store to synchronize updates across pages.

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.

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.

Explore three login types for a WeChat mini program: wx login, get user info via a visible button with encrypted data, and phone number login, openid, unionid, and session key.

learn to obtain a user’s open id by using wx login, sending the code to your backend, and exchanging it for openid and session key without exposing app secret.

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.

learn how to get a user's phone number in a wechat mini program by handling the get phone number button, iv, encryptedData, and the login code for backend decryption.

Learn to implement store and library creation for a multilingual WeChat mini program by auto-detecting device language, loading strings, and persisting user language.

Initialize language in the store via the language library, fetch the language, persist it in local storage, and update the navigation bar, tab bar, and product names in WXML output.

Learn to add a language toggle to a multilingual WeChat mini program, sourcing language from the store, updating the profile, and reflecting changes across the UI.

Discover how custom components in WeChat mini program resemble pages with json, js, and wxss files, offering reusability and powerful features like data observers, properties, and behaviors.

Create a floating action button in a WeChat mini program that shows the total items from a computed cart property in global store, and updates reactively as the cart changes.

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.

Import the create method from the utilize directory to inject store data into the page, and initialize cart items as an array by default to avoid errors in computed properties.

Create a floating cart button in a WeChat mini program with a wxml view, image, and tap handler, overlaying cart quantity via absolute positioning in wxss.

Import the cart button component into the page by configuring the json components, then place the self-enclosed cart button on the index page to show the item count.

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.

Handle tap events in a WeChat mini program by wiring the cart icon to navigate to the cart page. Show a floating action button that displays the total cart items.

Learn to integrate WeChat payment in a mini program, see the cart page after clicking pay, create a backend payment request, and direct users to a thank-you page on success.

Explore the WeChat mini program payment flow: backend creates orders, obtains prepay id, signs parameters, triggers frontend payment, and updates order status after callback.

Log into the dashboard, locate your merchant ID in basic info under account center, find your merchant secret under API safety, download the certificate, and generate or reset the secret.

Learn how to implement the WeChat Pay module with a package that generates prepay id and signature after placing an order on Tencent server, noting limited prepay_id access.

Explore backend setup for WeChat mini program payments: configure the pay module, handle credentials via environment variables, set callback URLs, and implement order creation with payment callbacks.

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.

Implement a payment button component linked to the cart, compute total price and quantity with computed properties, and handle login, order creation, and WeChat Pay flow.

Learn to send a templar message to notify users that their shipment has shipped, triggered by pressing a button in a WeChat mini program.

Learn to set up a template message in the official account dashboard, select up to 10 keywords, arrange dynamic data, and copy the template for later use.

Learn to add templates either from the dashboard or via the api using an access token, and fetch template lists with an api call to avoid hard coding template IDs.

Discover frontend parameters for WeChat mini program template messages, including access token from app id and secret, template id from the dashboard, and the required form id and page parameter.

Explore the backend flow for WeChat template messages: validate form and order data, assemble template keywords, obtain access tokens and template IDs, and dispatch messages to users.

Discover how to link a WeChat mini program to a bound service or subscription account using the official account follow component, with setup steps and scene constraints.

Learn to implement share tracking in a WeChat mini program by attaching the user id to the share path, handling on share app message, and reporting to the backend.