零基础学：微信小程序开发 (岂超凡)（Z-Library）

# 零基础学：微信小程序开发 — Reading Guide 【One-Line Pitch】 A hands-on, beginner-friendly Chinese guide to building WeChat Mini Programs from scratch, walking you through project setup, core components, APIs, and four complete real-world projects. Ideal for developers with basic HTML/CSS/JavaScript knowledge who want to learn by building. 【Book Arc】 - **Opening (~0%–3%)**: Introduces what WeChat Mini Programs are, the development environment setup, and how to create your first project using the official template. Covers the essential project structure (app.js, app.json, app.wxss, project.config.json) and walks through a "Hello World" demo. - **Early (~3%–13%)**: Explains the core file types (.wxml, .wxss, .js, .json), global vs. page-level configuration, data binding for dynamic rendering, and the event system (bind vs. catch for bubbling control). Then dives into UI components—view, scroll-view, and the full picker family (selector, multi-selector, time, date, region). - **Early–Middle (~13%–32%)**: Covers the API layer: page navigation (navigateTo, navigateBack), network requests, file save/open, image selection, interaction feedback (toasts, modals, action sheets), location services, and screen brightness control. Includes a complete nine-grid image picker project with add/delete/preview functionality. - **Middle (~39%–48%)**: Presents two full projects: a news reader app (page layout, tab navigation, data loading from local files) and a bike-sharing app (map component with markers, cover-view for overlaying content on maps, deposit/payment flow simulation). - **Late (~48%+)**: Builds a short-video app with scrollable category tabs, video content pages, and a home page with banner carousel and data-driven sections. Emphasizes component reuse, layout splitting, and data organization patterns. 【Key Takeaways】 - **Project structure is the foundation** (Opening): Every Mini Program requires four global files—app.js, app.json, app.wxss, and project.config.json—with fixed names. Pages live in separate folders under `pages/`, each containing four same-named files (.wxml, .wxss, .js, .json). Keep each project in its own directory and avoid Chinese characters in paths. - **WXML is HTML-like but stricter** (Early): Unlike HTML, .wxml files cannot contain JavaScript code and have no head/body concept—only components and inline styles. Data binding uses `{{}}` syntax to separate logic from presentation, enabling dynamic DOM updates. - **Event binding controls bubbling** (Early): Use `bind` prefix (e.g., bindtap) to allow event bubbling, or `catch` prefix (e.g., catchtap) to stop it. Capture phase uses `capture-bind` and `capture-catch`. Pass data via `data-index='{{index}}'` and retrieve it with `e.currentTarget.dataset.index`. - **scroll-view requires explicit dimensions** (Early): Unlike view, scroll-view must have width and height set via CSS, and content larger than the container scrolls instead of overflowing. Boolean attributes can be shorthand (scroll-y) but need a space before the value if written out (scroll-y= true). - **The picker component covers five modes** (Early): selector, multiSelector, time, date, and region. Each has distinct value formats and event handlers—bindchange fires on confirm, bindcancel on dismiss. Multi-column pickers use 2D arrays and track column changes via bindcolumnchange. - **Map components have the highest z-index** (Middle): In the bike-sharing project, regular view components get covered by the map—use cover-view for any overlay content (like deposit prompts) that must appear above the map. Map markers use iconPath, width, height, and callout properties for customization. - **Local data simulates network requests** (Middle): All three projects load data from local JS files via `require()` to mimic server responses. This lets you build and test UI before backend integration. Remember to disable domain validation in dev tools, but keep it enabled for production (HTTPS required, no port numbers). - **Complex layouts need decomposition** (Late): Break pages into parent-child component structures—parents use `position: relative`, children use `position: absolute`. For repeated lists, build one unit first, then loop with `wx:for` and `block` tags. 【Reading Tips】 - **Skim the picker component section** (Early, ~10%–13%): The five picker modes follow the same pattern (value, start/end, bindchange, bindcancel). Read one carefully, then skim the rest—you'll pick up the differences quickly. - **Deep-read the image picker project** (Early, ~29%–32%): This is the most complete small project in the book and demonstrates the full pattern: data management, conditional rendering, event handling with data-id, and array operations (concat, splice). Master this and you'll understand most Mini Program logic. - **Pay attention to the map/cover-view section** (Middle, ~39%–42%): The z-index behavior of map components is a common pitfall. The bike-sharing project shows the correct workaround (cover-view) that you'll likely need in real projects. - **Skip the repetitive code blocks**: Many examples repeat the same success/fail/complete callback structure. Read the first one fully, then scan for what's different (the API name and the res properties). - **Build along with the three projects**: The news reader, bike-sharing, and short-video apps progressively increase in complexity. Don't just read—type the code and modify it to cement the patterns. 【Coverage Limits】 The excerpts cover roughly the first half of the book (through the short-video project). Later chapters on advanced topics, publishing, and production deployment are not included in this guide.