小程序开发中的那些坑
2018-09-27 本文已影响115人
KrisLeeSH
文章持续更新中
假设你的小程序项目文件结构如下：
├─ 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
- 检查 app.js 中是否有
Page({})的代码，有则删除 - 检查是否有页面未在 app.json 中注册，如果有加入注册 或者 删除这些页面（即使是 demo、测试、临时页面也必须在 app.json 中注册）
ERROR Component is not found in path xxx
- 检查页面 json 中组件注册路径是否正确，正确写法:
// 相对路径
{
"my-button": "../../components/MyButton/MyButton"
}
// 绝对路径
{
"my-button": "/components/MyButton/MyButton"
}
- 检查组件 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 图标无法显示
- 下载项目的 iconfont 字体文件
- 复制 iconfont.css 为 iconfont.less
- 通过 transfonter 将 iconfont.ttf 转换，注意打开 Base64 encode 并勾选 TTF、EOT 等所有字体文件格式
- 下载并解压转换结果
- 将转换结果中的 stylesheet.css 中的 @font-face 部分覆盖掉 iconfont.less 中的 @font-face
- 将转换结果中的所有字体文件（.eot.svg.ttf 等）复制并覆盖掉原有的字体文件
- 重启 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，此时可以考虑：
- 将 tag 的
font-size、padding等设为 2 倍大，并增加transform: scale(0.5) - 将 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)
