小程序笔记上

小程序笔记上

记录要点与差别(主要是减少踩坑)

• 小程序不是运行在浏览器中，所以没有DOM和BOM

• 小程序的额外成员

  • app方法 用于定义应用实例对象
  • Page方法 用于定义页面对象
  • getApp方法 用于定义全局应用程序对象
  • getCurrentPages方法 用来获取当前页面的调用栈
  • wx 对象 用来提供核心api

• 小程序的js是支持common.js规范的(跟node.js使用时一致)

  只支持这种导出方式
  moudle.export = {
      say : say
  }

• 数据绑定与vue类似(依然使用小胡子语法(mustache)展示)

• 当语法解析误解了true/false可以使用小胡子来解决

• 基本的循环 wx:for

  • 数据源必须是一个数组
    • 给遍历对象定义名称 wx:for-item
    • 给遍历索引定义名称 wx:for-index

• 事件处理(事件处理函数不需要放在method里面)

  • 事件句柄的名称不一致 eg:bindtap(类似onclick)

• 事件冒泡与web事件冒泡一致

• 事件传参

  <button bindtap="bindtap1(123)"></button>
  <!-- 此时bindtap1(123)是作为一个函数名，而不能将参数123传递给bindtap1。-->

• 正确的传参方式（使用dataset）

  bindtap1 : function(e){
    //dataset是元素包含 data- 开头的对象（h5的方法）
    console.log(e.target.dataset)
  }
  //这里不能使用this来获取当前点击对象，此时this指向的是页面对象

• 小程序是单向数据流(与vue等框架不一样,vue有监视数据变化并通知页面发生变化，而小程序没有)

  

     //直接赋值没有通知页面做出变化
     //应使用this.setData通知页面发生变化
    Page({
      data:{
        msg :'hhh'
      },
      bindtap1 : function(e){
        this.setData({
          msg ： e.target.value
    })
      }
    })
  
  

• 页面条件渲染

  • 可以使用block作为控制属性的载体，在页面渲染中没有意义

    <block wx:if="{{show}}"/>
  

  • hidden属性（真则隐藏，标签不会工作，而wx:if隐藏时，标签不工作）

• WXSS与CSS的差异

  • 新增尺寸单位：rpx,规定屏幕为750rpx,来实现自适应不同手机屏幕(eg:1rpx=0.5px iphone6)
  • PC端1px对应一个物理像素，而移动端可能对应多个物理像素
  • 选择器只支持基础的选择器，不支持CSS3里面的高级选择器
  • hover在小程序指的是按下，移动端没有悬浮的概念