美文网首页
6、开发框架组成部分

6、开发框架组成部分

作者: 天听云道 | 来源:发表于2018-07-08 15:46 被阅读14次

    一、WXML (标签语言)
    1、语言特性
    a、数据绑定 Mustache语法(变量加双大括号)
    b、列表渲染 wx:for wx:for-item wx:key
    c、条件渲染 wx:if wx:elif wx:else
    d、模板引用

    1、模板
    <template name="temp"> </template>
    
    <template is="temp" data="{{...item}}"></template>
    
    2、文件引用
        import 只能引用模板文件中的模板块
    <import src="a.wxml"></import>
    <template is="a"></template>
    
        include 引用除了模板块之外的所有代码
    <include src="a.wxml"></include>
    

    二、WXSS (样式语言)
    1、相比 CSS
    a、尺寸单位 rpx

    1、设备像素:设备显示的最小物理单位,物理单位是显示屏幕上的一个个点,是固定不变的
    2、CSS像素:逻辑像素
    3、PPI/DPI:每英寸所拥有的像素数,数值越高,表示显示屏能以更高的密度显示图像。计算公式:屏幕分辨率平方和之根除以屏幕尺寸
    4、DPR:在手机某一方向,设备像素和CSS像素之比
    
    
    rem 相对html根元素的font大小单位,wxss不能操作html样式属性,所以rem适配方案失效,微信推出了rpx,规定屏幕宽度为750个rpx。
    

    b、样式

    1、@import    引入外联样式
    2、style    支持内联样式
    

    c、选择器

    .class
    #id
    element, element
    ::after
    ::before
    
    
    选择器优先级(权重)
    !important    无限大
    style               1000
    #element        100
    .element          10
    element            1
    

    三、WXS 小程序自己的脚本语言,一般用于过滤或者计算

    1、模块
    <wxs module="m1">
        module.exports = {
          message: '123'
         }
    <>
    <view>{{m1.message}}</view>
    
    or    引入外部
    
    <wxs src="./m2.wxs" module="m2"></wxs>
    
    module.exports = require("./m1.wxs")
    
    module.exports = {
      message: '123'
    }
    
    2、变量
    3、注释
        单行注释   //
        多行注释  /*  */
        结尾注释   /*
    
    4、运算符
        基本运算符    +、-、*、/
        一元运算符    自增、自减、正负值
        位运算符    左移、右移
        比较运算符    大于、小于
        等值运算符    等于、不等于、全等
        赋值运算符    a=a+1
        二元逻辑运算符    a|b  a&b
    
    5、语句
        不支持 try  cath
    
    6、数据类型  8种   javascript  6种
        number
        string
        boolean
        object
        array
        function
        date      getDate()    不能使用new运算符
        regexp   getRegexp()
    
    7、基础类库
        console      只提供console.log        
        Math
        Json    
        Number
        Date      只提供ES5中date构造函数的三个方法  Date.parse    Date.now   Date.utc
        Global
        
    

    四、JavaScript:

    1、简介:轻量的、解释型的、面向对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言、支持面向对象、命令式和函数式的编程风格
    
    2、Nodejs 中的 JavaScript
    ECMAScript
    Native:原生模板
    NPM:包管理
    
    
    3、小程序 中的 JavaScript
    ECMAScript
    小程序框架
    小程序API
    
    4、浏览器 中的 JavaScript
    ECMAScript
    DOM   浏览器文档对象模型,html 和 xml 的应用程序文档接口,代表加载到浏览器窗口的当前网页,通过js读取当前网页的DOM对象
    BOM   浏览器对象模型,主要处理浏览器窗口和框架,描述与浏览器进行交互的一些方法和接口
    
    5、ECMAScript (ES)
    有8个版本,主要使用ES5、ES6,iOS8 和 iOS9 并没有完全兼容ES6,
    
    语法
    类型
    语句
    关键词
    操作符
    对象
    
    6、小程序宿主环境(javaScript脚本运行环境)
    iOS          JavaScriptCore 由wkwebview渲染
    android    X5内核
    IDE          nwjs
    

    相关文章

      网友评论

          本文标题:6、开发框架组成部分

          本文链接:https://www.haomeiwen.com/subject/luzirftx.html