- 调试:
- this.getApp() 小程序实例
- this.getCurrentPages() 获取当前页面栈的实例
当页面第一次渲染的时候,data会以JSON的形式由逻辑层传至渲染层
开发要用真机测试,保证程序能正常运行
条件渲染
- wx:if、wx:else 、wx:elif
- block wx:if 。
只是一个包装元素,不是一个组件,不会影响页面布局 - hidden
- 列表渲染
- wx:for
- wx:for-index & wx:for-item 设属性值来改变 index & item 变量名
6.冒泡
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
- 非冒泡事件
- bind_ 冒泡 catch_ 阻止冒泡
- 中触摸事件不可冒泡,所以没有currentTarget属性
- 视图层向逻辑层传递数据:
- 事件触发-> e.currentTarget.dataset 获取自定义属性(data-)
- detail: 没有统一的格式,具体内容参考具体组件文档
- 引用:
:引入模板定义 :引入组件(除去模板定义部分) - wxml中出现import/include会用被引用代码来替换这部分代码,同时,若被引用文件中出现import/include,继续替换。include 的代码中若出现实现,则先实现后引用。(然后注意一下import作用域的问题:直接引用的模板才能直接实现)
开启上传代码时样式文件自动补全
开发过程中要三端测试(ios,Android,开发端),保证良好的兼容性.
wx开发过程中 ES6转换功能 严格模式
block & inline & inline-block
float & clear
- float:元素浮动是不在普通流中,会导致父级元素忽略浮动元素高度,形成坍塌。
- clear: 设置清除浮动元素可以解决坍塌
- .clearfix:after :利用.clearfix类能同意解决坍塌问题。
- 定位:
- 相对:relative,相对自己的定位,原占有空间不会关闭
- 绝对 :absolute 相对父级relative/absolute的绝对定位,fixed 相对于视窗的绝对定位。原占有空间会关闭。
Flex
使用时注意:
- 微信6.3.30中,在列表渲染时,新增加的在自动聚焦时的位置计算错误。
- 请勿在scroll-view中使用
- 的blur事件会晚于页面上的tap事件,如果需要在button的点击事件获取,可以使用的bindsubmit
- 不建议在多行文本上对用户的输入进行修改,所以的bindinput处理函数并不会将返回值反映到上
- setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。注意:
- 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
登录态维护:开发中,每个项目应该利用后台自己维护登录态,不能直接把session_key, openid等字段作为用户的标识或者session的标识。
调用wx.login()获取code后需要在5分钟内用code换取session_key, openid等用户信息,为此官方暴露了一个HTTP接口。
20. 在项目编码之前,我们需要先思考项目的架构,保证项目具备一定的拓展性、项目之间的低耦合性、项目代码可复用性,这样才能提高团队的编码效率。借用服务端三层架构模式,一个项目可分为表现层、业务逻辑层、数据访问层。github.com/justjavac
节点信息查询 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()
- 使用某一个组件或者api的时候,看官方文档