目錄結(jié)構(gòu)
Paste_Image.png
每個(gè)小程序都有一個(gè)整體的 app 和多個(gè)頁(yè)面 page蹭睡；
app 部分的結(jié)構(gòu)
app.js; //邏輯文件
app.json; //小程序的配置文件
app.wxss; // 小程序的全局樣式表
每個(gè) page 的結(jié)構(gòu)
page.js; // 頁(yè)面邏輯
page.wxml; //頁(yè)面結(jié)構(gòu)
page.wxss; //頁(yè)面樣式表
page.json; //頁(yè)面配置
特別注意
注意：為了方便開(kāi)發(fā)者減少配置項(xiàng)织阳，我們規(guī)定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。
邏輯層 *.js
邏輯層是js編寫(xiě)的。
注意點(diǎn)
- 增加App()和Page()方法，進(jìn)行注冊(cè)程序和頁(yè)面。
- 增加 getApp 和 getCurrentPages 方法戴已，分別用來(lái)獲取 App 實(shí)例和當(dāng)前頁(yè)面棧。
- 提供豐富的 API锅减，如微信用戶數(shù)據(jù)糖儡，掃一掃，支付等微信特有能力怔匣。
- 每個(gè)頁(yè)面有獨(dú)立的作用域握联，并提供模塊化能力桦沉。
- js的執(zhí)行環(huán)境不是瀏覽器所以無(wú)法使用web中的對(duì)象，如： window金闽、document等纯露。
- 開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份 JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行代芜，直到小程序銷毀埠褪。
app.js 模板
App({
onLaunch: function() { // Do something initial when launch. },
onShow: function() { // Do something when show. },
onHide: function() { // Do something when hide. },
globalData: 'I am global data'}),
apiUrl: 'xxx.xx.com'//可以定義全局變量
});
page.js 模板
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: { text: "This is page data." },
onLoad: function(options) { // Do some initialize when page load. },
onReady: function() { // Do something when page ready. },
onShow: function() { // Do something when page show. },
onHide: function() { // Do something when page hide. },
onUnload: function() { // Do something when page close. },
onPullDownRefresh: function() { // Do something when pull down. },
onReachBottom: function() { // Do something when page reach bottom. },
// Event handler.
viewTap: function() {
this.setData({ text: 'Set some data for updating view.' });
// 可以直接獲取app上的全局變量函數(shù)等等
app.apiUrl;
},
customData: {
hi: 'MINA'
}
})
視圖層
WXML 小程序的頁(yè)面結(jié)構(gòu)
數(shù)據(jù)綁定
雙大括號(hào)綁定{{}}
<!-- 簡(jiǎn)單綁定 -->
<view> {{ message }} </view>
<!-- 組件屬性 -->
<view id="id-{{index}}"> </view>
<!-- javascript運(yùn)算在大括號(hào)內(nèi)都支持 -->
<view id="id-{{index + '123'}}"> </view>
<!-- 邏輯判斷控制 -->
<view wx:if="{{length<5}}">1 </view>
<view wx:elif="{{length <2}}"> 2 </view>
<view wx:else> 3 </view>
列表渲染
<!-- 默認(rèn)方式 -->
<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>
<!-- 自定義 index item -->
<viewwx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}</view>
WXSS 小程序的樣式表
小程序自己的樣式表，支持大部分標(biāo)準(zhǔn)css 支持flex
小程序的響應(yīng)式布局挤庇，
- rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)钞速。規(guī)定屏幕寬為750rpx。如在 iPhone6 上嫡秕，屏幕寬度為375px渴语，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素昆咽，1rpx = 0.5px = 1物理像素驾凶。
- rem（root em）: 規(guī)定屏幕寬度為20rem；1rem = (750/20)rpx 潮改。
選擇器 - .class
- #id
- element
- element, element
- ::after
- ::before
組件
這里的組件相當(dāng)于html中的標(biāo)簽
- 視圖容器
- view （相當(dāng)于html 中的div）
- scroll-view
- swiper (小程序的輪播組件)
- 基礎(chǔ)內(nèi)容
- icon
- text
- progress
- 表單組件
- button
- checkbox
- form
- input
- label
- picker
- radio
- slider
- switch
- textarea
- 導(dǎo)航
- navigator
- 媒體組件
- audio
- image (注意image有個(gè)默認(rèn)的寬320px;高240px)
- video
- 地圖
- map
- 畫(huà)布
- canvas
