小程序开发框架组成
WXML(WeiXin Markup language)
框架设计的一套标签语言，结合组件、WXS的事件系统，可以构建出页面的结构
语法 <开始标签>...</结束标签>
语言特性 |
---|---
数据绑定 |
列表渲染 |
条件渲染 |
模版引用 |
==数据绑定==
<!--index.wxml>
<view>
<text>{{messgae}}</text>
</view>
// index.js 所有组件和属性命名需要小写
page({
data: {
messgae: "Hello World"
}
})
属性
| 属性名 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 组件的唯一标示 | 保持整个页面唯一 |
| class | String | 组件样式类 | 在对应的WXSS中定义的样式类 |
| style | String | 组件内联样式 | 动态设置 |
| hidden | Boolean | 组件是否显示2 | 默认显示 |
| data-* | Any | 自定义属性 | 触发事件时，发送事件处理函数 |
| bind/catch | EventHandler | 组件的事件 |
==列表渲染==
// block不是组件 是一个包装元素
<block wx:for="{{items}}" wx:for-item="item" wx:for="index">
</block>
==条件渲染==
// index.wxml
<view>今天吃什么?</view>
<view wx:if="{{condition == 1}}"></view>
<view wx:elif="{{condition == 2}}"></view>
<view wx:else></view>
</view>
==模版引用==
// index.wxml
<template name="tempItem">
<view>
</view>
</template>
<template is="tempItem" data="{{}}"></template>
#import 引入目标文件的template模版 作用域
WXSS(WeiXin Style Sheets)
是一套样式语言，用于描述WXML的组件样式
CSS(Cascading Style Sheets): 一种样式表语言，用来描述HTML或XML文档的呈现
width height position color border
==尺寸单位==
设备样式(devices pixels) 屏幕上的像素点
CSS像素(CSS pixels) CSS样式上使用的逻辑像素
PPI/DPI(pixel per inch) 每英寸所拥有的像素数目，数值越大，显示屏的密度越高
DPR(device pixel Ratio) 手机上某一方向上设备像素和CSS像素之比
rpx: 规定屏幕为750个rpx
==样式导入==（静态样式）
@import 样式导入
/** index.wxml **/
<view class="container">
Hello World
</view>
/** index.wxss **/
@import './assets.wxss';
.container {
color: red;
}
/** assets.wxss **/
.container {
border: 1px solid #000;
}
==内联样式== （动态样式）
<!--index.wxml-->
<view style="width:500rpx;height:30px;background-color:{{colorValue}}">
Hello World!
</view>
<!--index.js-->
Page({
data: {
colorValue: 'red';
}
})
==选择器==
class .intro 选择所拥有class="intro"的组件
#id #firstname 选择拥有id="firstname"的组件
element view 选择view组件
element, elemwnt view, checkbox 选择所有文档的view的组件和所拥有的checkbox组件
::after view::after 选择view组件后边插入的内容
::before view::before 选择view组件前边插入的内容
==优先级==
!import ∞
/** index.wxss **/
.title {
color: red !import;
}
style 1000
#element 100
.element 10
element 1
WXS 小程序自己的一套脚本语言
模块
<!--inedex.wxml-->
<wxs module="m1">
module.exports = {
message: 'Hello, World'
}
</wxs>
<view> {{m1.message}} </view>
变量
注释
// 单行注释
/* 多行注释
var v = 1;
*/
运算符
基本运算符 一元运算符 位运算符 比较运算符 等值运算符 赋值运算符 二元逻辑运算符
语句
与Java Script基本一致，除了不支持try catch类型
数据类型
number string boolean object array function date regexp
基础类库
Number Date Global console Math JSON
Java Script
Java Script 是一种轻量的、解释型的、面向对象的头等函数语言，是一种动态的基于原型和多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。《Java Script 高级程序设计》 《Java Script权威指南》推荐阅读。
小程序中的Java Script: ECMAScript 小程序框架 小程序API
浏览器中的Java Script: ECMAScript DOM(对象模型) BOM(文档对象模型)
Nodejs中的Java Script: ECMAScript Native(原生模块) NPM(包管理系统)
ECMAScript 脚本程序设计语言
