• 小程序笔记上


    小程序笔记上

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

    • 小程序不是运行在浏览器中,所以没有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在小程序指的是按下,移动端没有悬浮的概念
  • 相关阅读:
    【转】ibatis 中使用select top #pagesize# * from tablename
    华硕X43S关闭触控板
    abap程序的调试方法
    sap销售业务流程
    C#实现MD5加密
    5/11 PLS00103: 出现符号 "TABLE"在需要下列之一时: := . ( @ % ; 符号 ":=在 "TABLE" 继续之前已插入。
    abap处理字符串
    abap中的数据类型和数据对象
    oracle中清空表数据的两种方法
    DDL和DML
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/12802496.html
Copyright © 2020-2023  润新知