📱 微信小程序开发指南

🌟 小程序简介

1. 小程序与传统Web开发的区别

• 🏃‍♂️ 运行环境差异

  • Web：浏览器环境
  • 小程序：微信客户端环境

• 🛠 API差异

  • 小程序不支持DOM和BOM API
  • 提供丰富的微信原生API
    • 地理定位 📍
    • 扫码功能 🔍
    • 微信支付 💰
    • 小程序登录 🔐
    • 微信分享 📢
    • 等等...

• 💻 开发流程

  1. 申请小程序开发者账号
  2. 安装微信开发者工具
  3. 创建并配置项目

2. 📁 项目结构解析

• pages/：页面文件夹

  • 每个页面由四个文件组成：
    • .wxml：页面结构
    • .wxss：页面样式
    • .js：页面逻辑
    • .json：页面配置

• utils/：工具模块目录

• components/：自定义组件目录

• assets/：静态资源目录

• 核心配置文件：

  • app.js：小程序入口文件
  • app.json：全局配置文件

    {
      "pages": ["pages/index/index"],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "小程序",
        "navigationBarTextStyle": "black"
      }
    }

  • app.wxss：全局样式文件
  • project.config.json：项目配置文件
  • sitemap.json：SEO配置文件

3. 🎨 WXML vs HTML

1. 标签对比

   • HTML：<div>, <span>, <img>, <a>
   • WXML：<view>, <text>, <image>, <navigator>

2. 模板语法

   <!-- 数据绑定 -->
   <view>{{message}}</view>
   
   <!-- 列表渲染 -->
   <view wx:for="{{list}}" wx:key="id">
     {{item.name}}
   </view>
   
   <!-- 条件渲染 -->
   <view wx:if="{{show}}">显示内容</view>

4. 📐 WXSS特性

1. rpx响应式单位

   • 1rpx = 屏幕宽度/750
   • 自动适配不同屏幕尺寸

   .container {
     width: 750rpx;    /* 屏幕宽度 */
     height: 100rpx;   /* 自动计算高度 */
   }

2. 样式导入

   @import "common.wxss";

3. 选择器支持

   • 类选择器（.class）
   • ID选择器（#id）
   • 元素选择器（view）
   • 并集选择器（.class1, .class2）
   • 后代选择器（.class view）

5. ⚡ 性能优化建议

• 合理使用分包加载
• 避免频繁setData
• 及时销毁不需要的事件监听
• 优化图片资源
• 合理使用组件化开发

6. 🔒 安全注意事项

• 敏感数据加密处理
• 使用HTTPS请求
• 做好用户信息保护
• 遵守小程序安全规范

7. 📚 开发资源

• 微信官方文档
• 小程序开发指南