微信小程序开发实战 (肖睿，何源)（Z-Library）

# 微信小程序开发实战 — Reading Guide ## 【One-Line Pitch】 A hands-on, task-driven introduction to WeChat Mini Program development that takes you from account registration and project scaffolding through core components, data binding, and into the WePY framework and mini-game development with Cocos Creator — ideal for beginners and intermediate developers who want to build real, shippable mini programs. ## 【Book Arc】 - **Opening (~0%–9%)**: Why mini programs matter — a comparison with native apps and HTML5 apps, the history and ecosystem of WeChat Mini Programs (BaaS, third-party services, analytics tools, investors, media, app stores), and the opportunities they create for low-cost, scenario-based services. Includes practical setup: registering an account, choosing a subject type (personal vs. enterprise), and installing the WeChat Developer Tool. - **Early (~9%–19%)**: Getting oriented with the developer tool interface (menu bar, toolbar, simulator, editor, debugger) and the project structure — the six root items (pages, utils, app.js, app.json, app.wxss, project.config.json). Covers WXSS basics (rpx units, style import, global vs. local styles, selectors), and the role of each file type (.js, .json, .wxml, .wxss) in a page component. - **Early (~19%–28%)**: Deep dive into configuration and lifecycle. app.json global config (pages array, window, tabBar, networkTimeout, debug), page-level config overrides, the App() registration function with its lifecycle hooks (onLaunch, onShow, onHide, onError), the Page() function with its full lifecycle (onLoad, onReady, onShow, onHide, onUnload, plus event handlers like onPullDownRefresh and onShareAppMessage), and CommonJS-style module exports/imports. - **Early–Middle (~28%–38%)**: First complete project — the "祥云天气" (Xiangyun Weather) mini program. Builds up from data binding in WXML, through wx:for list rendering with wx:key, to wx:if/wx:elif/wx:else and hidden for conditional rendering. Practical guidance on when to use wx:if vs. hidden (toggle cost vs. initial render cost). - **Middle (~38%–47%)**: Component library tour — text (selectable, space, decode), rich-text (nodes as HTML string or node array for e-commerce product details), progress (percent, stroke-width, color, active states), and navigator with its six open-type jump modes (navigate, redirect, switchTab, navigateBack, and others), including passing parameters via URL query strings and retrieving them in onLoad. ## 【Key Takeaways】 - **Mini programs win on cost and reach** (Early): They solve the cross-platform problem without needing separate iOS/Android engineers, integrate identity verification, payment, and sharing natively, and are especially suited for low-frequency, service-heavy scenarios tied to offline traffic. This is the strategic "why" before any code. - **The project skeleton is small but opinionated** (Early): Six root items — pages, utils, app.js, app.json, app.wxss, project.config.json — define everything. project.config.json preserves your tool settings across machines; app.wxss holds global styles; app.json is the global config; app.js registers the app and holds global data. Understanding this layout early prevents confusion later. - **WXSS is CSS with mini-program twists** (Early): rpx is the responsive unit (750rpx = screen width), @import brings in external stylesheets, and page-level .wxss overrides app.wxss for the same selectors. Use class for static styles and style only for dynamic values to keep rendering fast. - **Lifecycle functions are the backbone of app and page behavior** (Early): App() has onLaunch/onShow/onHide/onError; Page() adds onLoad/onReady/onShow/onHide/onUnload plus event handlers like onPullDownRefresh, onReachBottom, onShareAppMessage, and onPageScroll. Knowing when each fires — and that App() is a singleton registered only in app.js — is essential for managing data flow and side effects. - **Data binding plus wx:for and wx:if covers most UI logic** (Early–Middle): The weather project shows the pattern: define data in Page(), bind with {{}}, iterate with wx:for (using wx:key for stable identity and reordering efficiency), and conditionally render with wx:if/elif/else. Choose hidden over wx:if for frequent toggles (lower toggle cost, higher initial render cost). - **Navigation is richer than an <a> tag** (Middle): The navigator component and wx.navigateTo/wx.redirectTo/wx.switchTab/wx.navigateBack cover different jump semantics — navigate preserves the current page and can carry query parameters (?key=value&key2=value2), while switchTab is for tabBar pages. Retrieve parameters in onLoad via the options argument. - **Rich-text and progress components solve real product needs** (Middle): rich-text renders HTML strings or node arrays from backend data (essential for e-commerce detail pages), and progress provides visual feedback during waits with configurable percent, stroke-width, color, and active animation. ## 【Reading Tips】 - **Skim the ecosystem and history sections (0%–9%)** if you're already convinced you want to build mini programs — the strategic context is useful but not code-critical. Do read the registration and developer tool installation steps carefully; they're prerequisites for everything else. - **Deep-read the project structure and configuration chapters (9%–28%)**: app.json and page configs are where many real-world bugs hide (e.g., pages array order determines the home page; page config overrides app.json window settings). The App()/Page() lifecycle tables are worth memorizing or bookmarking. - **Follow the 祥云天气 project end-to-end (28%–38%)** — it's the book's core hands-on exercise. Build it yourself, then extend it (add more cities, use real weather APIs) to solidify data binding, list rendering, and conditional rendering. - **Treat the component chapters (38%–47%) as a reference**: you don't need to memorize every property of text, rich-text, progress, or navigator. Skim the tables, then return when you need a specific behavior (e.g., selectable text, rich-text nodes, or a specific navigation mode). - **Watch for the "注意" and "经验" callouts** — they flag common pitfalls (e.g., don't call getApp() inside App() functions, don't reassign exports, use module.exports instead) that will save you debugging time. ## 【Coverage Limits】 This guide covers the book's opening through the component and navigation chapters (~0–47%). The excerpts do not cover the later sections on WePY framework application, WeChat mini-game development, or Cocos Creator — those topics are mentioned in the blurb but not detailed in the sampled material. ##