一、开发小程序你得小心这些坑
- 切记:目前打包后的文件不能超过2M,否则不能上传到微信服务器。
- 小程序不支持sass语法,不支持window、document,不能使用相关的库,如jquery、PreventMoveOverScroll。
- 不支持阻止默认事件,没有preventDefault。
- 没有br标签,不支持table表格,不能使用 来增大文字间距。
- map \ canvas \ video 属于原生组件,层级是最高的,不管你设置任何的z-index都是不能覆盖到这些原生组件上。
- img标签换成了image标签`<image src=""></imgae>
- 小程序中`nth-child(n)是从0开始的。
- setDate函数用于将数据从逻辑层发送到视图层,同时改变this.data的值,直接修改this.data无效,无法改变页面的状态还会造成数据不一致。单次设置的数据不同超过1024KB,请避免一次设置过多的数据。
- 为了方便开发者减少配置项,规定描述页面的四个文件(.js、.wxss、.wxml、.json)必须具有相同的路径和文件名。
- pages接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。
- tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- App() 必须在 app.js 中注册,且不能注册多个。不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
- 不要尝试修改页面栈,会导致路由以及页面状态错误。
- navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面。reLaunch 可以打开任意页面。
- exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
- require 暂时不支持绝对路径。
-
<checkbox checked="{{false}}"></checkbox>
不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。 - 当 wx:for 的值为字符串时,会将字符串解析成字符串数组
<view wx:for="array">
{{item}}
</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
19.花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
20.wx:if vs hidden:wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
21.bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
二、小程序开发者工具常用的快捷键
格式调整###
Ctrl+S:保存文件
Ctrl+[, Ctrl+]:代码行缩进
Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
Shift+Alt+F:代码格式化
Alt+Up,Alt+Down:上下移动一行
Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
Ctrl+Shift+Enter:在当前行上方插入一行
光标相关###
Ctrl+End:移动到文件结尾
Ctrl+Home:移动到文件开头
Ctrl+i:选中当前行
Shift+End:选择从光标到行尾
Shift+Home:选择从行首到光标处
Ctrl+Shift+L:选中所有匹配
Ctrl+D:选中匹配
Ctrl+U:光标回退
界面相关###
Ctrl + \:隐藏侧边栏