小程序开发框架组成

小程序开发框架组成

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 脚本程序设计语言