微信小程序开发图解案例教程（附精讲视频）（第2版） (刘刚)（Z-Library）

# 【One-Line Pitch】 A hands-on, illustrated tutorial for building WeChat Mini Programs from scratch—covering the framework, components, APIs, and complete clone-style projects—ideal for beginners with basic HTML/CSS/JavaScript knowledge who want to ship real mini programs quickly. # 【Book Arc】 - **Opening (~0%–10%)**: Introduces what WeChat Mini Programs are, their capabilities and limitations, the development ecosystem, and walks through installing the developer tool, registering an account, and creating a first "Hello World" project. - **Early (~10%–32%)**: Dives into the core framework—global files (app.js, app.json, app.wxss), page files, the Page() registration function, lifecycle hooks, data binding with `{{}}`, conditional rendering (`wx:if`), list rendering (`wx:for`), templates, and the WXS scripting language. - **Middle (~32%–48%)**: Covers the full component library for building UI—view containers, form controls, navigation, media, map, and canvas—followed by the essential APIs for networking, file upload/download, WebSocket, image handling, local storage, location, device features, and interaction feedback. - **Late (~48%–75%)**: Presents design best practices and Q&A, then shifts into complete case studies: cloning real-world apps like 12306 train tickets, QiuShiBaiKe (funny content), and a wedding expo app—each with step-by-step design flows. - **Ending (~75%–100%)**: Continues with additional full-project walkthroughs, emphasizing practical implementation details like tab navigation, carousels, list layouts, detail pages, and project upload/preview. # 【Key Takeaways】 - **Mini Programs are a low-barrier entry into programming** (Early): The author explicitly positions WeChat Mini Programs as accessible to designers, students, and career-changers—only basic HTML/CSS/JavaScript is needed, making it a realistic first step into development. - **The framework separates logic from view** (Early): WXML handles structure, WXSS handles styling (CSS-compatible with extensions), and JavaScript handles business logic—understanding this three-layer split is the foundation for every page you build. - **Data binding via `{{}}` is the core mechanism** (Early): Dynamic data lives in `Page.data`, and double curly braces bind it to the view; `setData()` is the only reliable way to update the UI—directly modifying `this.data` won't refresh the page and can cause inconsistency. - **Lifecycle functions control page behavior** (Early): `onLoad`, `onShow`, `onReady`, `onHide`, and `onUnload` fire at specific moments; knowing when each runs (e.g., `onLoad` only once, `onShow` every time) is essential for fetching data and managing page state. - **Routing is stack-based** (Early): The framework maintains a page stack—`navigateTo` pushes, `redirectTo` replaces, `navigateBack` pops, and tab switches clear the stack—so understanding this model prevents navigation bugs. - **Conditional and list rendering handle dynamic UI** (Middle): `wx:if`/`wx:elif`/`wx:else` control whether blocks render, while `wx:for` repeats components over arrays; using `wx:key` preserves component state and improves rendering efficiency when lists change. - **Templates and imports promote code reuse** (Middle): WXML `<template>` defines reusable snippets, `import` brings in templates, and `include` copies entire files (excluding templates)—essential for keeping projects maintainable. - **WXS brings logic into the view layer** (Middle): WXS is a JavaScript-like scripting language for WXML, supporting modules, variables, functions, and control flow—useful for data processing directly in templates without round-tripping to the logic layer. # 【Reading Tips】 - **Skim Chapter 1 if you're already familiar with web development**: The tool installation, interface walkthrough, and Hello World are straightforward; focus instead on the framework chapters (2–3) where the real learning happens. - **Deep-read Chapter 2 for the mental model**: The framework analysis—global files, page registration, lifecycle, data binding, rendering, templates, and WXS—is the conceptual core. Get comfortable with `setData()` and the page stack before moving on. - **Use the "沙场大练兵" (practice) sections as checkpoints**: Each chapter ends with a mini-project (weather app, recipe app, login form, Douban movie clone). Build these before attempting the full case studies in Part 2. - **Treat the clone projects as reference implementations**: Chapters 6–8 (12306, QiuShiBaiKe, wedding expo) are step-by-step blueprints—follow along once, then try modifying features to test your understanding. - **Skip the API reference on first read**: Chapter 4's API list is exhaustive; skim it to know what's available, then return when you need a specific capability (upload, payment, location, etc.). # 【Coverage Limits】 The excerpts cover roughly the first half of the book in detail (framework, components, APIs, design principles) plus the table of contents for the case-study chapters. Specific implementation details of the later clone projects (Chapters 6–8) are not covered in the source material. #