小程序开发中的那些坑

文章持续更新中

假设你的小程序项目文件结构如下：

├─ components # 公用组件库
  ├─ MyButton
    ├─ MyButton.js
    ├─ MyButton.json
    ├─ MyButton.wxml
    ├─ MyButton.wxss
├─ pages # 当前项目的源码，所有开发都在此目录中
  ├─ index # 页面存放位置，以页面名称作为子文件夹
    ├─index.js
    ├─ index.json
    ├─ index.wxml
    ├─ index.wxss
├─ app.js
├─ app.json
├─ app.wxss

ERROR Please do not register multiple Pages in undefined.js

1. 检查 app.js 中是否有 Page({}) 的代码，有则删除
2. 检查是否有页面未在 app.json 中注册，如果有加入注册 或者 删除这些页面（即使是 demo、测试、临时页面也必须在 app.json 中注册）

ERROR Component is not found in path xxx

1. 检查页面 json 中组件注册路径是否正确，正确写法:

// 相对路径
{
  "my-button": "../../components/MyButton/MyButton"
}

// 绝对路径
{
  "my-button": "/components/MyButton/MyButton"
}

2. 检查组件 js 中是否存在不合组件规范的代码，比如:

• data 初始化时使用了 properties 中的数据
• 组件 js 引入其他 js 时使用的是绝对路径，应用相对路径

自定义事件的监听

• 区别于 vue，小程序中自定义事件触发后监听函数接收到的数据是 BaseEvent 对象实例，传递的数据在该对象的 detail 属性中。

// component 中触发事件
this.triggerEvent('input', 'my-data')

// 监听事件
function (inputVal) {
  console.log(inputVal)  // 打印出的是一个 event 对象。。。。
}

// 正确的监听
function ({ detail: val }) {
  console.log(val)  // 打印出 my-data
}

• 如果有自定义数据需要在事件触发时一起传递，则需要在 wxml 节点上用 data-xxx 声明，注意 - 划分驼峰单词

<!-- your page or component file -->
<text data-user-id="{{ userId }}" bind:tap={{ handleUserIdTap }} >{{ userId }}</text>

// your page or component file
// ...
handleUserIdTap ({ currentTarget: { dataset: { userId } } }) {
  console.log('userId:::', userId)
}

• 部分原生组件在绑定事件时 bind:EVENT 和 bindEVENT 是不一样的，保险起见，严格按照文档来

hidden 属性失效

• 检查块样式是否有 display: flex，该属性会造成 hidden 属性失效。
  可通过设置 display: none 隐藏该块，示例：

view[hidden] {
  display: none
}

icon的居中

• 使用 text 代替，可能是原生组件的问题

iconfont 图标无法显示

1. 下载项目的 iconfont 字体文件
2. 复制 iconfont.css 为 iconfont.less
3. 通过 transfonter 将 iconfont.ttf 转换，注意打开 Base64 encode 并勾选 TTF、EOT 等所有字体文件格式
4. 下载并解压转换结果
5. 将转换结果中的 stylesheet.css 中的 @font-face 部分覆盖掉 iconfont.less 中的 @font-face
6. 将转换结果中的所有字体文件（.eot.svg.ttf 等）复制并覆盖掉原有的字体文件
7. 重启 gulp（npm start）

Page 超出一屏渐变色设置问题

• 使用 view 将页面内容包裹起来，对 view 设置渐变色

wx:for 列表渲染状态异常

• 检查 wx:for 所在的组件是否正确绑定了 wx:key

Vue 的同学重点关注下，微信小程序中列表循环绑定的 key 是 item 的属性名，这点不同于 vue 的 v-for

// your list data
cityList = [
  { id: '10001', name: 'Shanghai' },
  { id: '10002', name: 'Wellington' }
]

<!--in wechat mini programe-->
<text wx:for="{{ cityList }}" wx:for-item="city" wx:key="id">{{ city.name }}</text>

<!--in vue-->
<span v-for="city in cityList" :key="city.id">{{ item.name }}</>

app.js 中页面跳转失败

• app.js 中不支持路由相关的跳转函数（redirectTo、navigateTo 等），请使用 reLaunch 代替

这个官方文档中并没有说明，只是个人试出来的

文字垂直居中

在做商城时，一些标签（如价格标签、规格标签）在部分安卓机型上会出现上下居中异常，使用 padding/height+line-height 均无法 fix，此时可以考虑：

1. 将 tag 的 font-size、padding 等设为 2 倍大，并增加 transform: scale(0.5)
2. 将 tag 定位设为 position: absolute，避免第 1 步中撑大容器空间

String.prototype.padStart 未定义

部分安卓机有这个问题，解决方法是在 String 的原型上添加 padStart 函数：

// your polyfill.js
if (!String.prototype.padStart) {
  String.prototype.padStart = function (total, str) {
    let result = this
    while (result.length < total) {
      result = str + result
    }
    return result
  }
}

// app.js
import 'PATH-TO-YOUR-POLYFILL.js'
App({
  // your page configuration
})

wx.showToast 一闪而过

• 检查是否和 wx.hideLoading 一起使用了

目前 hideLoading 还能隐藏toast，参考 [bug] ios真机测试 showToast 一闪而过，一个临时的解决方案是：

wx.hideLoading()
// after hide loading, show toast with macrotask
setTimeout(() => {
  wx.showToast({
    title: res.data.message,
    icon: 'none',
    mask: true,
    duration: 2000
  })
}, 100)