微信小程序学习笔记

微信小程序 - 学习笔记

目录

• 小程序简介
• 第一个小程序
• 小程序代码的构成
• 小程序的宿主环境
• 协同工作和发布
• 总结

---

小程序简介

1. 小程序与普通网页开发的区别

区别	网页开发	小程序开发
运行环境	浏览器环境	微信环境
开发模式	浏览器 + 代码编辑器	需申请账号、安装开发者工具
API	支持 DOM/BOM API	仅支持微信 API（如扫码、支付）

2. 体验小程序

• 方式：手机微信（6.7.2+版本）扫码小程序码。

---

第一个小程序

1. 注册小程序开发账号

1. 入口：访问 微信公众平台 → 点击“立即注册”。
2. 流程：
   • 选择账号类型（小程序）。
   • 填写邮箱、密码等信息。
   • 激活邮箱并完成主体信息登记。
   • 获取 AppID（开发必备）。

2. 安装开发者工具

• 下载地址：微信开发者工具下载页
• 功能：
  • 创建/配置项目。
  • 代码编辑与调试。
  • 真机预览与发布。

3. 创建小程序项目

1. 登录开发者工具 → 点击“+”新建项目。
2. 填写项目信息（名称、AppID、目录）。
3. 项目结构自动生成：
   • pages：存放页面文件。
   • app.js：入口文件。
   • app.json：全局配置。
   • app.wxss：全局样式。

---

小程序代码的构成

1. 项目结构

├── pages/          # 页面目录（每个页面由4个文件组成）
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
├── utils/          # 工具模块
├── app.js          # 小程序入口文件
├── app.json        # 全局配置（页面路径、窗口样式等）
├── app.wxss        # 全局样式
├── project.config.json  # 个性化工具配置
└── sitemap.json    # 微信索引配置

2. JSON 配置文件

文件	作用
app.json	全局配置（页面路径、窗口样式、底部tab）
project.config.json	开发者工具个性化配置（如项目名称、AppID）
sitemap.json	控制小程序页面是否允许被微信索引
页面.json	覆盖全局配置，定义当前页面样式

3. WXML 模板

• 作用：构建页面结构（类似 HTML）。
• 与 HTML 的区别：
  • 标签不同：view（替代 div）、navigator（替代 a）。
  • 支持数据绑定、条件渲染、列表渲染（类似 Vue）。

4. WXSS 样式

• 作用：定义组件样式（类似 CSS）。
• 新增特性：
  • 单位 rpx（自动适配屏幕）。
  • 全局样式（app.wxss）与局部样式（页面 .wxss）。

5. JS 逻辑交互

• 文件分类：
  • app.js：入口文件，调用 App() 启动小程序。
  • 页面.js：调用 Page() 创建页面实例。
  • 普通.js：封装公共函数供其他文件调用。

---

小程序的宿主环境

1. 宿主环境简介

• 定义：小程序运行依赖的微信环境。
• 能力：提供组件、API、通信模型等。

2. 通信模型

• 逻辑层（JS）与 渲染层（WXML/WXSS）通过微信客户端转发通信。

3. 运行机制

• 启动流程：
  1. 下载代码包 → 解析 app.json → 执行 app.js → 渲染首页。
• 页面渲染流程：
  1. 加载 .json → 解析 .wxml 和 .wxss → 执行 .js → 渲染完成。

4. 常用组件

组件	作用	示例属性
view	块级容器（类似 div）	flex 布局
scroll-view	滚动区域	scroll-y（纵向滚动）
swiper	轮播图容器	autoplay（自动播放）
text	文本（支持长按选中）	selectable
button	按钮（支持微信功能调用）	open-type="getUserInfo"
image	图片（支持裁剪/缩放）	mode="aspectFit"

5. API 分类

类型	特点	示例
事件监听 API	以 on 开头	wx.onWindowResize()
同步 API	以 Sync 结尾	wx.setStorageSync()
异步 API	通过回调函数获取结果	wx.request()

---

协同工作和发布

1. 成员管理

• 项目成员：开发者、运营人员（可登录后台）。
• 体验成员：参与内测（无开发权限）。
• 权限分配：管理员可设置角色（开发者、体验者等）。

2. 版本管理

版本类型	说明
开发版本	开发者本地测试
体验版本	提交给测试/产品经理
审核版本	提交至微信审核
线上版本	审核通过后发布给所有用户

3. 发布流程

1. 上传代码：开发者工具 → 填写版本号与备注。
2. 提交审核：后台 → 版本管理 → 提交审核。
3. 发布上线：审核通过后，管理员点击“发布”。

4. 小程序码推广

• 优势：高辨识度、支持品牌推广。
• 获取路径：后台 → 设置 → 基本设置 → 小程序码下载。

5. 运营数据查看

• 方式：
  • 小程序后台 → 统计模块。
  • 微信搜索“小程序数据助手”。

---

总结

1. 创建项目：注册账号 → 安装工具 → 获取 AppID。
2. 代码结构：app.js/json/wxss + pages 目录。
3. 页面组成：.wxml（结构）、.wxss（样式）、.json（配置）、.js（逻辑）。
4. 组件使用：view、text、image 等。
5. 协同发布：成员管理 → 版本控制 → 提交审核 → 发布上线。