微信小程序开发实践经验总结（1）

一、开发小程序你得小心这些坑

切记：目前打包后的文件不能超过2M，否则不能上传到微信服务器。

小程序不支持sass语法，不支持window、document，不能使用相关的库，如jquery、PreventMoveOverScroll。

不支持阻止默认事件，没有preventDefault。

没有br标签，不支持table表格，不能使用来增大文字间距。

map \ canvas \ video 属于原生组件，层级是最高的，不管你设置任何的z-index都是不能覆盖到这些原生组件上。

img标签换成了image标签`

小程序中`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 + \：隐藏侧边栏