小程序从搭建到开发，涉及基础及必备知识总结

一、搭建阶段

注册小程序 + 获取 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 页面配置【下拉刷新 + 上拉加载更多 =原生自带的】

bash 复制代码

{
  "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:else

wx:for 列表循环（必须加 key）
事件绑定

bindtap 点击

bindinput 输入

事件传参 data-*（举例：事件触发后多个传参的写法，2种写法）

下面这种：非常严格，必须左右有空格，否则会报错
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 → 显示（每次进来都会走）

onReady

onHide → 隐藏

onUnload → 卸载
组件生命周期

created创建组件，最早执行不能 setData

attached组件挂载到页面最常用，相当于页面 onLoad可以 setData

ready渲染完毕

moved组件移动（几乎不用）

detached组件卸载、销毁相当于页面 onUnload
可访问【页面page和组件component的详细对比】
页面中引入组件，父子（父-页面、子-组件）组件执行顺序：

组件 created、 attached

页面 onLoad、 onShow

组件 ready

页面 onReady

离开页面时：页面 onHide、组件 detached、页面 onUnload

四、常用 API

提示框
wx.showToast
wx.showModal
本地存储
wx.setStorageSync
wx.getStorageSync
路由跳转
wx.switchTab → 跳 tabBar
wx.navigateTo → 普通跳转
wx.redirectTo → 替换页面
获取用户信息 / 头像昵称
小程序专用获取方式
位置权限
wx.getLocation（小程序后台，配置隐私协议，）
必须配置 permission

五、微信登录核心介绍

登录流程

wx.login → 获取 code

传给后端 → 获取 token

存入 globalData + storage
【面试常问，如何处理登录授权】登录鉴权体系：小程序登录 + 前端鉴权 + 请求拦截，三步实现统一鉴权方案

1.只在登录页执行，拿到合法凭证 token

2.前端判断 token（页面进入前、点击前）, 快速判断是否登录，不用发请求

3.接口统一校验（401）,后端真正校验 token 是否有效，无效跳转登录，登录成功跳回之前页面

总结：这套三合一流程叫【登录鉴权体系】。

它通过 wx.login 实现登录获取 token，通过前端判断 token 实现快速路由鉴权，通过接口统一携带 token 和 401 拦截实现后端安全鉴权。三者结合，既保证了用户体验，又保证了系统安全，是企业级小程序的标准方案。