微信小程序开发大经验总结大杂烩

(Updated: )
前端

微信小程序开发历程

1.Skyline 渲染引擎问题解决方案（模拟器可以显示图片，真机却不显示）

问题现象

  • 不使用 Skyline 时：真机调试下某些页面的图片无法显示
  • 使用 Skyline 时：真机调试下其他页面样式混乱
  • 模拟器环境：无论是否使用 Skyline，样式均正常

原因分析

Skyline 渲染引擎虽然能提升性能，但会导致部分样式渲染不一致问题

解决方案

1.采用 按页面粒度开启 Skyline 的混合方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  1.全局配置 (app.json)
{
  "lazyCodeLoading": "requiredComponents",
  "rendererOptions": {
  "skyline": {
    "defaultDisplayBlock": true,
    "disableABTest": true,
    "sdkVersionBegin": "3.0.0", 
    "sdkVersionEnd": "15.255.255"
  }
  }
}

  2.页面级配置 (index.json)
{
  "componentFramework": "glass-easel",
  "renderer": "skyline" 
}

2.直接 删除 Skyline 渲染引擎的相关配置，使用默认渲染引擎

2.function（event）

event 对象的常见属性（微信小程序）：

属性 说明
event.type 事件类型（如 tap, input, change 等）
event.timeStamp 事件触发的时间戳
event.target 触发事件的组件信息（如按钮的 id、dataset 等）
event.currentTarget 当前处理事件的组件信息（类似 target）
event.detail 额外信息（不同事件不同内容，如输入框的 value）

3.wx.navigateTo() 与 wx.switchTab() 的区别

wx.navigateTo()

  • 保留当前页面，跳转到非 tabBar 页面
  • 页面栈最多十层
  • 适用于普通页面间的跳转

wx.switchTab()

  • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • 只能用于 tabBar 页面间的切换
  • 不能传参
  • 会重置页面栈

使用场景

  • 普通页面跳转：使用 navigateTo
  • 底部 tab 切换：使用 switchTab
  • 需要清空页面栈：使用 switchTab 或 reLaunch

注意事项

  • 如果页面被定义进了 tabBar，则只能采用 wx.switchTab()

4.自定义 tabBar

需求：为不同角色提供不同的 tabBar

步骤

  • 1.在 app.json 中的 tabBar 项设置 custom 字段，并且为 true，同时其余 tabBar 设计的页面也要配置
  • 2.编写 tabBar 自定义组件，组件 文件夹必须放在根目录下，并且 必须命名为 custom-tab-bar
  • 3.在 attached 生命周期中设置 tabBar 中的 tab 列表数据（注：attached 在组件初始化后触发）
  • 4.在每个页面的 onShow 方法中设置 tab 选中状态
    1
    2
    3
    this.getTabBar.setData({
      selected:0
    })
  • 5.pagePath 和 image 的路径前面都要加 前导斜杠，不然就会识别为相对路径

5.真机模拟如何本地测试（与后端 flask 对接）

测试步骤：

  • 配置微信小程序开发工具：
    • 开启「开发环境不校验请求域名及 TLS 版本」（设置 → 项目配置）；
    • 填写后端本地 IP（如 http://192.168.1.100:5000，Windows 可通过 ipconfig 查看本地 IP）；
  • 注意事项：
    • 后端需设置 CORS（跨域资源共享），可通过 flask-cors 库快速配置；
    • 本地测试时确保手机与电脑在同一局域网，真机调试需使用电脑 IP 而非 localhost~

6.微信 code 的获取

步骤：

  • 1.在微信小程序后台配置合法域名，填入后端的域名(本地测试不用)
  • 2.在前端调用 wx.login()方法获取 code
  • 3.将 code 发送到后端，后端通过 code 获取 openid 和 session_key
  • 4.后端将 openid 和 session_key 返回给前端，前端保存到本地

7.自定义弹窗

步骤

  • 创建文件夹 input-modal
  • 创建四个文件：
    • input-modal.wxml (视图模板)
    • input-modal.wxss (样式文件)
    • input-modal.js (逻辑文件)
    • input-modal.json (配置文件)
  • input-modal.json 配置：
    1
    2
    3
    {
      "component": true
    }

使用方法

  1. 在页面 json 中声明组件：

    1
    2
    3
    4
    5
    {
      "usingComponents": {
        "input-modal": "/components/input-modal/input-modal"
      }
    }

  2. 在页面 wxml 中使用：

    1
    <input-modal show="{{showModal}}" bind:confirm="onConfirm" bind:cancel="onCancel"/>

  3. 控制显示/隐藏：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    Page({
      data: {
        showModal: false
      },
      showModal() {
        this.setData({
          showModal: true
        })
      },
      onConfirm() {
        // 确认逻辑
      },
      onCancel() {
        // 取消逻辑
      }
    })

8.json 格式的数据获取

1
2
3
4
5
6
7
updateTabbarList() {
            const role = getApp().globalData.userInfo?.user.role || 'student';  
            console.log('当前角色:', role);  // 调试日志
            this.setData({
                list: USER_PAGE[`${role}TabbarList`] || []  // 根据角色设置菜单
            });
        }

主要错误： 

1
2
3
4
5
6
const role = getApp().globalData.userInfo?.user.role || 'student'; //正确的

const role = getApp().globalData.userInfo?.role || 'student';  //错误的

对于json嵌套结构数据的获取一定要小心

9.npm 赋能小程序开发

npm 可以很方便地下载微信小程序的包，不用去 github 上下载后又粘贴了

方便项目的一键启动