当前位置：首页 > news >正文

微信小程序开发学习笔记

news 来源：原创 2025/5/31 15:50:19

微信小程序开发学习笔记

一、基础结构
- 项目结构
- 配置文件（app.json）
二、常用组件
- 视图组件
- 表单组件
- 导航组件
三、API 常用功能
- 网络请求
- 数据缓存
- 用户信息
- 支付功能
四、框架与工具
- 框架
- 开发者工具
五、开发流程
六、最佳实践
七、常见问题
- 路由跳转：
- 权限问题：
八、参考资源
九、项目

一、基础结构

项目结构

app.js：小程序入口文件（生命周期、全局数据）
app.json：全局配置（页面路由、窗口样式、tabBar 等）
app.wxss：全局样式
pages/：存放页面文件（每个页面包含.js、.json、.wxml、.wxss）

配置文件（app.json）

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationStyle": "custom"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

二、常用组件

视图组件

<view>：容器（类似 div）
<swiper>：轮播图
<scroll-view>：可滚动区域
<movable-view>：可移动视图

表单组件

<input>：输入框
<picker>：选择器（日期、时间、列表）
<form>：表单提交
<checkbox>/<radio>：多选 / 单选

导航组件

<navigator>：页面跳转
<button>：按钮（可绑定open-type实现授权、客服等功能）

三、API 常用功能

网络请求

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.error(err);
  }
});

数据缓存

// 存储
wx.setStorageSync('key', 'value');
// 获取
const value = wx.getStorageSync('key');

用户信息

wx.getUserProfile({
  desc: '用于完善会员资料',
  success(res) {
    console.log(res.userInfo);
  }
});

支付功能

wx.requestPayment({
  timeStamp: '时间戳',
  nonceStr: '随机字符串',
  package: '统一下单接口返回的package参数',
  signType: 'HMAC-SHA256',
  paySign: '签名',
  success(res) {
    console.log('支付成功');
  }
});

四、框架与工具

框架

uniapp：跨平台开发框架（支持微信 / 支付宝 / APP 等）
Taro：React 语法开发小程序
Wepy：类 Vue 框架

开发者工具

模拟器：调试不同设备
调试器：实时查看 WXML、JS、样式
性能分析：检测内存、渲染性能

五、开发流程

注册小程序：微信公众平台（mp.weixin.qq.com）
创建项目：微信开发者工具扫码登录
开发与调试：使用npm安装依赖，通过wx:for、wx:if等指令动态渲染
代码提交：上传代码至微信服务器
审核与发布：提交审核，通过后发布

六、最佳实践

代码规范：使用eslint或prettier统一代码风格
性能优化：

减少setData调用次数
使用wx:key优化列表渲染
图片压缩（image组件设置mode）

调试技巧：

console.log输出调试信息
使用wx.showToast提示用户
开启debug模式（app.js中设置debug: true）

七、常见问题

路由跳转：

wx.navigateTo：保留当前页面，跳转到新页面
wx.redirectTo：关闭当前页面，跳转到新页面
wx.navigateBack：返回上一页

权限问题：

需在app.json中声明权限（如地理位置、相机）
调用敏感 API 前需先授权
兼容性：
避免使用 H5 特有的 API
使用rpx单位适配不同屏幕

八、参考资源

微信小程序官方文档
微信开发者工具下载
云开发文档

九、项目

点餐小程序项目的目录结构

主要目录说明：

项目根目录/
├── pages/ # 页面文件夹
│ ├── index/ # 首页
│ │ ├── index.vue # 首页组件
│ │ └── index.json # 首页配置
│ ├── menu/ # 点餐页
│ │ ├── menu.vue # 点餐页组件
│ │ └── menu.json # 点餐页配置
│ ├── my/ # 我的页面
│ │ ├── my.vue # 我的页面组件
│ │ └── my.json # 我的页面配置
│ ├── login/ # 登录页
│ │ ├── login.vue # 登录页组件
│ │ └── login.json # 登录页配置
│ └── order-detail/ # 订单详情页
│ ├── order-detail.vue # 订单详情组件
│ └── order-detail.json # 订单详情配置
│
├── static/ # 静态资源目录
│ ├── logo.png # 应用logo
│ └── tabbar/ # 底部导航栏图标
│ └── icons.js # 图标SVG组件
│
├── unpackage/ # 编译后的文件目录
│ └── dist/ # 各平台的打包文件
│ └── dev/ # 开发版本
│ └── mp-weixin/ # 微信小程序相关文件
│
├── manifest.json # 应用配置文件
└── pages.json # 页面路由配置文件

pages/ - 页面文件夹
index/ - 首页，展示推荐菜品和功能入口
menu/ - 点餐页，展示菜品分类和列表
my/ - 个人中心页面，用户信息和功能入口
login/ - 登录页面，处理用户登录
order-detail/ - 订单详情页，显示订单信息
static/ - 静态资源目录
存放图片、图标等静态资源
tabbar/ 存放底部导航栏相关资源
unpackage/ - 编译目录
存放编译后的代码和资源
不需要手动修改此目录
配置文件
manifest.json - 应用的配置文件，包含应用信息、权限等
pages.json - 页面路由配置，定义页面路径、窗口样式、底部导航等
主要功能：
首页 - 展示推荐菜品和快捷入口
点餐 - 提供菜品分类浏览和下单功能
我的 - 个人中心，包含订单管理和其他功能
登录 - 用户登录和授权
订单详情 - 查看订单信息和状态