目标：理解小程序登录整体流程，区分“登录”和“获取用户信息/授权”的关系，能在项目中实现一个可用的登录体系。

一、几个容易混淆的概念

1. 小程序登录（后端会话）
   • 核心是：用 wx.login 拿到 code → 发给你自己的服务器 → 换取 openid、session_key，建立你自己的登录态（token）。
   • 这是“服务端鉴权”的基础，与 UI 授权弹窗没有直接关系。
2. 用户信息 / 授权（头像、昵称、手机号、地理位置等）
   • 需要用户同意授权（按钮触发），后台才可以拿到用户信息。
   • 常见 API：wx.getUserProfile（旧规范）、手机号获取、地理位置授权等。
3. 微信侧登录 vs 业务侧登录
   • 微信侧：微信已经登录（用户在用微信），小程序天然拥有用户在微信的身份（openid）。
   • 业务侧：你自己的应用系统需要知道“这是哪个用户”，并给他分配账号、权限、数据（由你自己的 token / userId 维护）。

记忆：微信登录是“Who”，授权是“Can I read your X”（头像、手机号、位置等）。

二、小程序登录整体流程（推荐做法）

一个常见的“服务端登录”流程：

1. 小程序调用 wx.login() 拿到 code
2. 把 code 发送给你自己的服务器
3. 服务器调用微信的 jscode2session 接口，得到 openid、session_key（和可选 unionid）
4. 服务器根据 openid 在数据库中查找 / 创建用户，生成自己的 token（例如 JWT）
5. 服务器把 token 和业务用户信息返回给小程序
6. 小程序保存 token 到：
   • 内存（App.globalData）
   • 本地缓存（wx.setStorageSync）用于下次自动登录

三、前端：wx.login 基本使用

// pages/login/login.js
Page({
  data: {
    loading: false
  },

  onLoginTap() {
    this.setData({ loading: true })

    wx.login({
      success: (res) => {
        if (res.code) {
          // 把 code 发给后台
          this.requestLogin(res.code)
        } else {
          console.error('登录失败！' + res.errMsg)
          this.setData({ loading: false })
        }
      },
      fail: (err) => {
        console.error('wx.login 调用失败', err)
        this.setData({ loading: false })
      }
    })
  },

  requestLogin(code) {
    wx.request({
      url: 'https://your-domain.com/api/login',
      method: 'POST',
      data: { code },
      success: (res) => {
        // 假设返回 { code: 0, data: { token, userInfo } }
        if (res.data.code === 0) {
          const { token, userInfo } = res.data.data
          const app = getApp()

          app.globalData.token = token
          app.globalData.userInfo = userInfo

          wx.setStorageSync('TOKEN', token)
          wx.setStorageSync('USER_INFO', userInfo)

          // 登录成功，跳转到首页或个人中心
          wx.reLaunch({
            url: '/pages/index/index'
          })
        } else {
          wx.showToast({
            title: res.data.msg || '登录失败',
            icon: 'none'
          })
        }
      },
      fail: (err) => {
        console.error('请求登录接口失败', err)
      },
      complete: () => {
        this.setData({ loading: false })
      }
    })
  }
})

四、后端（简要思路，语言自定）

这里只记“思路”，实现看你用什么语言 / 框架。

1. 接收小程序传来的 code

2. 调用微信接口：

   https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
   

   得到类似数据：

   {
     "openid": "OPENID",
     "session_key": "SESSIONKEY",
     "unionid": "UNIONID"
   }
   

3. 根据 openid 在数据库中查找用户：
   • 有 → 读取该用户
   • 无 → 创建新用户（可初始化一些信息）
4. 生成业务 token（例如 JWT or 自定义 sessionId）
5. 将 token + 用户基本信息 返回给前端

关键点：

• session_key 是解密敏感数据（如手机号）的关键，不要直接暴露给前端。
• 后端统一处理 token 的验证，前端每次请求接口都带上 token。

五、自动登录（启动时恢复登录态）

5.1 app.js 中恢复缓存

// app.js
App({
  onLaunch() {
    const token = wx.getStorageSync('TOKEN')
    const userInfo = wx.getStorageSync('USER_INFO')

    if (token) {
      this.globalData.token = token
      this.globalData.userInfo = userInfo
    }
  },

  globalData: {
    token: '',
    userInfo: null
  }
})

5.2 页面中检查登录态

// pages/profile/profile.js
Page({
  onShow() {
    const app = getApp()

    if (!app.globalData.token) {
      // 未登录，引导去登录页
      wx.navigateTo({
        url: '/pages/login/login'
      })
    } else {
      // 已登录，正常显示页面
      this.setData({
        userInfo: app.globalData.userInfo
      })
    }
  }
})

六、用户信息授权（头像昵称）

新政策下推荐按“必要即申请”的原则，不要随意弹授权框。

6.1 老的 button open-type="getUserInfo" 已不推荐

现在更多是：使用 wx.getUserProfile 或相关接口（注意看最新官方文档）。

示意写法（逻辑思路）：

<button type="primary" bindtap="onGetUserProfile">获取头像昵称</button>

Page({
  onGetUserProfile() {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        // res.userInfo 中有 avatarUrl, nickName 等
        const app = getApp()
        const userInfo = res.userInfo

        // 更新全局和本地缓存
        app.globalData.userInfo = {
          ...app.globalData.userInfo,
          ...userInfo
        }

        wx.setStorageSync('USER_INFO', app.globalData.userInfo)

        // 可以把用户信息同步给自己的后台
        this.updateUserProfileToServer(userInfo)
      },
      fail: () => {
        wx.showToast({
          title: '你拒绝了头像昵称授权',
          icon: 'none'
        })
      }
    })
  },

  updateUserProfileToServer(userInfo) {
    // 调后台更新资料
  }
})

实际开发中需要根据最新隐私政策选用正确的接口，尊重用户授权。

七、获取手机号授权（常见需求）

必须使用微信提供的获取手机号能力，一般流程：

1. 在页面放一个按钮，open-type="getPhoneNumber"（由用户点击触发）
2. 在回调中获取 encryptedData 和 iv
3. 把这两个字段连同 session_key 或 code 发送给你的服务器
4. 服务器用微信提供的解密算法解密出真实手机号，并绑定到用户

前端示例：

<button
  type="primary"
  open-type="getPhoneNumber"
  bindgetphonenumber="onGetPhoneNumber"
>
  获取手机号
</button>

Page({
  onGetPhoneNumber(e) {
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      const { encryptedData, iv } = e.detail
      // 建议后台使用 session_key 解密
      this.sendPhoneToServer(encryptedData, iv)
    } else {
      wx.showToast({
        title: '你拒绝了手机号授权',
        icon: 'none'
      })
    }
  },

  sendPhoneToServer(encryptedData, iv) {
    wx.request({
      url: 'https://your-domain.com/api/bindPhone',
      method: 'POST',
      data: {
        encryptedData,
        iv
      },
      success: (res) => {
        // 后台解密后返回手机号等
      }
    })
  }
})

解密逻辑必须在服务器侧完成，避免泄露 session_key 和解密逻辑。

八、登录态校验与过期处理

8.1 前端请求时统一带上 token

封装 request（简化示意）：

// utils/request.js
const BASE_URL = 'https://your-domain.com'

function request(options) {
  const app = getApp()
  const token = app.globalData.token || wx.getStorageSync('TOKEN')

  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        Authorization: token ? `Bearer ${token}` : '',
        ...(options.header || {})
      },
      success(res) {
        // 举例：后端约定 code = 401 表示未登录 / 登录过期
        if (res.data.code === 401) {
          handleNotLogin()
          reject(res.data)
        } else {
          resolve(res.data)
        }
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

function handleNotLogin() {
  const app = getApp()
  app.globalData.token = ''
  app.globalData.userInfo = null
  wx.removeStorageSync('TOKEN')
  wx.removeStorageSync('USER_INFO')

  wx.navigateTo({
    url: '/pages/login/login'
  })
}

module.exports = {
  request
}

8.2 后端统一校验 token

• 拦截所有需要登录的接口
• 没有 token 或 token 失效 → 返回统一错误码（如 401）
• 前端根据这个错误码做“清除本地登录信息 + 跳到登录页”

九、注销 / 退出登录

前端逻辑一般：

// pages/profile/profile.js
Page({
  onLogout() {
    wx.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: (res) => {
        if (res.confirm) {
          const app = getApp()
          app.globalData.token = ''
          app.globalData.userInfo = null
          wx.removeStorageSync('TOKEN')
          wx.removeStorageSync('USER_INFO')

          // 可选：通知服务器注销（清 token）
          // wx.request({ url: '/api/logout', method: 'POST' })

          wx.reLaunch({
            url: '/pages/index/index'
          })
        }
      }
    })
  }
})

十、隐私 & 合规简要提示

• 在用户第一次打开小程序时，建议展示隐私弹窗（参考微信最新规范）
• 获取用户信息、手机号、位置等，必须说明用途，并由用户主动触发
• 不要在未授权的情况下偷偷上报敏感信息
• 对用户可识别的信息（如手机号）要在服务端做好安全存储和访问控制

目标：学会把“一个大页面”拆成多个可复用的模块（组件 / 公共函数 / 配置），提升代码可维护性与复用性。

一、为什么要做“模块化页面”？

常见痛点：

• 单个页面文件越来越长：wxml、js 逻辑堆在一起，难以维护
• 多个页面重复写类似的 UI 区块：例如商品卡片、标题栏、操作按钮区
• 相似的业务逻辑在多个页面拷贝粘贴：例如分页加载、列表刷新

模块化的核心目标：

1. UI 模块化：把重复使用的 UI 模块拆成组件
2. 逻辑模块化：把通用逻辑封装成工具函数 / 行为（behavior）
3. 配置模块化：把常量和接口配置抽离到独立文件

二、组件化：把重复的 UI 区块抽成组件

2.1 什么时候考虑做组件？

• 多个页面出现相同结构的 UI：
  • 商品卡片、用户信息卡片、空状态提示、标题区、底部操作栏
• 单个页面内部同一块 UI 重复多次
• 某块 UI 逻辑较复杂（内部有状态和交互）

2.2 组件的基本结构回顾

components/product-card/
  ├── product-card.wxml
  ├── product-card.wxss
  ├── product-card.js
  └── product-card.json

product-card.json：

{
  "component": true
}

product-card.wxml（示例）：

<view class="product-card" bindtap="onTap">
  <image class="cover" src="" mode="aspectFill" />
  <view class="info">
    <view class="title"></view>
    <view class="price">￥</view>
  </view>
</view>

product-card.js（接收数据 + 发事件）：

Component({
  properties: {
    item: {
      type: Object,
      value: {}
    }
  },

  methods: {
    onTap() {
      this.triggerEvent('tap', { item: this.data.item })
    }
  }
})

在页面中使用：

页面 json：

{
  "usingComponents": {
    "product-card": "/components/product-card/product-card"
  }
}

页面 wxml：

<product-card
  wx:for=""
  wx:key="id"
  item=""
  bind:tap="onProductTap"
/>

页面 js：

Page({
  data: {
    list: []
  },

  onProductTap(e) {
    const item = e.detail.item
    // TODO: 跳转详情页等
  }
})

三、逻辑模块化：抽离公共函数 / 请求

3.1 Utils 工具函数

项目结构示例：

utils/
  ├── request.js   # 封装网络请求
  ├── format.js    # 封装格式化相关函数
  └── auth.js      # 登录、权限等

utils/request.js 示例：

const BASE_URL = 'https://example.com/api'

function request({ url, method = 'GET', data = {} }) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method,
      data,
      header: {
        // 示例：统一加 token
        Authorization: wx.getStorageSync('token') || ''
      },
      success(res) {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

module.exports = {
  request
}

页面中使用：

const { request } = require('../../utils/request')

Page({
  async fetchList() {
    const res = await request({ url: '/product/list', data: { page: 1 } })
    this.setData({ list: res.data })
  }
})

这样每个页面就不用重复写 wx.request，页面逻辑更干净。

3.2 行为（Behavior）：抽离通用 Page 逻辑（进阶）

适合场景：

• 多个页面都有相似的数据结构和方法
  • 如“列表页”：分页、下拉刷新、上拉加载更多

示例：封装一个列表行为 behaviors/list.js

// behaviors/list.js
module.exports = Behavior({
  data: {
    list: [],
    page: 1,
    pageSize: 10,
    hasMore: true,
    loading: false
  },

  methods: {
    async loadMore() {
      if (!this.data.hasMore || this.data.loading) return
      this.setData({ loading: true })
      const nextPage = this.data.page + 1
      const list = await this.fetchPage(nextPage) // 要求页面实现此方法
      this.setData({
        page: nextPage,
        list: this.data.list.concat(list),
        hasMore: list.length === this.data.pageSize,
        loading: false
      })
    }
  }
})

在页面中使用：

const listBehavior = require('../../behaviors/list')
const { request } = require('../../utils/request')

Page({
  behaviors: [listBehavior],

  async fetchPage(page) {
    const res = await request({ url: '/product/list', data: { page } })
    return res.data
  },

  onReachBottom() {
    this.loadMore()
  }
})

行为可以理解为“可混入的公共逻辑模块”，适合多个页面共用复杂逻辑。

四、配置模块化：常量 / 接口统一管理

4.1 常量配置

config/
  ├── api.js        # 接口路径
  └── consts.js     # 常量枚举

config/api.js：

const API = {
  PRODUCT_LIST: '/product/list',
  PRODUCT_DETAIL: '/product/detail',
  USER_INFO: '/user/info'
}

module.exports = API

使用：

const API = require('../../config/api')
const { request } = require('../../utils/request')

Page({
  async fetchList() {
    const res = await request({ url: API.PRODUCT_LIST })
    this.setData({ list: res.data })
  }
})

这样改接口路径时，只需要改配置文件，不用到处查找字符串。

五、页面内部的“区域模块化”实践

即使不抽成组件，也可以在一个页面内部做逻辑分区，让结构更清晰。

5.1 JS 中按功能块组织代码

Page({
  data: {
    // UI 数据
    loading: false,
    activeTab: 0,

    // 业务数据
    productList: [],
    cartList: []
  },

  // ========== 生命周期 ==========
  onLoad() {
    this.init()
  },

  // ========== 初始化逻辑 ==========
  async init() {
    this.setData({ loading: true })
    await Promise.all([this.fetchProductList(), this.fetchCartList()])
    this.setData({ loading: false })
  },

  // ========== 数据请求 ==========
  async fetchProductList() {
    // ...
  },

  async fetchCartList() {
    // ...
  },

  // ========== 事件处理 ==========
  onTabChange(e) {
    this.setData({ activeTab: e.detail.index })
  },

  onProductTap(e) {
    const item = e.currentTarget.dataset.item
    // ...
  }
})

按“生命周期 / 初始化 / 请求 / 事件处理”等分段，让页面 JS 更可读。

5.2 WXML 中按区域分块注释

<!-- 顶部 banner 区 -->
<swiper>...</swiper>

<!-- 分类 tab 区 -->
<view class="tabs">...</view>

<!-- 商品列表区 -->
<view class="product-list">...</view>

<!-- 底部操作栏 -->
<view class="bottom-bar">...</view>

即使暂时不抽组件，清晰的区域划分也是“模块化”的重要一步。

六、小项目实践示例：把“首页”做成模块化

假设首页包括：

• Banner 轮播图
• 分类入口区
• 推荐商品列表

我们可以拆为：

• components/banner-swiper：轮播图组件
• components/category-grid：分类九宫格组件
• components/product-card：商品卡片组件
• utils/request.js：请求封装
• config/api.js：接口地址

首页 wxml：

<view class="page-home">
  <banner-swiper list="" bind:tap="onBannerTap" />

  <category-grid list="" bind:tap="onCategoryTap" />

  <view class="section-title">推荐商品</view>
  <product-card
    wx:for=""
    wx:key="id"
    item=""
    bind:tap="onProductTap"
  />
</view>

首页 js：

const API = require('../../config/api')
const { request } = require('../../utils/request')

Page({
  data: {
    bannerList: [],
    categoryList: [],
    productList: []
  },

  onLoad() {
    this.init()
  },

  async init() {
    const [bannerRes, categoryRes, productRes] = await Promise.all([
      request({ url: API.BANNER_LIST }),
      request({ url: API.CATEGORY_LIST }),
      request({ url: API.PRODUCT_RECOMMEND })
    ])

    this.setData({
      bannerList: bannerRes.data,
      categoryList: categoryRes.data,
      productList: productRes.data
    })
  },

  onBannerTap(e) { /* ... */ },
  onCategoryTap(e) { /* ... */ },
  onProductTap(e) { /* ... */ }
})

页面变得更像“拼装模块”，而非堆积代码。

七、常见问题与建议

1. 什么时候抽组件？什么时候不抽？
   • 明显重复出现、后续会复用 → 抽组件
   • 只在单一页面使用、逻辑简单 → 先不抽，后面多处用了再抽
2. 组件之间通信过于复杂
   • 父 → 子：尽量用 properties
   • 子 → 父：triggerEvent
   • 复杂跨层级通信：考虑把状态上移到更高层或使用全局状态
3. utils 里写了太多与页面高度耦合的逻辑
   • 工具函数应该是“通用、无业务或弱业务”的
   • 具体页面逻辑仍然应在页面 / 组件内部
4. 文件过多导致结构混乱
   • 使用清晰的目录：components/、utils/、config/、behaviors/
   • 文件名做到“见名知意”，如 user-card、list-behavior、api.js

目标：掌握在小程序中如何存放全局共享数据（App.globalData）以及如何使用本地缓存（wx.setStorage / wx.getStorage 等），并理解各自适用场景。

一、为什么需要全局数据和缓存？

常见需求：

• 用户信息、多页面共享的配置（主题、语言、登录状态等）
• 登录态、token、用户偏好（夜间模式、上次选择的城市）
• 部分数据希望 进程内共享（只在本次使用内有效）
• 部分数据希望 下次打开小程序仍然存在（例如登录信息、历史记录）

对比：

• 全局数据（globalData）：只在“这次打开小程序”的生命周期内存在，关闭后清空。
• 本地缓存（storage）：写进本地，关闭重开仍然存在，除非手动清除或被系统清理。

二、全局数据：App.globalData

2.1 定义全局数据

app.js：

App({
  onLaunch() {
    // 小程序初始化时可以进行一些全局设置
    console.log('App Launch')
  },

  onShow() {
    console.log('App Show')
  },

  globalData: {
    userInfo: null,      // 用户信息
    token: '',           // 登录 token
    theme: 'light',      // 主题：light/dark
    language: 'zh-CN'    // 当前语言
  }
})

• globalData：一个普通对象，存放全局共享数据
• 所有页面和组件都可以通过 getApp() 访问

2.2 在页面中读取 / 修改全局数据

Page({
  data: {
    userInfo: null
  },

  onLoad() {
    const app = getApp()
    this.setData({
      userInfo: app.globalData.userInfo
    })
  },

  // 更新全局主题
  switchTheme() {
    const app = getApp()
    const newTheme = app.globalData.theme === 'light' ? 'dark' : 'light'
    app.globalData.theme = newTheme
    this.setData({ theme: newTheme })
  }
})

要点：

• getApp() 返回当前小程序的 App 实例
• 不建议在 App 的 onLaunch 中立即调用 getCurrentPages()（这在文档中有说明）

三、全局数据的典型使用场景

1. 用户登录信息（不必持久化的部分）
   • 如当前登录用户基础信息
   • token 通常会同时放入缓存，便于下次自动登录
2. 在多个页面需要共享的临时状态
   • 当前选择的城市 / tab / 主题
   • 某些操作的临时结果（如一个复杂表单分步保存的数据）
3. 全局配置 & 常量
   • API 基础地址（虽然更推荐单独封装 config 文件）
   • 业务层常量（如某些枚举）

注意：全局数据不是持久存储，小程序被完全关闭（进程被杀）后会消失。

四、本地缓存（Storage）基础

微信提供了两套 API：

• 同步接口：wx.setStorageSync / wx.getStorageSync / wx.removeStorageSync / wx.clearStorageSync
• 异步接口：wx.setStorage / wx.getStorage / wx.removeStorage / wx.clearStorage

4.1 同步接口（简洁，适合小量数据）

// 写入
wx.setStorageSync('token', 'abc123')

// 读取
const token = wx.getStorageSync('token')

// 删除某项
wx.removeStorageSync('token')

// 清空所有缓存
wx.clearStorageSync()

特点：

• 调用后立即返回，逻辑简单
• 在同步调用很多、数据较大时会阻塞 js 线程（注意性能）

4.2 异步接口（建议在大多数业务中使用）

// 写入
wx.setStorage({
  key: 'userInfo',
  data: { name: 'Tom', age: 18 },
  success() {
    console.log('保存成功')
  },
  fail(err) {
    console.error('保存失败', err)
  }
})

// 读取
wx.getStorage({
  key: 'userInfo',
  success(res) {
    console.log('读取到的数据：', res.data)
  },
  fail() {
    console.log('没有这个 key 或读取失败')
  }
})

// 删除
wx.removeStorage({
  key: 'userInfo',
  success() {
    console.log('删除成功')
  }
})

// 清空所有缓存
wx.clearStorage()

五、缓存中可以存什么数据？

• data 支持：字符串、数字、布尔、对象、数组等（会被序列化）
• 建议存储：
  • token、用户 ID、简单用户信息
  • 用户偏好设置（语言、主题、开关状态）
  • 非敏感的业务数据缓存（如最近浏览记录）

安全注意：不要在本地缓存中存 密码 这类敏感信息。

六、全局数据 + 缓存：常见登录流程示例

6.1 登录成功后保存数据

// 假设在 login 页面
loginSuccessHandler(loginResult) {
  const app = getApp()
  const { token, userInfo } = loginResult

  // 1. 更新全局数据
  app.globalData.token = token
  app.globalData.userInfo = userInfo

  // 2. 写入缓存（方便下次打开自动登录）
  wx.setStorageSync('token', token)
  wx.setStorageSync('userInfo', userInfo)

  // 3. 跳转到首页
  wx.reLaunch({
    url: '/pages/index/index'
  })
}

6.2 小程序启动时尝试从缓存恢复登录态

app.js：

App({
  onLaunch() {
    // 从本地缓存中恢复用户信息
    const token = wx.getStorageSync('token')
    const userInfo = wx.getStorageSync('userInfo')

    if (token) {
      this.globalData.token = token
      this.globalData.userInfo = userInfo
    }
  },

  globalData: {
    token: '',
    userInfo: null
  }
})

页面中使用时：

Page({
  onShow() {
    const app = getApp()
    if (!app.globalData.token) {
      // 未登录，跳转到登录页
      wx.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
})

七、全局数据与缓存的对比与搭配使用

典型搭配：

• 登录成功后：
  • 全局数据：立即供各页面使用
  • 缓存：用于下次启动时恢复状态
• 设置项（例如夜间模式）：
  • 页面操作时：更新全局 + 缓存
  • 启动时：从缓存读出，写入全局

八、封装一个 Storage 工具模块（推荐）

8.1 创建工具文件

name=utils/storage.js

const TOKEN_KEY = 'TOKEN'
const USER_INFO_KEY = 'USER_INFO'
const SETTINGS_KEY = 'SETTINGS'

const storage = {
  // token
  setToken(token) {
    wx.setStorageSync(TOKEN_KEY, token)
  },
  getToken() {
    return wx.getStorageSync(TOKEN_KEY) || ''
  },
  clearToken() {
    wx.removeStorageSync(TOKEN_KEY)
  },

  // 用户信息
  setUserInfo(userInfo) {
    wx.setStorageSync(USER_INFO_KEY, userInfo)
  },
  getUserInfo() {
    return wx.getStorageSync(USER_INFO_KEY) || null
  },
  clearUserInfo() {
    wx.removeStorageSync(USER_INFO_KEY)
  },

  // 设置（比如主题、语言等）
  setSettings(settings) {
    wx.setStorageSync(SETTINGS_KEY, settings)
  },
  getSettings() {
    return wx.getStorageSync(SETTINGS_KEY) || {}
  },

  clearAll() {
    wx.clearStorageSync()
  }
}

module.exports = storage

8.2 在页面或 app 中使用

// app.js
const storage = require('./utils/storage')

App({
  onLaunch() {
    const token = storage.getToken()
    const userInfo = storage.getUserInfo()
    const settings = storage.getSettings()

    this.globalData.token = token
    this.globalData.userInfo = userInfo
    this.globalData.settings = settings
  },

  globalData: {
    token: '',
    userInfo: null,
    settings: {}
  }
})

页面中:

const storage = require('../../utils/storage')

Page({
  onLoad() {
    const settings = storage.getSettings()
    this.setData({ settings })
  },

  logout() {
    const app = getApp()
    app.globalData.token = ''
    app.globalData.userInfo = null
    storage.clearToken()
    storage.clearUserInfo()
  }
})

九、注意事项与常见坑

1. 缓存读不到 / 报 key 不存在
   • wx.getStorageSync('xxx') 如果没有对应 key，返回 ""（空字符串）或 undefined，要做好防御判断。
   • 异步的 wx.getStorage 在 fail 回调里处理“没有 key”的情况。
2. 频繁大数据读写
   • 不要在频繁触发的事件（如滚动、滑动）里大量读写 storage，容易卡顿。
   • 可在内存（data / globalData）中维护，合适时机再写回缓存。
3. 不同小程序间不共享缓存
   • 每个小程序都有自己独立的 storage 空间，不会互相干扰。
4. key 命名冲突
   • 建议封装 storage 工具模块，统一管理 key，避免手写字符串时写错或冲突。
5. globalData 不是响应式
   • 修改 getApp().globalData.xxx = 1 并不会自动更新页面显示，仍需配合 this.setData()。
   • 常见写法：页面读全局数据 + setData 到本页面 data 中。

目标：理解小程序“页面”与“路由栈”的概念，熟练使用各种跳转方式（navigateTo / redirectTo / switchTab / reLaunch / navigateBack），并能在项目中设计合理的页面结构和跳转流程。

一、核心概念：页面 & 路由栈

1.1 页面（page）

• 每一个 pages/xxx/xxx 下的 xxx.js + xxx.wxml + xxx.wxss + xxx.json 就是一个页面
• 在 app.json 的 pages 数组中注册：

  {
    "pages": [
      "pages/index/index",
      "pages/logs/logs"
    ]
  }
  

• pages 数组的第一项，就是小程序的首页

1.2 路由栈（页面栈）

• 小程序维护一个页面栈（类似浏览器的历史记录）
• 新开页面 → 入栈
  返回上一页 → 出栈
• 栈顶页面 = 当前正在展示的页面

可使用 getCurrentPages() 查看当前页面栈：

const pages = getCurrentPages()
console.log(pages)

注意：getCurrentPages() 只能在页面/组件逻辑中使用，不能在 app.js 的 onLaunch 里使用。

二、常用的 5 种页面跳转方式

2.1 wx.navigateTo —— 普通跳转（入栈）

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

特点：

• 打开非 tabBar 页面
• 保留当前页面，新页面压入栈顶
• 支持传递参数（通过 url query）

适用场景：

• 列表 → 详情
• 首页 → 二级页面

2.2 wx.redirectTo —— 替换当前页面

wx.redirectTo({
  url: '/pages/login/login'
})

特点：

• 打开非 tabBar 页面
• 关闭当前页面，用新页面替换当前栈顶
• 页面栈长度不增加

适用场景：

• 不需要返回上一页的跳转（比如登录成功后不需要再回登录页）
• 流程跳转中“不可返回”的节点

2.3 wx.switchTab —— 切换 tabBar 页面

wx.switchTab({
  url: '/pages/index/index'
})

特点：

• 只能跳转到 app.json 中 tabBar.list 声明的页面
• 切换后会 清空其它非 tabBar 页面的栈记录
• 不支持携带 query 参数（即 url 后面不能拼 ?a=1）

如需在切换 tab 时传参，一般方案是：

• 使用全局变量 / 全局状态管理
• 使用本地存储 wx.setStorageSync / wx.setStorage

2.4 wx.reLaunch —— 关闭所有页面并打开新页面

wx.reLaunch({
  url: '/pages/index/index'
})

特点：

• 关闭所有页面（清空页面栈）
• 打开指定的页面
• 可以是 tabBar 页，也可以是普通页

适用场景：

• 登录成功后，直接回到首页，避免用户通过返回按钮回到登录页
• 从错误页面重进主流程

2.5 wx.navigateBack —— 返回上一页 / 多级返回

// 返回上一页
wx.navigateBack({
  delta: 1
})

// 返回上两级
wx.navigateBack({
  delta: 2
})

特点：

• delta 默认是 1
• 如果 delta 超过页面栈长度，会回到栈底页面

三、参数传递与接收

3.1 通过 URL 传参

跳转端：

wx.navigateTo({
  url: `/pages/detail/detail?id=${item.id}&name=${item.name}`
})

接收端（pages/detail/detail.js）：

Page({
  onLoad(options) {
    console.log(options.id, options.name)
  }
})

• onLoad(options) 中即可拿到所有 query 参数（字符串类型）

3.2 参数类型处理

Page({
  onLoad(options) {
    const id = Number(options.id)  // 字符串转数字
    const isVip = options.isVip === 'true'
    console.log(id, isVip)
  }
})

要注意：路由参数一律为字符串，需要自己进行类型转换。

四、页面生命周期与路由关系

4.1 单个页面生命周期回顾

Page({
  onLoad(options) {
    // 页面加载，获得路由参数
  },

  onShow() {
    // 页面显示（每次进入 / 回到页面都会触发）
  },

  onReady() {
    // 首次渲染完成
  },

  onHide() {
    // 页面隐藏：被 navigateTo 其他页面或切到后台
  },

  onUnload() {
    // 页面卸载：navigateBack / redirectTo / reLaunch 导致当前页面被销毁
  }
})

4.2 路由操作与生命周期触发对照

常见实战点：

• 需要在“回到页面时刷新数据” → 放在 onShow
• 仅首次进入页面请求数据 → 放在 onLoad

五、实践：列表页 → 详情页 → 返回

5.1 列表页（pages/list/list.wxml）

<view wx:for="" wx:key="id" class="item"
      data-id=""
      bindtap="goDetail">
  
</view>

pages/list/list.js：

Page({
  data: {
    list: [
      { id: 1, title: '文章一' },
      { id: 2, title: '文章二' }
    ]
  },

  goDetail(e) {
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    })
  }
})

5.2 详情页（pages/detail/detail.js）

Page({
  data: {
    id: null,
    detail: null
  },

  onLoad(options) {
    const id = Number(options.id)
    this.setData({ id })
    this.fetchDetail(id)
  },

  fetchDetail(id) {
    // 模拟请求
    const detail = {
      id,
      title: `文章 ${id}`,
      content: `这是文章 ${id} 的内容`
    }
    this.setData({ detail })
  },

  back() {
    wx.navigateBack()
  }
})

pages/detail/detail.wxml：

<view>详情：</view>
<view></view>
<button bindtap="back">返回列表</button>

六、路由跳转与 tabBar 配合示例

假设定义了 tabBar：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ]
  }
}

6.1 非 tab 页面跳转到 tab 页面

// 比如在某个设置页点击“回首页”
wx.switchTab({
  url: '/pages/index/index'
})

6.2 登录成功后，清空栈并回首页

// 登录成功后的回调
wx.reLaunch({
  url: '/pages/index/index'
})

小技巧：避免用户使用“返回”按钮回到登录页或其他流程页。

七、设计路由结构的实践经验

1. 首页 + tabBar = 导航骨架
   • 典型结构：首页 / 分类 / 购物车 / 我的
   • tabBar 页面尽量作为一级入口，不要做复杂流程
2. 深度页面使用 navigateTo
   • 列表 → 详情 → 子详情 → …
   • 用户可以逐级返回
3. 不应该返回的页面使用 redirectTo 或 reLaunch
   • 如：完成支付成功页 → redirectTo 到“订单详情页”
   • 引导页 / 新手教程完成后 → reLaunch 到首页
4. 参数设计
   • 尽量使用简短、易理解的字段，如 id、type、from
   • 复杂数据用 ID 传递，并在目标页重新请求详细数据

八、常见问题与易踩坑

1. 在页面 B 调 navigateBack，却没有回到预期页面
   • 可能：页面栈层级与预期不一致
   • 建议：在关键流程中打印 getCurrentPages() 检查栈结构
2. 跳转到 tabBar 页面失败
   • 检查：目标页面是否已经配置在 app.json 的 tabBar.list 中
   • 使用方式：必须用 wx.switchTab，而不是 navigateTo
3. 切换 tab 时想要传参
   • 不能在 url 后加 query
   • 替代方法：

     // 设置全局变量
     getApp().globalData.fromPage = 'xxx'
     
     wx.switchTab({ url: '/pages/index/index' })
     
     // 在 index 页 onShow 中读取
     const app = getApp()
     const fromPage = app.globalData.fromPage
     

4. onLoad 中通过 getCurrentPages() 获取不到当前页
   • 文档说明：getCurrentPages() 中的页面实例与当前页面文件中的 Page 对象不是同一个引用
   • 一般调试用即可，不要做复杂逻辑依赖

目标：弄清楚“页面 data ↔ WXML 视图”之间是如何联动的，能熟练使用插值、属性绑定、事件更新等。

一、数据绑定的基本概念

• 小程序采用 数据驱动视图：
  • 页面 data 中的字段 → 自动渲染到 wxml
  • 通过 this.setData() 修改数据 → 视图自动更新
• 核心思想：不要直接操作 DOM，只操作数据

二、最基础的插值绑定（Mustache 语法）

2.1 文本插值

<view></view>

Page({
  data: {
    message: 'Hello 小程序'
  }
})

注意：`` 内只能写 表达式，不能写语句（如 if、for）。

2.2 支持的简单表达式例子

<view>8</view>
<view></view>
<view></view>

Page({
  data: {
    count: 1,
    user: { name: 'Tom' },
    flag: true
  }
})

三、属性绑定（标签属性里的数据绑定）

除了内容可以使用 ``，标签属性也可以使用：

<image src="" mode="" />
<view class="box ">内容</view>
<button disabled="">按钮</button>

Page({
  data: {
    imgUrl: 'https://example.com/a.png',
    imgMode: 'aspectFit',
    isActive: true,
    isDisabled: false
  }
})

常见场景：

• 控制样式类名：class="xxx "
• 控制组件属性：disabled、autoplay、indicator-dots 等
• 控制图片 / 音频 / 视频资源地址

四、列表数据绑定（wx:for）

4.1 基本用法

<view wx:for="" wx:key="id">
   - 
</view>

Page({
  data: {
    list: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '梨' }
    ]
  }
})

• wx:for：要遍历的数组（支持基本类型和对象）
• 默认变量名：
  • item：当前项
  • index：当前下标
• wx:key：必须写（官方强烈建议），用于提高性能和避免警告

4.2 自定义变量名

<view
  wx:for=""
  wx:for-item="fruit"
  wx:for-index="i"
  wx:key="id"
>
   - 
</view>

五、条件渲染（wx:if / wx:elif / wx:else）

<view wx:if="">加载中...</view>
<view wx:elif="">加载成功</view>
<view wx:else>加载失败</view>

Page({
  data: {
    status: 'loading' // loading / success / error
  }
})

5.1 wx:if 与 hidden 的区别（常考点）

• wx:if：真正地 创建 / 销毁 DOM 节点
• hidden：仅仅是 控制显示或隐藏（节点还在）

使用建议：

• 切换不频繁 → 用 wx:if
• 频繁显示 / 隐藏 → 用 hidden=""

六、事件配合数据绑定：交互更新视图

数据绑定只决定“显示什么”，要让用户操作改变数据，需要事件。

6.1 点击按钮增加数字

<view>当前计数：8</view>
<button bindtap="onAdd">+1</button>

Page({
  data: {
    count: 0
  },

  onAdd() {
    this.setData({
      count: this.data.count + 1
    })
  }
})

七、setData 的用法与注意点

7.1 基本用法

this.setData({
  message: '更新后的文本',
  count: this.data.count + 1
})

• 调用 setData → 框架把变更同步到视图
• 只能更新 data 中已有的字段（动态新增字段要小心）

7.2 更新对象 / 数组的子属性（使用“点语法”）

Page({
  data: {
    user: {
      name: 'Tom',
      age: 18
    },
    list: [1, 2, 3]
  },

  updateData() {
    this.setData({
      'user.name': 'Jerry',
      'list[1]': 20
    })
  }
})

关键点：'user.name'、'list[1]' 要写成 字符串键名。

7.3 性能注意事项

• 尽量一次 setData 修改多个字段，而不是多次调用
• 只传 必要字段，不要每次把整个大对象 / 大数组都传回去
• 复杂页面中，频繁大数据 setData 会有卡顿问题

八、表单输入与双向“效果”

小程序没有真正的“v-model”，但可以通过事件做到类似双向更新。

8.1 input 输入同步到 data

<input
  value=""
  placeholder="请输入用户名"
  bindinput="onInputChange"
/>

<view>你输入的是：</view>

Page({
  data: {
    username: ''
  },

  onInputChange(e) {
    this.setData({
      username: e.detail.value
    })
  }
})

• e.detail.value：当前输入框的值
• data.username 更新后，视图显示跟着变

8.2 多个输入框的通用处理（用 data-*）

<input
  data-field="username"
  value=""
  bindinput="onInputChange"
/>
<input
  data-field="email"
  value=""
  bindinput="onInputChange"
/>

Page({
  data: {
    username: '',
    email: ''
  },

  onInputChange(e) {
    const field = e.currentTarget.dataset.field
    this.setData({
      [field]: e.detail.value
    })
  }
})

这里用到 ES6 计算属性名：[field]。

九、复杂结构的绑定示例（综合）

9.1 数据结构

Page({
  data: {
    banners: [
      { id: 1, img: 'https://xx.com/b1.png', title: '图一' },
      { id: 2, img: 'https://xx.com/b2.png', title: '图二' }
    ],
    products: [
      { id: 101, name: '商品 A', price: 99, hot: true },
      { id: 102, name: '商品 B', price: 199, hot: false }
    ],
    currentBanner: 0
  }
})

9.2 WXML 绑定展示

<!-- 轮播图 -->
<swiper
  indicator-dots="true"
  autoplay="true"
  circular="true"
  current=""
  bindchange="onBannerChange"
>
  <block wx:for="" wx:key="id">
    <swiper-item>
      <image src="" mode="aspectFill" />
      <view class="banner-title"></view>
    </swiper-item>
  </block>
</swiper>

<!-- 商品列表 -->
<view
  class="product-item "
  wx:for=""
  wx:key="id"
>
  <view></view>
  <view>￥</view>
</view>

Page({
  data: {
    // 同上
  },

  onBannerChange(e) {
    this.setData({
      currentBanner: e.detail.current
    })
  }
})

十、常见错误与排查

1. `` 不显示 / 显示为 undefined
   • 检查 data 里是否有这个字段
   • 检查拼写：字段名、层级、大小写
2. 更新数据了，但界面没变化
   • 是否通过 this.setData() 更新？直接修改 this.data.xxx = ... 不会触发视图更新
   • setData 写法是否正确，尤其是更新子属性时的字符串键名
3. wx:for 报警告 / 渲染异常
   • 是否漏写 wx:key
   • wx:key 的值是否是数组项中独一无二的字段（推荐用 id）
4. 频繁 setData 导致卡顿
   • 合并多次修改为一次 setData
   • 精简要传递的数据，只更新真正变化的字段

目标：掌握在微信小程序中使用 swiper 组件实现基础轮播图，并能做常见配置和简单封装。

一、轮播图实现思路概览

在小程序中实现轮播图，主要依靠官方提供的组件：

• 容器组件：<swiper />
• 子项组件：<swiper-item />

核心步骤：

1. 在 wxml 中使用 swiper + swiper-item 结构
2. 在 js 中准备轮播图数据（比如图片数组）
3. 在 wxss 中设置容器高度 / 宽度等样式
4. 可选：监听滑动事件、配置自动切换、指示点等

二、最简单的轮播图示例

2.1 WXML 结构

<!-- pages/banner/banner.wxml -->
<view class="banner-container">
  <swiper
    class="banner-swiper"
    indicator-dots="true"
    autoplay="true"
    interval="3000"
    duration="500"
    circular="true"
  >
    <block wx:for="" wx:key="url">
      <swiper-item>
        <image class="banner-img" src="" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>
</view>

2.2 JS 数据

// pages/banner/banner.js
Page({
  data: {
    imgList: [
      { url: 'https://example.com/banner1.jpg' },
      { url: 'https://example.com/banner2.jpg' },
      { url: 'https://example.com/banner3.jpg' }
    ]
  }
})

2.3 WXSS 样式

/* pages/banner/banner.wxss */
.banner-container {
  width: 100%;
}

.banner-swiper {
  width: 100%;
  height: 300rpx; /* 轮播图高度可根据设计调整 */
}

.banner-img {
  width: 100%;
  height: 100%;
}

三、swiper 常用属性总结

<swiper
  indicator-dots=""  <!-- 是否显示面板指示点 -->
  autoplay=""             <!-- 是否自动切换 -->
  interval=""             <!-- 自动切换时间间隔，ms -->
  duration=""             <!-- 滑动动画时长，ms -->
  circular=""             <!-- 是否衔接滑动（循环） -->
  vertical=""             <!-- 是否纵向滑动 -->
  current=""               <!-- 当前所在滑块的 index -->
  bindchange="onSwiperChange"         <!-- 当前页改变事件 -->
  bindanimationfinish="onAnimationFinish"
>
</swiper>

常用配置说明：

• indicator-dots：轮播底部的小点点（true/false）
• autoplay：是否自动播放
• interval：自动切换时间，常用 3000（3 秒）
• duration：每次滑动动画时间 300–500 比较常见
• circular：打开后可以从最后一张滑到第一张
• vertical：一般轮播图用横向，不勾选
• current：可以用来“手动控制”当前显示第几张

四、监听滑动事件与当前索引

有时需要知道当前滑到了第几张，比如同步显示标题。

4.1 监听 change 事件

<swiper
  indicator-dots="true"
  autoplay="true"
  circular="true"
  bindchange="onSwiperChange"
>
  <!-- ... -->
</swiper>

Page({
  data: {
    current: 0
  },

  onSwiperChange(e) {
    const current = e.detail.current
    this.setData({ current })
    console.log('当前轮播索引：', current)
  }
})

五、实现轮播图点击跳转

常见需求：轮播图点击跳转到详情页或外部链接。

5.1 给每个图片绑定点击事件

<swiper
  indicator-dots="true"
  autoplay="true"
  circular="true"
>
  <block wx:for="" wx:key="id">
    <swiper-item>
      <image
        class="banner-img"
        src=""
        mode="aspectFill"
        data-id=""
        bindtap="onBannerTap"
      />
    </swiper-item>
  </block>
</swiper>

Page({
  data: {
    imgList: [
      { id: 1, url: 'https://example.com/banner1.jpg', target: '/pages/detail/detail?id=1' },
      { id: 2, url: 'https://example.com/banner2.jpg', target: '/pages/detail/detail?id=2' }
    ]
  },

  onBannerTap(e) {
    const id = e.currentTarget.dataset.id
    console.log('点击的 banner id:', id)
    // 示例：根据 id 跳转
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    })
  }
})

六、从接口动态加载轮播图数据

实际项目中，图片地址通常来自后台接口。

Page({
  data: {
    imgList: []
  },

  onLoad() {
    this.fetchBanner()
  },

  fetchBanner() {
    wx.request({
      url: 'https://example.com/api/banner', // 示例地址
      method: 'GET',
      success: (res) => {
        // 假设返回数据为 { code: 0, data: [ { url: '' }, ... ] }
        if (res.data.code === 0) {
          this.setData({
            imgList: res.data.data
          })
        }
      },
      fail: (err) => {
        console.error('获取轮播图失败', err)
      }
    })
  }
})

七、封装一个通用轮播图组件（进阶）

7.1 目录结构示例

components/banner-swiper/
  ├── banner-swiper.wxml
  ├── banner-swiper.wxss
  ├── banner-swiper.js
  └── banner-swiper.json

7.2 组件配置与逻辑

banner-swiper.json

{
  "component": true
}

banner-swiper.wxml

<view class="banner-container">
  <swiper
    class="banner-swiper"
    indicator-dots=""
    autoplay=""
    interval=""
    duration=""
    circular=""
    bindchange="onSwiperChange"
  >
    <block wx:for="" wx:key="id">
      <swiper-item>
        <image
          class="banner-img"
          src=""
          mode="aspectFill"
          data-item=""
          bindtap="onTap"
        />
      </swiper-item>
    </block>
  </swiper>
</view>

banner-swiper.js

Component({
  properties: {
    list: {
      type: Array,
      value: []
    },
    indicatorDots: {
      type: Boolean,
      value: true
    },
    autoplay: {
      type: Boolean,
      value: true
    },
    interval: {
      type: Number,
      value: 3000
    },
    duration: {
      type: Number,
      value: 500
    },
    circular: {
      type: Boolean,
      value: true
    }
  },

  data: {
    current: 0
  },

  methods: {
    onSwiperChange(e) {
      const current = e.detail.current
      this.setData({ current })
      // 向外通知当前索引
      this.triggerEvent('change', { current })
    },

    onTap(e) {
      const item = e.currentTarget.dataset.item
      // 向外抛出点击事件和数据
      this.triggerEvent('tap', { item })
    }
  }
})

banner-swiper.wxss

.banner-container {
  width: 100%;
}

.banner-swiper {
  width: 100%;
  height: 300rpx;
}

.banner-img {
  width: 100%;
  height: 100%;
}

7.3 在页面中使用组件

页面 json：

{
  "usingComponents": {
    "banner-swiper": "/components/banner-swiper/banner-swiper"
  }
}

页面 wxml：

<banner-swiper
  list=""
  bind:tap="handleBannerTap"
  bind:change="handleBannerChange"
/>

页面 js：

Page({
  data: {
    imgList: [
      { id: 1, url: 'https://example.com/banner1.jpg', title: 'Banner 1' },
      { id: 2, url: 'https://example.com/banner2.jpg', title: 'Banner 2' }
    ]
  },

  handleBannerTap(e) {
    const item = e.detail.item
    console.log('点击的轮播项：', item)
    // TODO: 自定义跳转逻辑
  },

  handleBannerChange(e) {
    const current = e.detail.current
    console.log('轮播切换到：', current)
  }
})

八、常见问题与排查思路

1. 轮播图高度为 0 或不显示
   • 检查 swiper / image 是否设置了 height
   • 检查父级容器是否被 overflow: hidden 或其他样式影响
2. 图片拉伸变形
   • 调整 image 的 mode 属性，例如 aspectFill / widthFix
3. 图片闪烁 / 加载慢
   • 可考虑图片压缩、CDN
   • 预加载：先显示占位图，加载完成再替换
4. 指示点位置不满足需求
   • 小程序原生指示点支持有限，可以自己写一套指示器（在 swiper 外面根据 current 手写小圆点）

适合入门和回顾使用的个人笔记草稿，可按需增删。

一、基础概念

1.1 什么是微信小程序

• 运行在微信客户端里的“轻应用”
• 无需下载安装，扫码或搜索即可使用
• 以“页面 + 逻辑 + 样式 + 配置”的形式组织
• 使用自有技术栈：WXML + WXSS + JS + JSON

1.2 与传统 Web / App 的区别（简要）

• 运行环境：基于微信的 WebView + JSCore，不等于完整浏览器
• 能力：可以调用部分原生能力（相机、位置、扫一扫等）
• 体积限制：代码包大小有限制（主包 + 分包）
• 生命周期、路由管理方式不同

二、项目结构与文件类型

2.1 典型目录结构

project-root/
  ├── app.js          # 全局 JS 逻辑
  ├── app.json        # 全局配置（页面路由、窗口样式等）
  ├── app.wxss        # 全局样式
  ├── project.config.json  # 微信开发者工具项目配置
  ├── sitemap.json    # 页面收录配置
  ├── pages/          # 各业务页面目录
  │   └── index/
  │       ├── index.wxml
  │       ├── index.wxss
  │       ├── index.js
  │       └── index.json
  ├── utils/          # 工具模块
  └── ...             # 组件、自定义 tabBar 等

2.2 四大基础文件

1. WXML
   • 类似 HTML，用于描述页面结构
   • 支持数据绑定、条件渲染、列表渲染等
2. WXSS
   • 类似 CSS，增加了 rpx 自适应单位
   • 支持全局样式 + 局部样式
3. JS
   • 页面逻辑、事件处理、网络请求、数据处理
   • 使用微信提供的 API，如 wx.request、wx.showToast 等
4. JSON
   • 项目和页面配置
   • app.json：全局配置
   • 页面同名 json：页面个性化配置

三、配置文件详解

3.1 app.json（全局配置）

常见字段：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "Demo",
    "navigationBarTextStyle": "black",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tab/home.png",
        "selectedIconPath": "assets/tab/home-selected.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "usingComponents": {}
}

3.2 页面配置（如 pages/index/index.json）

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "my-card": "/components/my-card/my-card"
  }
}

四、WXML 基础语法

4.1 数据绑定

<view></view>

Page({
  data: {
    message: 'Hello 小程序'
  }
})

4.2 条件渲染

<view wx:if="">已登录</view>
<view wx:else>未登录</view>

4.3 列表渲染

<view wx:for="" wx:key="id">
   - 
</view>

4.4 事件绑定

<button bindtap="handleTap" data-id="">点击</button>

Page({
  handleTap(e) {
    const id = e.currentTarget.dataset.id
    console.log('点击 id：', id)
  }
})

五、WXSS 与自适应布局

5.1 rpx 单位

• rpx：根据屏幕宽度自适应，设计稿一般按 750 宽
• 公式：750rpx == 屏幕宽度
• 例：iPhone 375 宽 => 1rpx = 0.5px

5.2 常用写法示例

.container {
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

六、页面与生命周期

6.1 小程序整体生命周期（app.js）

App({
  onLaunch(options) {
    // 小程序初始化
  },
  onShow(options) {
    // 从后台进入前台
  },
  onHide() {
    // 进入后台
  },
  onError(err) {
    console.error(err)
  }
})

6.2 页面生命周期（page.js）

Page({
  data: {},

  onLoad(options) {
    // 页面加载（只触发一次）
  },

  onShow() {
    // 页面显示
  },

  onReady() {
    // 页面初次渲染完成
  },

  onHide() {
    // 页面隐藏
  },

  onUnload() {
    // 页面卸载
  },

  onPullDownRefresh() {
    // 监听用户下拉动作
  },

  onReachBottom() {
    // 触底事件
  },

  onShareAppMessage() {
    // 用户点击右上角分享
  }
})

七、路由与页面跳转

7.1 常用跳转 API

• wx.navigateTo：保留当前页面，跳转到非 tabBar 页面
• wx.redirectTo：关闭当前页面，跳转
• wx.switchTab：切换到 tabBar 页面
• wx.reLaunch：关闭所有页面，打开到某个页面
• wx.navigateBack：返回上一级或多级页面

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

接收参数：

Page({
  onLoad(options) {
    console.log(options.id) // 123
  }
})

八、网络请求与本地存储

8.1 网络请求

wx.request({
  url: 'https://example.com/api/list',
  method: 'GET',
  data: { page: 1 },
  success(res) {
    console.log(res.data)
  },
  fail(err) {
    console.error(err)
  }
})

8.2 本地存储

// 同步
wx.setStorageSync('token', 'abc123')
const token = wx.getStorageSync('token')

// 异步
wx.setStorage({
  key: 'userInfo',
  data: { name: 'Tom' },
  success() {}
})

九、组件与模块化

9.1 自定义组件基本结构

components/my-card/
  ├── my-card.wxml
  ├── my-card.wxss
  ├── my-card.js
  └── my-card.json

my-card.json：

{
  "component": true
}

my-card.js：

Component({
  properties: {
    title: {
      type: String,
      value: ''
    }
  },
  data: {},
  methods: {
    handleTap() {
      this.triggerEvent('tapCard')
    }
  }
})

使用组件（页面 json 与 wxml）：

{
  "usingComponents": {
    "my-card": "/components/my-card/my-card"
  }
}

<my-card title="测试卡片" bind:tapCard="onTapCard" />

Page({
  onTapCard() {
    console.log('card tapped')
  }
})

十、常用能力与 API 速记

• UI 提示
  • wx.showToast、wx.showModal、wx.showLoading、wx.hideLoading
• 媒体相关
  • wx.chooseImage、wx.previewImage、wx.saveImageToPhotosAlbum
• 位置与地图
  • wx.getLocation、wx.openLocation、<map /> 组件
• 授权与登录
  • wx.login、wx.getUserProfile（注意隐私合规）
• 文件上传下载
  • wx.uploadFile、wx.downloadFile

十一、调试与发布流程

1. 安装并打开 微信开发者工具
2. 使用 AppID 创建项目（个人练习可使用测试号）
3. 开发阶段：
   • 使用“预览”在手机端测试
   • 使用“真机调试”排查问题
4. 上传代码到微信后台
5. 在微信公众平台配置：
   • 服务器域名
   • 业务域名
   • 体验版 / 审核 / 正式发布

1. 下载演示中心数据

访问地址：

https://vip.kingdee.com/article/489817422015440128?productLineId=40&isKnowledge=2&lang=zh-CN

下载符合私有云布署平台的演示中心数据。没特殊要求，下载最新日期的。

下载后的文件是个zip文件

2. 确定master节点

在安装时会要求指定哪个服务器为master。如下图：

3. 拷贝演示数据中心数据到master节点

将下载的演示数据中心文件进行解压，将解压后的文件拷贝到私有云的布署集群的master节点中的/tmp文件夹下。

4. 登陆master节点

ssh登陆到私有云的master节点。

5. 切换到用户

将当前用户切换到galaxyship

sudo su – galaxyship

6. 进行文件授权

#给kubernetes的配置文件授可读权限
sudo chmod +r /etc/kubernetes/admin.conf
#给baseline_show.backup授权可读权限
sudo chmod +r /tmp/baseline_show.backup

7. 将文件拷贝到容器内

kubectl cp /tmp/baseline_show.backup  pg-system/kd-cosmic-1:/var/lib/postgresql/data

8. 进入容器

kubectl exec -it -n pg-system kd-cosmic-1 -- bash

9. 进入到数据库备份文件所在文件夹

cd /var/lib/postgresql/data

10. 确认文件在容器内

ls

11. 设置需要还原的新的库的实例名称

比如需要将演示中心的数据备份文件还原成名称叫xk_demo_all的实例。则执行以下命令。

instance_db=xk_demo_all

12. 设置其它的默认变量

#在容器中设置相关变量
#数据库备份文件的名称
dumpName=baseline_show.backup
#将要生成的toc文件的名称   toc文件是还原过程中需要生成的一个文件
tocName=baseline_show.toc
#还原的新的数据库拥有者  这个不需要修改，默认即可
adminUser=cosmic

13. 创建数据库

#创建数据库
psql   -d postgres -c "create database ${instance_db} encoding utf8 owner ${adminUser}"

14. 生成toc文件

Toc文件是数据库还原过程中需要的一个文件，通过以下命令生成

pg_restore  -l  ${dumpName} > ${tocName}

15. 确认生成了toc文件

ls

16. 进行数据库还原

pg_restore    -j 8  -d ${instance_db} -c --if-exists -L  ${tocName} --no-owner --role ${adminUser} $dumpName -v 1>/dev/null

1 账号要求

需要有金蝶云企业账号，并且是客户的管理员角色（只有管理员才能看到对应的企业名称）。 说明：金蝶云企业账号注册地址 企业账号中心-我的企业 (https://account.kdcloud.com/main)。 可参考 https://account.kdcloud.com/helpCenter?id=3515718155284762624 进行注册。

2 网络要求

1. 环境可以连接互联网 安装过程需要能够连接galaxyship.kingdee.com和galaxyship-registry.kingdee.com

2. 节点之间网络能通，以下端口不能占用：

   • TCP 端口：2379、 2380、6443、10250、10257、10259
   • UDP 端口：8472

3 操作系统要求

• Ubuntu 18.04*，20.04，22.04

• CentOS 7.4，7.5，7.6，7.7，7.8，7.9，8.0，8.1，8.2，8.3，8.4*

• Rocky Linux 8.5，9.0，9.1，9.2，9.3，9.3

• RHEL 7.4，7.5，7.6，7.7，7.8，7.9，8.0，8.1，8.2，8.3，8.4，8.5，8.6，8.7，8.8，8.9，8.10，9.0，9.1，9.2，9.3

4 服务器要求

4.1 配置要求

1. 单节点模式(非生产场景)

   CPU: x86-64 4核, 内存:16GB，SSD磁盘200GB

   注意：当前集群日志、镜像、持久存储都默认在/var/目录下，所以要确保/var/有至少100GB及以上存储空间。

2. 多节点模式(一个master，1或者N个worker节点)

   每个节点最低配置:

   CPU: x86-64 4核, 内存:16GB，SSD磁盘256GB（根据数据量的大小需要提前规划在些基础上增加）

4.2 目录存储空间要求

当前集群日志、镜像、持久存储都默认在/var/目录下，所以要确保/var/有至少200GB及以上存储空间。

关键目录位置:

• /var/lib/kubelet: >30GB
• /var/lib/containerd: > 50GB
• /var/openebs: PV持久存储, 存储数据库等，按需要配置

4.3 软件环境要求

• 如果服务器安装了docker , 请先删除docker

4.4 主机名要求

运行: cat /etc/hostname 查看主机名称

• 主机hostname必须以字母开头且必须以字母数字结尾，主机hostname最多包含63个字符且只能包含小写字母、数字以及中划线-

4.5 浏览器要求

• Google Chrome 如果使用有兼容性问题，请升级到最新版本。
• Microsoft Edge 如果使用有兼容性问题，请升级到最新版本。
• Safari 如果使用有兼容性问题，请升级到最新版本。
• 不支持IE浏览器

环境准备步骤

0 安装必要工具及确认防火墙关闭

1. Ubuntu安装Openssh

sudo apt install openssh-server

1. 安装net-tools及curl

sudo apt install net-tools curl

1. 确认防火墙是否关闭

sudo ufw status
# Status: inactive 表示防火墙未启用
# Status: active 表示防火墙已启用
sudo ufw disable #关闭防火墙

1 添加galaxyship安装用户

为了便于维护及进行权限的隔离，需要用专有的用户进行安装。如果有多个集群节点，需要在每个节点的机器上都创建此安装用户。

用户要求如下：

1. 用户名为：galaxyship
2. 用户在root组内
3. 用户执行sudo 不需要输入密码。

通过以下脚本进行用户的创建及授权：

#创建用户

sudo useradd -m galaxyship

#添加到root用户组

sudo usermod -aG root galaxyship

#进行sudo免密设置

sudo bash -c 'echo -e "galaxyship ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers'

#将新用户默认的shell改为bash 以避免切换用户的时候报错

sudo chsh -s /bin/bash galaxyship

2 修改galaxyship用户的密码

sudo passwd galaxyship

3 进行ssh登陆设置

需要在哪台服务器（比如安装器所安装的服务器）免密连接到其它的服务器，就在哪台服务器（比如安装器所安装的服务器）上执行以下操作：

1. 切换到安装用户

sudo su galaxyship

1. 生成ssh密钥对

执行以下命令，过程中续回车即可：

ssh-keygen

1. 将密钥对的公钥拷贝到需要免密登陆的服务器上

可通过以下命令进行公钥的拷贝

ssh-copy-id galaxyship@${集群节点ip}

如果有多个集群节点，需要对每个节点都进行公钥的拷贝。

注意：如果执行脚本的机器也作为一个服务节点，需要执行

ssh-copy-id galaxyship@127.0.0.1

比如命令为：

ssh-copy-id galaxyship@172.27.94.2

4 确认关闭swap分区

执行以下命令，以检查是否是swap分区是否关闭。

free

关闭了swap分区：

未关闭swap分区：

如果显示未关闭swap分区，可以用以下命令进行关闭：

sudo swapoff -a

安装器下载

安装kubernetes集群需要提前服务器准备，请查看上面安装要求

1. 登陆【安装部署平台】

• 先在金蝶云账号中心注册企业且完成企业认证
• 使用该企业用户信息 登录安装部署平台https://galaxyship.kingdee.com
• 该用户即可查看到企业名称

2. 选择需要部署环境的企业

请在列头上选择需要部署环境的企业在选择企业名称时，分两种场景：

1. 如果是安装客户正式环境（含沙箱环境、正式生产环境），则在选择企业名称时，一定要选择在【企业账号中心】上认证过的企业名称；

2. 如果是安装实施或机构本地测试类环境（非客户的），则在选择企业名称时，该企业名称在【企业账号中心】没有认证要求。

3. 选择要安装的目标环境

• 选择安装环境后，点击下一步。安装环境根据实际需要进行选择。

4. 下载集群安装器

1. 安装kubernetes集群和Agent的安装器。

如果还没有安装kubernetes，则下载此安装器。

安装器下载后，是一个Linux shell脚本，名称为：installk8s.sh

安装kubernetes集群

如果还没有安装kubernetes，则在该步骤中利用“安装kubernetes集群和Agent的安装器”进行安装，即执行installk8s.sh。

1. 执行安装器

将脚本复制到目标linux服务器上，然后在命令行运行:

sudo chmod +x ./installk8s.sh
bash ./installk8s.sh

脚本执行的过程中，会下载kubernetes的相关文件，根据网速的情况，所需要的下载的时间有所区别。 脚本执行完成后，控制台会显示星空旗舰产品安装的访问页面地址。复制到浏览器中进行访问即可。 如果需要在多台机器上布署，也是选择在其中一台上执行此安装脚本即可。具体如下：

• 多节点安装示意图：

• 单节点安装示意图：

2. 访问安装器页面

执行完installk8s.sh后，会启动一个web网站，通过访问此网站来进行星空旗舰产品安装。

3. 填写安装用户

4. 添加安装节点

根据安装需要，进行添加不同的节点，并进行相关的节点的信息的填写。

填写说明：

1. 节点类型：kubernetes的master节点或worker节点；
2. 名称：节点的名称，系统自动生成，不可修改；
3. SSH连接（host）：填写安装节点所在的机器ip；
4. 集群内网IP。
   • 如果节点只有一个网卡，这里不需要填写。没有特别安装网卡，一般都只有一个网卡。
   • 当节点存在多个网卡时，需要在这里指定要用的网卡IP。在后续安装时，会用上这个IP。需要注意的是，不同节点所填写的IP需要在同一个网段中。
5. 端口：节点上对外提供ssh服务的端口。 注意，暂时不支持多master节点高可用模式。也就是不能添加两个节点类型为master的节点。

5. 保存配置信息

6. 安装kubernetes集群和Agent

注意，安装前请确认是否满足“软件环境要求”章节所提到的要求。

7. 查看安装日志及进度

安装星空旗舰产品

1. 确认agent安装状态

回到部署平台: http://galaxyship.kingdee.com ，查看agent连接状态。如果是已连接，则可以点击下一步：

2. 进行星空旗舰产品配置

重点需要配置每个一组件（当前只支持高级模式，如果需要建议只修改标记处）

• nginx端口配置

• MC配置服务

• kd-cosmic-migration(数据初始化服务)

• 配置默认的企业编码和企业名称以及管理员手机号

• kd-cosmic-xk(星空旗舰服务)

• 根据需要配置fileserver的nfs

• postgresql数据库配置

• 勾选pg库对应的节点

• 根据需要，配置数据库对外访问的服务端口。默认不对外提供数据库访问服务。

• redis配置

3. 进行配置的保存

4. 进行产品的安装

5. 安装资源、事件、日志查看

如果安装过程中有失败，需要查询相关的事件、日志的信息，以确定失败的原因。

6. mc和erp的访问

直接通过ip的访问

1. 星空旗舰产品

   网址为：http:// $ {ip}:31101/

   账号为：administrator/Kdxk#admin001

2. MC

   网址为：http:// ${ip}:31102/

   账号为：admin/Kdadmin001

其中，${ip}为安装的服务器节点中的一个节点的ip。

准备工作需要在所有节点上进行。

• 安装 ssh 服务

  1.安装 openssh-server

    sudo apt-get install openssh-server
  

  2.修改配置文件

    vim /etc/ssh/sshd_config
  

  找到配置项

    LoginGraceTime 120PermitRootLogin prohibit-passwordStrictModes yes
  

  把 prohibit-password 改为 yes，如下：

    LoginGraceTime 120PermitRootLogin yesStrictModes yes
  

• 重启机器，并设置 root 密码

    rebootsudo passwd root
  

  设置主机名,保证每个节点名称都不相同

    hostnamectl set-hostname xxx
  

• 同步节点时间

  1.配置时间与时区

    timedatectl set-timezone Asia/Shanghai
    timedatectl set-ntp no
    apt install ntp -y
    systemctl enable ntp
  

  2.安装 ntpdate

    sudo apt-get -y install ntpdate
  

  3.配置 crontab，添加定时任务

    crontab -e
  
    0 */1 * * * ntpdate time1.aliyun.com
  

• 关闭 Swap 关闭 Linux 的 swap 分区，提升 Kubernetes 的性能。

    # 确认 swap 是否启用
    sudo swapon --show
  
    # 暂时关闭 swap
    sudo swapoff -a
  
    # 永久关闭 swap
    sed -i '/swap/d' /etc/fstab
  

为什么要关闭 swap 交换分区？ Swap 交换分区，如果机器内存不够，会使用 swap 分区，但是 swap 分区的性能较低，k8s 设计的时候为了能提升性能，默认是不允许使用交换分区的。Kubeadm 初始化的时候会检测 swap 是否关闭，如果没关闭，那就初始化失败。如果不想要关闭交换分区，安装k8s 的时候可以指定 –ignore-preflight-errors=Swap 来解决。

开始搭建

集群规划

每台上都安装 docker-ce、docker-ce-cli、containerd.io，使用 Containerd 作为容器运行时，和 kubelet 交互。

所有节点都安装 kubelet、kubeadm、kubectl 软件包，都启动 kubelet.service 服务。

配置 docker 和 k8s 的 APT源

k8s APT源新版配置方法

（比如需要安装 1.29 版本，则需要将如下配置中的 v1.28 替换成 v1.29）

apt-get update && apt-get install -y apt-transport-https
curl -fsSL https://mirrors.aliyun.com/kubernetes-new/core/stable/v1.28/deb/Release.key |
    gpg --dearmor -o /etc/apt/keyrings/kubernetes-apt-keyring.gpg
echo "deb [signed-by=/etc/apt/keyrings/kubernetes-apt-keyring.gpg] https://mirrors.aliyun.com/kubernetes-new/core/stable/v1.28/deb/ /" |
    tee /etc/apt/sources.list.d/kubernetes.list
apt-get update

旧版 kubernetes 源只更新到 1.28 部分版本，不过 docker 源部分可以用

sudo curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"

sudo curl -fsSL https://mirrors.aliyun.com/kubernetes/apt/doc/apt-key.gpg | sudo apt-key add -
sudo add-apt-repository "deb https://mirrors.aliyun.com/kubernetes/apt/ kubernetes-xenial main"

apt update

在 Ubuntu 系统中，可以通过以下两个位置查看源列表：

/etc/apt/sources.list 文件：这是主要的源列表文件。您可以使用文本编辑器（如 vi 或 nano）以管理员权限打开该文件，查看其中列出的软件源。

/etc/apt/sources.list.d/ 目录：该目录包含额外的源列表文件。这些文件通常以 .list 扩展名结尾，并包含单独的软件源配置。

apt-cache madison kubelet # 命令来列出可用的 kubelet 软件包版本。检查是否存在版本号为 '1.28.8-00' 的软件包。

/etc/apt/sources.list # apt软件系统源

安装docker、containerd相关

apt install docker-ce docker-ce-cli containerd.io

使用 apt 可以查看安装的 docker 三个软件及关联软件。

apt list --installed | grep -i -E 'docker|containerd'

启动 docker 相关服务

ubuntu上的 dub 安装后，如果有服务，会被自动设置为开机自启动，且装完就会拉起，这里给出验证。

systemctl list-unit-files | grep -E 'docker|containerd'
###三个服务都应是running状态

systemctl status containerd.service
systemctl status docker.service
systemctl status docker.socket

配置containerd

Cgroup 管理器，k8s默认是 systemd，需要将 Containerd 的 Cgroup 管理器也修改为 systemd（默认是 cgroupfs）。

配置 Containerd ，如果 /etc/containerd 目录不存在，就先创建它：

mkdir /etc/containerd

生成默认配置：

containerd config default > /etc/containerd/config.toml

配置 containerd 改使用 systemd

sed -i 's/SystemdCgroup = false/SystemdCgroup = true/' /etc/containerd/config.toml

vim /etc/containerd/config.toml
约125行，[plugins."io.containerd.grpc.v1.cri".containerd.runtimes.runc.options]段落
默认：
SystemdCgroup = false
改为：
SystemdCgroup = true

约61行，[plugins."io.containerd.grpc.v1.cri"]段落
默认：
sandbox_image = "registry.k8s.io/pause:3.6"
改为：
sandbox_image = "registry.aliyuncs.com/google_containers/pause:3.9"

配置后，重启 containerd 服务，并保证 containerd 状态正确

systemctl restart containerd.service
systemctl status containerd.service

安装Kubernetes

安装 Kubernetes 需要在所有节点上进行。

/etc/apt/sources.list # apt软件系统源
apt-cache madison kubelet # 命令来列出可用的 kubelet 软件包版本。检查是否存在版本号为 '1.28.8-00' 的软件包。

ip route show # 查找以 "default via" 开头的行

sudo apt-get purge kubelet kubeadm kubectl # 卸妆
apt install docker-ce docker-ce-cli containerd.io
deb https://mirrors.aliyun.com/kubernetes/apt/ kubernetes-xenial main

在 Ubuntu 系统中，可以通过以下两个位置查看源列表：

/etc/apt/sources.list 文件：这是主要的源列表文件。您可以使用文本编辑器（如 vi 或 nano）以管理员权限打开该文件，查看其中列出的软件源。

/etc/apt/sources.list.d/ 目录：该目录包含额外的源列表文件。这些文件通常以 .list 扩展名结尾，并包含单独的软件源配置。

清空kubectl describe node命令输出的事件日志
kubectl delete events --all --field-selector involvedObject.kind=Node,involvedObject.name=<节点名称>
可以省略--all参数，只删除特定类型的事件

apt install kubelet kubeadm kubectl
###如果需要指定安装1.28.2这个版本，则可以这样：
apt install kubelet=1.28.2-00 kubeadm=1.28.2-00 kubectl=1.28.2-00

确认 kubelet 服务状态 同 docker 一样，kubelet 安装后，服务会自动配置为开机启动，且服务已经启动

systemctl enable kubelet.service # 配置kubelet为开机自启动
systemctl status kubelet

这里没有启动成功是正常的，因为 kubelet 服务成功启动的先决条件，需要 kubelet 的配置文件，所在目录 /var/lib/kubelet 还没有建立。

可以用下面命令看日志，追踪到该临时问题。

journalctl -xeu kubelet

kubelet的正常启动，要等到下一步，master 节点做 kubeadm 的初始化后，才会正常。

版本锁定

锁定这三个软件的版本，避免意外升级导致版本错误。

sudo apt-mark hold kubeadm kubelet kubectl

下载 Kubernetes 组件镜像

可以通过下面的命令看到 kubeadm 默认配置的 kubernetes 镜像，是外网的镜像

kubeadm config images list

使用阿里的 kubernetes 镜像源，下载镜像

kubeadm config images pull --image-repository=registry.aliyuncs.com/google_containers --kubernetes-version=v1.28.2 --cri-socket /run/containerd/containerd.sock

Kubernetes初始化

kubeadm init \
  --apiserver-advertise-address=<自己本机的公网IP> \
  --image-repository registry.aliyuncs.com/google_containers \
  --kubernetes-version v1.28.2 \
  --service-cidr=10.96.0.0/12 \
  --pod-network-cidr=10.244.0.0/16 \
  --ignore-preflight-errors=all \
  --cri-socket /run/containerd/containerd.sock

配置环境变量

To start using your cluster, you need to run the following as a regular user:

  mkdir -p $HOME/.kube
  sudo cp -i /etc/kubernetes/admin.conf $HOME/.kube/config
  sudo chown $(id -u):$(id -g) $HOME/.kube/config

Alternatively, if you are the root user, you can run:

  export KUBECONFIG=/etc/kubernetes/admin.conf

使用 Calico 网络插件

上述 master 节点初始化后，可以使用 kubectl get node 来检查 kubernetes 集群节点状态，当前 master 节点的状态为 NotReady，这是由于缺少网络插件，集群的内部网络还没有正常运作。

可以在 Calico 的网站（https://www.tigera.io/project-calico/）上找到它的安装方式，需要注意 Calico 版本支持适配的 kubernets 版本。

curl https://raw.githubusercontent.com/projectcalico/calico/v3.27.3/manifests/calico.yaml -O

Calico 使用的镜像较大，如果安装超时，可以考虑在每个节点上预先使用 docker pull 拉取镜像：

# 从calico.yaml文件中，找到需要下载的镜像源
docker pull docker.io/calico/kube-controllers:v3.27.3
docker pull docker.io/calico/node:v3.27.3
docker pull docker.io/calico/pod2daemon-flexvol:v3.27.3
docker pull docker.io/calico/cni:v3.27.3

Calico 安装使用 kubectl apply即可：

kubectl apply -f calico.yaml

其他节点加入集群

查看节点列表，这时还只有主节点

kubectl get node

主节点在初始化结束后，已经创建了临时 token，但该临时 token 只有24小时有效期。

因此这里需要重新在节点创建永久有效的 token

kubeadm token create --print-join-command 

worker节点加入

kubeadm join <master节点>:6443 --token oyl72q.dth6p8kwi7fopsd6 \
	--discovery-token-ca-cert-hash sha256:b31bb54c63a550d287c89ddd0094e27ca680a6c3386a8630a75445de3c4d6e43 \
  --cri-socket /run/containerd/containerd.sock

如果遇到拉取镜像的问题，同样使用以上方式下载到本地即可。

配置 Console 节点

Console 节点的部署工作更加简单，它只需要安装一个 kubectl，然后复制“config”文件就行，你可以直接在 Master 节点上用“scp”远程拷贝，例如：

scp `which kubectl` niuben@192.168.56.2:~/
scp ~/.kube/config niuben@192.168.56.2:~/.kube

卸载Kubernetes、docker相关

sudo apt-get purge kubelet kubeadm kubectl # 卸载
apt remove docker-ce docker-ce-cli containerd.io