🍒 Cherry的博客

Appearance

小程序 ​

基础架构 ​

技术栈组成 ​

  • WXML：类 HTML 模板语言，支持数据绑定和逻辑控制（如 wx:if、wx:for）
  • WXSS：基于 CSS 的样式语言，扩展尺寸单位（rpx）和样式隔离
  • JavaScript：通过 Page() 和 Component() 定义逻辑
  • JSON：配置页面路径、窗口样式、权限声明

项目结构 ​

bash
├── app.js           # 小程序入口
├── app.json         # 全局配置
├── app.wxss         # 全局样式
├── pages/           # 页面目录
│   └── index/
│       ├── index.js     # 页面逻辑
│       ├── index.wxml   # 页面结构
│       ├── index.wxss   # 页面样式
│       └── index.json   # 页面配置
└── components/      # 自定义组件

配置规范 ​

  • 全局配置（app.json）​​：定义 pages（页面路径）、window（导航栏/背景色）、tabBar（底部导航）。
  • 页面配置（index.json）​​：覆盖全局窗口样式。
  • 组件配置（component.json）​​：定义组件属性、事件、插槽等。

核心概念 ​

数据驱动与事件系统 ​ ​

  • 双向绑定：通过 setData 更新页面数据。
  • 全局状态：使用 globalData 或第三方状态管理库（如 MobX）

数据绑定

html
<!-- WXML 绑定数据 -->
<view>{{ message }}</view>
<view wx:for="{{ list }}" wx:key="id">{{ item.name }}</view>
js
// JS 更新数据
Page({
  data: { message: 'Hello' },
  updateData() {
    this.setData({ message: 'Updated' })
  },
})

事件处理 ​​

html
<!-- WXML 绑定事件 -->
<button bindtap="handleTap">Click Me</button>
js
Page({
  handleClick(e) {
    console.log(e.currentTarget.dataset.id) // 获取 data-* 属性
  },
})

生命周期管理 ​

  • 应用生命周期：onLaunch、onShow、onHide 等。
  • 页面生命周期：onLoad、onReady、onShow、onUnload 等。
  • 示例：使用 onLoad 获取页面初始化数据，onPullDownRefresh 实现下拉刷新。

微信 API ​

  • 用户数据：wx.getUserInfo 获取用户信息，需遵守隐私协议。
  • 支付：集成 WeChat Pay，支持订单创建和支付回调。
  • 定位服务：wx.getLocation 获取用户位置，结合 OpenStreetMap 等服务。
  • 本地存储：wx.setStorageSync 和 wx.getStorageSync 管理本地数据。
  • 网络请求：wx.request 发送 HTTP 请求，需使用 HTTPS 协议。
js
// 网络请求
wx.request({
  url: 'https://api.example.com',
  method: 'GET',
  success(res) {
    console.log(res.data)
  },
})

// 本地存储
wx.setStorageSync('key', 'value')
const data = wx.getStorageSync('key')

// 设备信息
wx.getSystemInfoSync().screenWidth // 屏幕宽度

用户授权

js
wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.userInfo']) {
      wx.authorize({ scope: 'scope.userInfo' })
    }
  },
})

组件化开发 ​

自定义组件：通过 Component 构造器创建，支持属性传递和事件通信。

js
// components/my-component.js
Component({
  properties: { title: { type: String, value: '默认标题' } },
  methods: {
    onTap() {
      this.triggerEvent('customevent', { detail: '数据' })
    },
  },
})
html
<!-- 页面 WXML -->
<my-component title="标题" bind:customevent="handleEvent" />

性能优化 ​

  • 数据更新策略：使用 setData 批量更新，避免频繁操作。
js
this.setData({ a: 1, b: 2 }) // 合并更新s
  • 分包加载：将页面拆分为多个子包，按需加载。
json
// app.json
{
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["page1", "page2"]
    }
  ]
}
  • 图片优化：使用压缩工具、懒加载、缓存等策略。

云开发 ​

js
// 数据库操作
const db = wx.cloud.database()
db.collection('todos')
  .get()
  .then((res) => console.log(res.data))

// 云函数调用
wx.cloud.callFunction({
  name: 'getUserInfo',
  success: (res) => console.log(res.result),
})

调试发布 ​

发布流程：

  1. 注册小程序账号：登录微信公众平台，创建小程序。

  2. 配置项目信息：开发者工具 → 项目设置（AppID、项目名称等）。

  3. 上传代码：开发者工具 → 上传（填写版本号和备注）。

    • 在微信开发者工具中，点击“上传”按钮，上传代码到微信后台。
    • 填写版本号（如 v1.0.0）、版本描述（如“初次发布，包含电商功能”）。
    • 上传后在微信公众平台 - “版本管理”中查看代码。

  4. 提交审核：登录微信公众平台，提交审核。

    • 登录微信公众平台，进入“版本管理”，选择已上传的代码版本，点击“提交审核”。
    • 填写审核信息：小程序类目（如电商、工具）；功能描述（如“提供商品浏览和支付功能”）；页面截图（展示核心功能）。
    • 提交后等待微信官方审核。

  5. 发布上线：审核通过后，全量发布或分阶段发布。

    • 审核通过后，在微信公众平台 - “版本管理”中选择通过的版本，点击“发布”。
    • 发布后，小程序即可通过二维码、微信搜索或分享链接访问。

常见问题 ​

  1. 跨域问题：配置服务器域名白名单（需 HTTPS），或在开发阶段勾选「不校验合法域名」。
  2. 页面栈问题：小程序最多允许 10 层页面栈，超过时需用 wx.redirectTo 代替 wx.navigateTo。
  3. 兼容性问题：检查基础库版本 wx.getSystemInfoSync().SDKVersion，使用条件编译或 wx.canIUse() 判断 API 支持。