6、开发框架组成部分
2018-07-08 本文已影响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