「 简记往来」第四篇：微信小程序开发环境搭建与工程化配置

一、微信小程序开发的三件套微信小程序开发需要准备三样东西微信开发者账号注册微信公众平台账号AppID在小程序后台获取开发者工具下载安装微信开发者工具二、注册开发者账号第一步注册访问微信公众平台mp.weixin.qq.com点击“立即注册”选择“小程序”。填写邮箱、密码、激活邮件选择主体类型个人/企业。注意事项个人主体可以注册小程序但部分能力受限如微信支付、获取手机号等企业主体功能完整但需要营业执照和认证费用简记往来目前用个人主体核心功能不受影响第二步获取AppID注册完成后登录小程序后台在“开发→开发管理→开发设置”中找到AppID。AppID是唯一标识后续所有开发配置都需要用到。三、安装开发者工具下载地址微信公众平台 → 工具 → 开发者工具支持Windows和macOS双平台。下载安装后用微信扫码登录。首次启动配置选择“小程序”项目类型填写项目名称填入AppID选择项目目录新建项目后会生成一个基础的小程序模板。四、工程化配置4.1 目录结构miniprogram/ ├── pages/ # 页面文件 │ ├── index/ # 首页 │ ├── daily/ # 日常账本 │ └── gift/ # 礼账本 ├── components/ # 自定义组件 ├── utils/ # 工具函数 ├── services/ # API服务 ├── store/ # 状态管理 ├── images/ # 图片资源 ├── app.js # 小程序入口 ├── app.json # 小程序配置 └── app.wxss # 全局样式4.2 ESLint Prettier 配置微信开发者工具自带代码格式化功能但默认配置不够严格。推荐配置.eslintrc.jsmodule.exports{extends:[eslint:recommended],parserOptions:{ecmaVersion:2020,sourceType:module},env:{es6:true,node:true,browser:true},rules:{no-unused-vars:warn,no-console:off,quotes:[error,single],semi:[error,always]}}4.3 Git工作流# 初始化Git仓库gitinit# 创建.gitignoreechonode_modules/.gitignoreecho.idea/.gitignoreechodist/.gitignore# 首次提交gitadd.gitcommit-mfeat: 初始化小程序项目4.4 app.json 配置{pages:[pages/index/index,pages/daily/daily,pages/gift/gift,pages/profile/profile],window:{navigationBarBackgroundColor:#FFFFFF,navigationBarTitleText:简记往来,navigationBarTextStyle:black,backgroundColor:#F8FAFE},tabBar:{custom:true,color:#88909A,selectedColor:#3D5A73,list:[{pagePath:pages/index/index,text:首页},{pagePath:pages/daily/daily,text:账本},{pagePath:pages/gift/gift,text:礼账},{pagePath:pages/profile/profile,text:我的}]},style:v2,sitemapLocation:sitemap.json}五、真机调试开发者工具提供了真机调试功能点击工具栏的“真机调试”用手机微信扫描二维码手机端会打开小程序并连接到开发者工具的调试面板真机调试是发现兼容性问题的关键步骤。不同机型的屏幕适配、API兼容性都需要在真机上验证。六、常见问题问题1AppID填错了怎么办在project.config.json中修改appid字段。问题2开发者工具编译报错“找不到页面”检查app.json中的pages配置确保路径正确。问题3真机调试连不上检查手机和电脑是否在同一网络或者使用“真机调试2.0”模式。七、总结环境搭建和工程化配置虽然基础但直接影响后续的开发效率。这一篇没有写太多代码但每一行配置都是实际项目用到的。下一篇我们来聊聊小程序项目结构设计目录怎么分、文件怎么放。评论区聊聊你的小程序项目结构是怎么组织的