小程序语法及注意点

发布于 2019-11-21  26 次阅读


App

  • App只能声明在app.js中
  • onLaunch(){} //监听小程序的初始化
  • getApp()去获取全局唯一的app实例
  • 通过getApp()获取实例之后,不要私自调用生命周期函数
  • 在每一个页面的js文件,都需要一个Page进行注册页面

WXML

  • Mustache语法 :{{ }}
  • 公共属性:id,class,style,hidden,data-*,bind*/catch*

列表

  • wx:for默认值item默认的下标变量 index
  • block 不是一个组件,只是一个包装元素,没有任何属性

条件渲染

  • wx:ifwx:elifwx:else
  • wx:if与hidden的区别:wx:if 切换消耗高hidden 初次渲染消耗高

模板

  • template 模板标签 <template name="模板名"></template>
     ​
     模板的使用 is="模板名"
     ​
  • 传参 <template is= "模板名" data=:{{...object}}>
  • 接参 <template name="模板名" ></template>data中为渲染的数据源,适用扩展运算符[...]解构对象

引用

  • include 只能引入普通的视图内容(非模板wxs模块)
  • import 引入模板wxs:wx javascript

事件系统

  • 事件是视图层到逻辑层的通讯方式
  • 事件可以将用户的行为反馈到逻辑层进行处理
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
  • 事件对象可以携带额外信息,如id,dataset,touches

事件的绑定:

  1. bind+事件类型
  2. catch+事件类型相当于js中的on
  3. tap 手指触摸事件 相当于click

事件定义方法:

不推荐用箭头函数,this为当前页面实例,使用箭头函数获取不到

注:1.获取当前data内的属性值时,要使用this.data.属性

2.设置data内属性值时, this.setData({ })

事件的分类

  • 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
  • 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递

bind事件绑定不会阻止冒泡事件向上冒泡

catch事件绑定可以阻止向上冒泡

事件对象

  • target :事件源参数的集合
  • currentTarget:当前事件触发的组件 参数的集合
  • 若当前事件操作,直接作用到绑定的组件上时,两个属性基本一样若触发事件的根源不是操作绑定事件函数的组件上,参数要在currentTarget上获取

Wxss

  • rpx:根据屏幕宽度进行自适应,规定屏宽为750rpx建议开发微信小程序时,用哪个iphone6作为视觉稿的标准设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone61rpx = 0.5px1px = 2rpx
  • 样式导入:使用@import语句可以导入外联样式表@import后跟需要导入的外联样式表的相对路径用分号;标识语句结束

爬。