您好,登錄后才能下訂單哦!
這篇文章主要介紹了小程序開(kāi)發(fā)框架組成有哪些,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
開(kāi)發(fā)框架組成介紹
小程序的開(kāi)發(fā)框架是由四大部分組成分別是WXML,WXSS,WXS,Java Script組成。
1.WXML用于描述頁(yè)面的內(nèi)容;
2. WXSS描述頁(yè)面樣式;
3. JS用于處理用戶(hù)邏輯以及數(shù)據(jù)通信;
4. WXS對(duì)WXML能力增強(qiáng)的一種體現(xiàn),可以把請(qǐng)求到的數(shù)據(jù)進(jìn)行一個(gè)計(jì)算處理,幫助wxml快速構(gòu)建出頁(yè)面的結(jié)構(gòu);
WXML語(yǔ)法
WXML(weixin markup language)
<標(biāo)簽名 屬性名="屬性名1" 屬性名="屬性名2" ...>
</標(biāo)簽名>
WXML特性
WXML一共有四個(gè)語(yǔ)言特性,分別是數(shù)據(jù)綁定、列表渲染、條件渲染以及模板引用
1、數(shù)據(jù)綁定:
<!--index.wxml--> <view> <text>{{message}}</text> </view> --------------------------------------------------- <!--index.js--> Page ( { data: { message:"Hello,world!" } } )
2、列表渲染
<!--index.wxml--> <view> <block wx:for="{{items}}" wx:for-item="{{item}}" wx:key="index"> <view>{{index}}:{{item.name}}</view> </block> </view> ------------------------------------------ <!--index.js--> Page ( { data: { items:[ {name:"商品A"} {name:"商品B"} ] } } )
3、條件渲染
<!--index.xwml--> <view>今天吃什么?<view> <view wx:if="{{condicition===1}}">當(dāng)然是吃餃子啦!</view> <view wx:elif="{{condicition===2}}">可以考慮吃面條!</view> <view wx:else>米飯把米飯吧</view> ----------------------------------------------------------- <!--index.js--> Page ( { data: { condicition:Math.floor(Math.random()*3+1) } } )
4、模板及引用
<!--index.wxml 模板--> <template name="template"> <view> <view>收件人:{{name}}</view> <view>聯(lián)系方式:{{phone}}</view> <view>地址:{{address}}</view> </view> </template> <template is="template" data="{{...item}}" ></template> -------------------------------------------------------------------- <!--index.js--> Page ( { data: { item: { name="張三", photo="1212123", address="China" } } } )
<!--index.wxml 引用--> <import src="a.wxml"></import> <template is="a"></template> <!--a.wxml--> <view>Hello,world</view> <template name="a"> Hello World! </template>
注意:引用不可嵌套
<!--index.wxml--> <include src="a.wxml"> <template is="a"></template> </include> ------------------------------------ <!--a.wxml--> <template name="a"> <view>This is a.wxml</view> </template> <view>hello world</view>
注意:include拷貝除了母版之外的所有內(nèi)容
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“小程序開(kāi)發(fā)框架組成有哪些”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。