小程序开发记录
小程序开发记录
例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。 小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。
不支持dom操作 小程序脚本内不能使用window,document对象，所以无法操作dom。如果想操作节点，可用wx.createSelectorQuery()
另外数据驱动的开发模式，跟Vue相同，只是写法换了（vue: v-if，小程序: wx:if）
rpx布局 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设计师做设计图以iPhone6作为设计稿基准就可以，基本上可以用rpx替换px，不过在一些表单或者提示页面，使用设计稿上的rpx会让小屏幕手机看着尺寸略小，提示页面可参照weui用px来实现
路由层级 wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
wx.redirctTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面
wx.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面
小程序只能同时打开打开5个页面，当打开5个页面后，wx.navigateTo不能正常打开新页面，请避免多层级的交互方式，或者使用wx.redirctTo重定向
tabBar底部导航栏 tabBar是一个数组。配置最少2个，最多5个，tab数组按顺序排序
页面滚动到顶部 基础库1.4.0支持
wx.pageScrollTo({ scrollTop: 0 //滚动到页面的目标位置（单位px） }) 图片资源，CSS中的背景图片 CSS中无法使用本地资源(开发目录中)的图片作为background-image。可以使用网络图片资源，或base64，或者使用image标签。tabBar的icon资源可使用本地资源
unionid与openid的区别 每个用户在每个小程序里面都有唯一的openid，如果想在多个公众号，小程序里面共享用户信息，统一识别该用户，则需要用到unionid。为了获取uniond则需要注册微信开放平台，将需要共享的小程序，公众号进行绑定（不超过10个，超过10个还要申请认证称为第三发平台）。
textarea在滚动页面中的bug textarea,map等组件是由客户端创建的原生组件，它的层级是最高的。如果有遇到定位元素的话。永远在最上面，盖不住。
请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件 CSS动画对textarea无效 项目场景：页面底部固定了一个按钮（position:fixed), 页面滚动时，textarea总是在按钮上面，点击按钮就点到了textarea
可以设置网络请求的超时时间 app.js中配置
“networkTimeout”: { “request”: 10000 // 10秒 } window配置 navigationBarTextStyle 导航栏标题颜色仅支持black/white 状态栏，导航条，标题，窗口背景色支持纯色，不支持渐变色
参数问题 url中添加参数，如url?a=1&b=2, onLoad(options) options.query.a, options.query.b可获取到 扫描小程序码进页面，如果想获取小程序码url中所带的参数，可通过options.scene获取，不过需要对二维码中的scene值进行转换decodeURIComponent(options.scene), 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟，开发工具模拟时的 scene 的参数值需要进行 urlencode (启动参数：scene=n%3D1001) 实际为scene=n=1001，参数n=1001 image标签图片 image默认width: 300px, height: 225px, lazy-load懒加载只对page与scroll-view下的image有效 mode缩放模式，mode=“widthFix"比较常用(宽度不变，高度自动变化，保持原图宽高比不变)
小程序可以监听小程序的关闭后，但是无法阻断 场景：想在小程序退出时弹出个提示框，并阻止关闭（暂时无法实现）
小程序码 小程序码(葵花码)有几种方式，只有发布过小程序才可正常显示小程序码
小程序第一次提交的审核时间较后面的长 第一次提交审核一般1天到2天。所以为了能准点上线，建议先上一次临时的版本(放一个提示页面都可以)，过了第一次审核发布再说。日常提交审核，2-3小时就可以。
频繁地setData会造成性能问题 频繁地setData操作，会出现卡顿，操作反馈延迟严重，甚至有可能闪退。
场景：原计划用countUp做数字动画，原理就是频繁地改变数字值，setData操作，渲染到模版上。
ES6转ES5，小程序检测目录中的js文件(极少) 项目中用了webpack进行ES6转ES5，所以关闭了微信小程序的ES6转ES5功能。这个坑就比较隐蔽了，测试的时候在5S真机上报js错误，发现有个js(使用了ES6，没有转ES5)文件没有使用，微信小程序会去检测目录中的js文件，如果关闭了微信自带的ES6转ES5，检测到目录中js文件不兼容ES5，就报错。这个Bug只在5S真机里出现过，5C都正常。如果开启了微信开发工具中的ES6转ES5，则会自动帮你完成转化工作，不会出现类似问题。
分享些小程序开发比较常用的第三方库
weui-wxss(小程序版的weui样式库) Github: https://github.com/Tencent/weui-wxss wepy(小程序组件化框架) Github: https://github.com/Tencent/wepy skyvow/vux(小程序组件库) Github: https://github.com/skyvow/wux xiaolin3303/wx-charts(小程序图标) Github: https://github.com/xiaolin3303/wx-charts 作者：以乐之名