wxmp_notes

1. 调试：

• this.getApp() 小程序实例
• this.getCurrentPages() 获取当前页面栈的实例

2. 当页面第一次渲染的时候，data会以JSON的形式由逻辑层传至渲染层

3. 开发要用真机测试，保证程序能正常运行

4. 条件渲染

• wx:if、wx:else 、wx:elif
• block wx:if 。<block/>只是一个包装元素，不是一个组件，不会影响页面布局
• hidden

5. 列表渲染

• wx:for
• wx:for-index & wx:for-item 设属性值来改变 index & item 变量名

6.冒泡

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
• 非冒泡事件
• bind_ 冒泡 catch_ 阻止冒泡
• <canvas/>中触摸事件不可冒泡，所以没有currentTarget属性

7. 视图层向逻辑层传递数据：

• 事件触发-> e.currentTarget.dataset 获取自定义属性（data-）
• detail: 没有统一的格式，具体内容参考具体组件文档

8. 引用：

• <import/>：引入模板定义
• <include/>：引入组件（除去模板定义部分）
• wxml中出现import/include会用被引用代码来替换这部分代码，同时，若被引用文件中出现import/include,继续替换。include 的代码中若出现<template is="">实现，则先实现后引用。（然后注意一下import<template>作用域的问题：直接引用的模板才能直接实现）

9. 开启上传代码时样式文件自动补全

10. 开发过程中要三端测试（ios,Android,开发端），保证良好的兼容性.

11. wx开发过程中 ES6转换功能 严格模式

12. block & inline & inline-block

13. float & clear

• float：元素浮动是不在普通流中，会导致父级元素忽略浮动元素高度，形成坍塌。
• clear： 设置清除浮动元素可以解决坍塌
• .clearfix:after ：利用.clearfix类能同意解决坍塌问题。

14. 定位：

• 相对：relative，相对自己的定位，原占有空间不会关闭
• 绝对 ：absolute 相对父级relative/absolute的绝对定位，fixed 相对于视窗的绝对定位。原占有空间会关闭。

15. Flex

16. 使用<textarea/>时注意：

• 微信6.3.30中，<textarea/>在列表渲染时，新增加的<textarea/>在自动聚焦时的位置计算错误。
• 请勿在scroll-view中使用<textarea/>
• <textarea/>的blur事件会晚于页面上的tap事件，如果需要在button的点击事件获取<textarea/>，可以使用<form/>的bindsubmit
• 不建议在多行文本上对用户的输入进行修改，所以<textarea/>的bindinput处理函数并不会将返回值反映到<textarea/>上

17. setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。注意：

• 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
• 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

setData() 参数格式：接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

18. 登录态维护：开发中，每个项目应该利用后台自己维护登录态，不能直接把session_key, openid等字段作为用户的标识或者session的标识。

19. 调用wx.login()获取code后需要在5分钟内用code换取session_key, openid等用户信息，为此官方暴露了一个HTTP接口。
    20. 在项目编码之前，我们需要先思考项目的架构，保证项目具备一定的拓展性、项目之间的低耦合性、项目代码可复用性，这样才能提高团队的编码效率。借用服务端三层架构模式，一个项目可分为表现层、业务逻辑层、数据访问层。

20. github.com/justjavac

21. 节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

示例代码：
const query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect(function(res){ res.top // #the-id 节点的上边界坐标（相对于显示区域） }) query.selectViewport().scrollOffset(function(res){ res.scrollTop // 显示区域的竖直滚动位置 }) query.exec()

23. 使用某一个组件或者api的时候，看官方文档