WeChat Mini Program - Everything you need to know

Use Postman to test backend routes with get and post requests, save tests in a test routes collection, and validate Poké API and translate endpoint responses with JSON.

Set up a backend development environment with VS Code and Node.js, using WeChat's exclusive dev tools. Implement a simple API with get and post requests and connect MongoDB.

Learn to set up a free MongoDB Atlas cluster, register users, and post requests from a Node.js backend using a NoSQL cloud-based database.

Learn to host a WeChat mini program backend using heroku, test locally without online hosting, and push a live backend by installing the heroku cli, git, and homebrew.

Learn to set up WeChat dev tools, switch to English, obtain a test account and app id, and navigate the mini program frontend, including data binding, events, and debugging.

Set up node and npm, install the WeUI mini program, configure imports and icons, build npm modules, and enable npm modules in the local settings for a WeChat mini program.

Set up a Node.js backend for a WeChat mini program, configure Express, dotenv, and MongoDB with Mongoose, and enable automatic nodemon restarts for efficient development.

Learn to link your backend to a MongoDB database by creating a config module, setting and replacing the connection string password, and confirming the MongoDB connection as the server runs.

Create a WeChat mini program user model with a Mongoose schema, including name (required) and open id (required, unique), with timestamps and export for user routes.

Build a register user route for a WeChat mini program using express router and a user model, handling post /api/register_user with async logic to create or update user in database.

Create a backend state route to fetch COVID-19 data from an external API and forward it to the WeChat mini program frontend, with Postman testing and date filtering.

Learn how the frontend obtains a one-time login code, sends it to the backend, and uses the WeChat API to retrieve the open ID and save it in the database.

Implement a backend route to exchange the front-end login code for the WeChat open id by sending app id and secret, then save the open id to the database.

download asset files and integrate county flags gifs, county maps pngs, and tab bar icons into the root assets folder for the WeChat mini program.

Master the app layer of a WeChat mini program by configuring app.json, the window bar, colors, and navigation, and implementing container, section, and button styles.

Build the index page of a WeChat mini program by creating a header with title and image, using app stylesheet classes and a gradient background.

Develop the user login area under the title to display the avatar, WeChat-registered name, and login/logout button, plus the current date, using block tags for layout and future conditional rendering.

Learn how to use conditional rendering in a WeChat mini program to switch between login and user info blocks based on has user info, showing avatar, nickname, and log out.

Learn to persist login state in a WeChat mini program using local storage, implement backend authentication for open ID, and register users via API calls.

Retrieve data from local storage on load to sign in users and display their avatar. Remove the open ID and user info on logout to reset the session.

Implement a logout confirmation dialog in a WeChat mini program using the We UI custom dialog component, with data binding and cancel or log out actions.

Fix a user interface bug by removing the logout toast from on load and triggering it only after logout confirmation, ensuring local storage cleanup of user info and open ID.

Master how to fetch COVID data from the backend, assign it to a variable, and store it in local storage, with quick switch between default and live data.

Clean the covid data by filtering out Maryland and unassigned entries, producing a 24-county dataset before storage, then show a counties checklist with daily cases, daily deaths, and color-coded risk.

Add risk level and plain county name to each data object, classify danger, warning, or safe by daily cases, and use the plain name for image paths and styling.

Implement a saved counties section in the WeChat mini program. Display a map, daily and total cases, and risk color coding for user favorites via a swiper and local storage.

Render saved counties in a swiper based on the saved counties array length, showing saved items or a no-counties-added default. Prompt login with get user profile when tapped.

Build the ad county button as a two-part component, with a toggleable view and a WeeChat checkbox group, controlled by an open county list toggle.

Learn to implement a checkbox group inside a scroll view in a WeChat mini program, using bind change for county selection, dynamic enter/exit animations, and saving selected counties.

Learn to implement the checkbox change function to select counties, persist selections with local storage, and dynamically update the swiper items and checkbox states.

Learn to persist user selections with local storage by storing saved county names, mapping checkbox items, and updating the page data and swiper items on load and after changes.

Add highest daily infections section to the WeChat mini program index page, showing the top five counties by daily cases. Render data with a for loop and style alternating rows.

Create two folders for map page and data page, initialize each with JavaScript, JSON, XML, and stylesheet, and add them to the app pages using a startup compilation mode.

Learn to create a map page link in a WeChat mini program by adding a map section with a location icon and a redirect function using navigate to.

Learn to redirect to the data page by adding a data section with a folder icon, bind tap, and text 'all covid data'; style and prepare tab bar for navigation.

Configure the tab bar in app.json with pages, icons, and colors to keep navigation always visible, and enforce 2–5 items using wx.switchTab for tab bar pages.

Complete the footer section of the index page with dynamic year rendering. Define styles and prepare to move on to the map page.

build a dynamic map page in a WeChat mini program that color-codes counties by daily case information and displays a header date for the selected day.

Loads today’s covid data from local storage into a covid data array, then builds a Maryland map risk level array by matching counties to render a color-coded svg map.

Display a dynamic Maryland map by embedding the svg as base64 and applying risk level classes (safe, warning, risk, danger) to its 24 county paths.

Color code county names by risk levels and display them on a dynamic map; tap to view a modal with county details, population, covid data, and GPS map.

Learn to implement a map legend in a WeChat mini program, using XML and CSS to display color-coded risk levels and toggle county visibility.

Add interactive toggles to a WeChat mini program map, allowing users to show or hide county names by risk level through color blocks and tap bindings.

Copy the index footer to the map page outside the map holder, including the date, for a consistent look; next, build a county pop-up modal with data, flag, map, GPS.

Build a scrollable pop-up county information modal in a WeChat mini program that opens on county selection, with entrance and exit animations and dynamic data binding for county details.

Add a close icon to the county information modal in the WeChat mini program, and implement a close tap to toggle enter and exit animations.

Set the selected county data by reading the data set from each list item, matching it to the county in the cova data array, and updating the component state.

Demonstrates displaying the selected county’s name, flag, case death, risk level, and map location in a WeChat mini program pop-up, using dynamic data binding and layout blocks.

Learn how the WeChat mini program displays selected county data, including daily and total COVID cases and deaths, with bold emphasis and a risk level indicator.

Create a dynamic risk level indicator that updates with selected county data using conditional rendering, showing color-coded safe, warning, risk, and danger states with animation.

Make a quick spelling correction by using the bold class on the span; apply bold to daily and total numbers so they are visually emphasized on mobile.

Display a county population and a color-coded outline map by adding a population block and an outline map under the risk level indicators, pulling data from selected county data.

Learn to add a GPS map in a WeChat mini program by defining a map tag with latitude, longitude, and markers, and initializing a map context on ready.

Learn to build the data page of a WeChat mini program with sorting buttons for alphabetical order, ascending or descending case counts, and a county info dropdown with copy function.

Learn to implement interactive sorting buttons in a WeChat mini program, including a selected state with a highlighted class and three sort modes: alphabetically, descending, and ascending.

Create a WeChat mini program that lists counties with buttons and pulls COVID data from local storage for dynamic county sorting and a dropdown reveal.

Build the open county tab function in a WeChat mini program to toggle each county's dropdown. Bind taps, compare the selected county, and update data list to reflect open states.

Sort counties alphabetically and by daily case counts to reorder the COVID data list, update the list items, and verify sorting with toggles before building the county dropdown menu.

Create a county dropdown in xml using if conditionals and an open toggle to animate a county data list with flag backgrounds, showing daily and total cases, deaths, and population.

Build a clipboard copy function in a WeChat mini program, wiring XML and styles to copy date, county name, daily and total cases, daily and total deaths, and population.

Add a footer from the map or index page and verify rendering in the mini program. Explore vibrations and sharing to friends and timeline with custom data.

Add live covid data requests to the WeChat mini program, implement a default dummy data fallback when the API fails, and show a data error dialog to users.

Add haptic vibration feedback to touch events in a WeChat mini program, using short and long vibrations with light to strong strengths across redirects, login, logout, and list interactions.

Learn to implement pull down refresh in a WeChat mini program by enabling a page, defining on pull down refresh to refresh data via API calls, and manage loading states.

Use the onShow lifecycle to refresh COVID data from local storage on every map and data page view, resetting county arrays to avoid duplicates and sync updates.

Learn to implement custom sharing in a WeChat mini program by configuring on share app message and on share timeline, setting text, image, and a navigation path for each page.

Review login via get user profile and local storage for saved counties using for loops and data binding; explore the SVG map with legend, county details, sharing, and pull-down refresh.