微信小程序开发学习笔记

微信小程序开发学习笔记 一、基础结构项目结构配置文件（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: ' api.example /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 ）创建项目：微信开发者工具扫码登录开发与调试：使用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张

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