一、搭建阶段注册小程序 获取 AppID官网注册mp.weixin.qq.com获取 AppID开发必须用开发工具微信开发者工具项目一级目录结构├── app.js // 全局入口├── app.json // 全局配置页面、tabBar、窗口├── app.wxss // 全局样式├── pages/ // 所有页面└── utils/ // 工具函数app.json 必配开发第一步pages页面注册window导航栏、背景色tabBar底部导航permission权限位置、相册subPackages分包页面注册preloadRule分包预加载分包请访问【分包使用和由来】二、基础开发阶段页面四件套.js 逻辑.wxml 结构.wxss 样式.json 页面配置【下拉刷新 上拉加载更多 原生自带的】{usingComponents:{}, /* 引入自定义组件 必用 */navigationBarTitleText:页面标题, /* 页面顶部标题 必用 */navigationBarBackgroundColor:#ffffff, /* 导航栏背景色 */navigationBarTextStyle:black, /* 导航栏文字颜色 只支持 black / white */backgroundColor:#f5f5f5, /* 页面背景区域颜色下拉刷新时看到的底色 */backgroundTextStyle:dark, /* 下拉 loading 样式 dark / light */enablePullDownRefresh:true, /* 是否开启下拉刷新 常用 */onReachBottomDistance:50, /* 上拉触底距离加载更多常用 */disableScroll:false, /* 禁止页面滚动 一般不配 */app-plus:{}, /* 跨端配置 小程序不用管 */style:v2, /* 新版组件样式 必须加 官方推荐 */usingSwiper:true/* 是否使用swiper优化 可不配 */}数据绑定 渲染{{ }} 插值wx:if / wx:elsewx:for 列表循环必须加 key事件绑定bindtap 点击bindinput 输入事件传参 />下面这种非常严格必须左右有空格否则会报错setData 数据更新最重要单纯用this.obj.属性赋值更新数据这种写法视图层无法更新必须用 setData 才会刷新视图层修改对象 setData({ ‘userInfo.name’: ‘xxx’ })说到数据更新这里说下全局变量更新其他组件更新全局变量中某个对象直接赋值数据无法更新✅ 基础数据类型包含string、number、boolean、null、undefined、Symbol、BigInt存储方式直接在栈内存中存储值本身 , 赋值时会复制一份完整的值两个变量完全独立互不影响✅ 引用类型赋值只是「复制地址」永远指向同一个对 , 栈内存存地址 堆内存存真实数据, 同一个地址再赋值一次页面认为数据没变化不会刷新解决办法// 深拷贝全局数据彻底切断引用避免污染const globalUserInfo app.globalData.userInfo ? JSON.parse(JSON.stringify(app.globalData.userInfo)) : {};三、生命周期全局、页面、组件全局生命周期App.onLaunch 启动第一次进来获取定位后续不在执行App.onShow / onHide页面生命周期onLoad → 加载一次onShow → 显示每次进来都会走onReadyonHide → 隐藏onUnload → 卸载组件生命周期created创建组件最早执行不能 setDataattached组件挂载到页面最常用相当于页面 onLoad可以 setDataready渲染完毕moved组件移动几乎不用detached组件卸载、销毁相当于页面 onUnload可访问【页面page和组件component的详细对比】页面中引入组件父子父-页面、子-组件组件执行顺序组件 created、 attached页面 onLoad、 onShow组件 ready页面 onReady离开页面时页面 onHide、组件 detached、页面 onUnload四、常用 API提示框wx.showToastwx.showModal本地存储wx.setStorageSyncwx.getStorageSync路由跳转wx.switchTab → 跳 tabBarwx.navigateTo → 普通跳转wx.redirectTo → 替换页面获取用户信息 / 头像昵称小程序专用获取方式位置权限wx.getLocation小程序后台配置隐私协议必须配置 permission五、微信登录核心介绍登录流程wx.login → 获取 code传给后端 → 获取 token存入 globalData storage【面试常问如何处理登录授权】登录鉴权体系小程序登录 前端鉴权 请求拦截三步实现统一鉴权方案1.只在登录页执行拿到合法凭证 token2.前端判断 token页面进入前、点击前, 快速判断是否登录不用发请求3.接口统一校验401,后端真正校验 token 是否有效无效跳转登录登录成功跳回之前页面总结这套三合一流程叫【登录鉴权体系】。它通过 wx.login 实现登录获取 token通过前端判断 token 实现快速路由鉴权通过接口统一携带 token 和 401 拦截实现后端安全鉴权。三者结合既保证了用户体验又保证了系统安全是企业级小程序的标准方案。