小程序開發(fā)框架組成
WXML(WeiXin Markup language)
框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合組件、WXS的事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)
語(yǔ)法 <開始標(biāo)簽>...</結(jié)束標(biāo)簽>
語(yǔ)言特性 |
---|---
數(shù)據(jù)綁定 |
列表渲染 |
條件渲染 |
模版引用 |
==數(shù)據(jù)綁定==
<!--index.wxml>
<view>
<text>{{messgae}}</text>
</view>
// index.js 所有組件和屬性命名需要小寫
page({
data: {
messgae: "Hello World"
}
})
屬性
| 屬性名 | 類型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 組件的唯一標(biāo)示 | 保持整個(gè)頁(yè)面唯一 |
| class | String | 組件樣式類 | 在對(duì)應(yīng)的WXSS中定義的樣式類 |
| style | String | 組件內(nèi)聯(lián)樣式 | 動(dòng)態(tài)設(shè)置 |
| hidden | Boolean | 組件是否顯示2 | 默認(rèn)顯示 |
| data-* | Any | 自定義屬性 | 觸發(fā)事件時(shí)，發(fā)送事件處理函數(shù) |
| bind/catch | EventHandler | 組件的事件 |
==列表渲染==
// block不是組件 是一個(gè)包裝元素
<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 引入目標(biāo)文件的template模版 作用域
WXSS(WeiXin Style Sheets)
是一套樣式語(yǔ)言，用于描述WXML的組件樣式
CSS(Cascading Style Sheets): 一種樣式表語(yǔ)言，用來(lái)描述HTML或XML文檔的呈現(xiàn)
width height position color border
==尺寸單位==
設(shè)備樣式(devices pixels) 屏幕上的像素點(diǎn)
CSS像素(CSS pixels) CSS樣式上使用的邏輯像素
PPI/DPI(pixel per inch) 每英寸所擁有的像素?cái)?shù)目，數(shù)值越大，顯示屏的密度越高
DPR(device pixel Ratio) 手機(jī)上某一方向上設(shè)備像素和CSS像素之比
rpx: 規(guī)定屏幕為750個(gè)rpx
==樣式導(dǎo)入==（靜態(tài)樣式）
@import 樣式導(dǎo)入
/** index.wxml **/
<view class="container">
Hello World
</view>
/** index.wxss **/
@import './assets.wxss';
.container {
color: red;
}
/** assets.wxss **/
.container {
border: 1px solid #000;
}
==內(nèi)聯(lián)樣式== （動(dòng)態(tài)樣式）
<!--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組件后邊插入的內(nèi)容
::before view::before 選擇view組件前邊插入的內(nèi)容
==優(yōu)先級(jí)==
!import ∞
/** index.wxss **/
.title {
color: red !import;
}
style 1000
#element 100
.element 10
element 1
WXS 小程序自己的一套腳本語(yǔ)言
模塊
<!--inedex.wxml-->
<wxs module="m1">
module.exports = {
message: 'Hello, World'
}
</wxs>
<view> {{m1.message}} </view>
變量
注釋
// 單行注釋
/* 多行注釋
var v = 1;
*/
運(yùn)算符
基本運(yùn)算符 一元運(yùn)算符 位運(yùn)算符 比較運(yùn)算符 等值運(yùn)算符 賦值運(yùn)算符 二元邏輯運(yùn)算符
語(yǔ)句
與Java Script基本一致，除了不支持try catch類型
數(shù)據(jù)類型
number string boolean object array function date regexp
基礎(chǔ)類庫(kù)
Number Date Global console Math JSON
Java Script
Java Script 是一種輕量的、解釋型的、面向?qū)ο蟮念^等函數(shù)語(yǔ)言，是一種動(dòng)態(tài)的基于原型和多范式的腳本語(yǔ)言，支持面向?qū)ο?、命令式和函?shù)式的編程風(fēng)格?！禞ava Script 高級(jí)程序設(shè)計(jì)》 《Java Script權(quán)威指南》推薦閱讀。
小程序中的Java Script: ECMAScript 小程序框架 小程序API
瀏覽器中的Java Script: ECMAScript DOM(對(duì)象模型) BOM(文檔對(duì)象模型)
Nodejs中的Java Script: ECMAScript Native(原生模塊) NPM(包管理系統(tǒng))
ECMAScript 腳本程序設(shè)計(jì)語(yǔ)言
