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

微信小程序开发学习笔记

news 来源：原创 2025/9/9 11:45:47

微信小程序开发学习笔记

一、基础结构
- 项目结构
- 配置文件（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 - 页面路由配置，定义页面路径、窗口样式、底部导航等
主要功能：
首页 - 展示推荐菜品和快捷入口
点餐 - 提供菜品分类浏览和下单功能
我的 - 个人中心，包含订单管理和其他功能
登录 - 用户登录和授权
订单详情 - 查看订单信息和状态

基础图片：/static/
├── logo.png # 应用logo，用于登录页和导航栏
└── default-avatar.png # 默认头像图片

菜品图片（menu.vue 中使用）：
热销套餐：

香辣鸡腿堡套餐
双层牛肉堡套餐
招牌炒面套餐
红烧牛肉面套餐

麻辣卤味：

卤牛肉
麻辣牛肉
卤鸭翅
卤鸭脖
卤猪耳
卤鸡爪

风味凉菜：

凉拌黄瓜
凉拌木耳
口水鸡
夫妻肺片
凉拌海带丝
凉拌土豆丝

招牌面食：

重庆小面
担担面
阳春面
牛肉面
炸酱面
葱油拌面

家常菜：

红烧肉
糖醋里脊
鱼香肉丝
宫保鸡丁
麻婆豆腐
青椒土豆丝
水煮肉片
回锅肉

主食：

香辣鸡腿堡
双层牛肉堡
米饭
馒头

小食：

薯条
鸡块
炸鸡翅
洋葱圈

饮料：

可乐
雪碧
果汁
奶茶

首页轮播图（index.vue 中使用）：
/static/banners/
├── banner1.jpg # 轮播图1
├── banner2.jpg # 轮播图2
└── banner3.jpg # 轮播图3

推荐商品图片（index.vue 中使用）：

香辣鸡腿堡
双层牛肉堡
巨无霸

总计需要：
基础图片：2张
菜品图片：38张
轮播图：3张
推荐商品图片：3张

项目并不完整，后期完善发布

微信小程序开发学习笔记

一、基础结构

项目结构

配置文件（app.json）

二、常用组件

视图组件

表单组件

导航组件

三、API 常用功能

网络请求

数据缓存

用户信息

支付功能

四、框架与工具

框架

开发者工具

五、开发流程

六、最佳实践

七、常见问题

路由跳转：

权限问题：

八、参考资源

九、项目

相关文章：