小程序是采用MINA框架
<!--demo.wxml-->
<view> Hello {{name}}</view>
<button bindtap="changeName">Click Me</button>
// demo.js
var helloData = {
name: 'WeChat'
}
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: helloData,
changeName: function (e) {
this.setData({
name: 'MINA'
})
}
})
開(kāi)發(fā)者通過(guò)框架將邏輯層數(shù)據(jù)庫(kù)中的name與視圖層的name進(jìn)行了綁定沦泌,所以在頁(yè)面一打開(kāi)的時(shí)候會(huì)顯示Hello WeChat 。
當(dāng)點(diǎn)擊按鈕的時(shí)候餐曹,視圖層會(huì)發(fā)送changeName的事件給邏輯層摆屯,邏輯層找到對(duì)應(yīng)的事件處理函數(shù)。
邏輯層執(zhí)行了setData的操作诗良,將name從WeChat 變?yōu)?MINA汹桦,因?yàn)樵摂?shù)據(jù)和試圖層已經(jīng)綁定了,從而視圖層會(huì)自動(dòng)改變?yōu)镠ello MINA鉴裹。
微信小程序不僅在底層架構(gòu)的運(yùn)行機(jī)制上做了大量的優(yōu)化舞骆,還在重功能(如page切換、tab切換径荔、多媒體督禽、網(wǎng)絡(luò)連接等)上使用接近于native的組件承載。所以微信小程序MINA有著接近原生App的運(yùn)行速度总处,做了大量的框架層面的優(yōu)化設(shè)計(jì)狈惫,對(duì)Android端和iOS端做了高度一致的呈現(xiàn),并且準(zhǔn)備了完備的開(kāi)發(fā)和調(diào)試工具鹦马。
小程序配置
全局配置app.json
進(jìn)行pages配置String Array胧谈,window配置Object忆肾,tabBar配置Object,networkTimeout配置Object菱肖,debug配Boolean置客冈。
{
"pages":[
"pages/index/index",
"pages/index/switch_shop",
"pages/product/product",
"pages/product/prolist",
"pages/proinfo/proinfo",
"pages/mine/mine",
"pages/map/map",
"pages/order/index",
"pages/order/information",
"pages/coupon/my_coupon",
"pages/coupon/add_coupon",
"pages/pay/pay",
"pages/pay/pay_success",
"pages/binds/tel",
"pages/binds/change_tel",
"pages/product_type/index",
"pages/giftcard/my_giftcard",
"pages/balance/my_balance",
"pages/balance/add_balance",
"pages/balance/balance_detail",
"pages/invite/invite",
"pages/sign/sign",
"pages/sign/sign_record",
"pages/present_card/card",
"pages/present_card/rule"
],
"window":{
"navigationStyle":"default",
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#1b1a1f",
"backgroundColor": "#f3f6f8",
"navigationBarTitleText": "老板電器",
"navigationBarTextStyle":"#FFFFFF",
"enablePullDownRefresh": false
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug" : false,
"tabBar" : {
"color" : "#000000",
"backgroundColor" : "#FFFFFF",
"borderStyle" : "#C3C3C3",
"selectedColor" : "#ff8161",
"list" : [
{
"pagePath" : "pages/index/index",
"text" : "首頁(yè)",
"iconPath" : "images/common/index.png",
"selectedIconPath" : "images/common/index-s.png"
},
{
"pagePath" : "pages/product_type/index",
"text" : "分類(lèi)",
"iconPath" : "images/common/type.png",
"selectedIconPath": "images/common/type-s.png"
},
{
"pagePath" : "pages/product/product",
"text" : "產(chǎn)品",
"iconPath" : "images/common/p.png",
"selectedIconPath" : "images/common/p-s.png"
},
{
"pagePath" : "pages/mine/mine",
"text" : "個(gè)人中心",
"iconPath" : "images/common/mine.png",
"selectedIconPath" : "images/common/mine-s.png"
},
{
"pagePath" : "pages/map/map",
"text" : "導(dǎo)航",
"iconPath" : "images/common/map.png",
"selectedIconPath" : "images/common/map-s.png"
}
]
}
}
作者:TBHacker
鏈接:小程序mina框架與配置-教程-小程序社區(qū)-微信小程序-微信小程序開(kāi)發(fā)社區(qū)-小程序開(kāi)發(fā)論壇-微信小程序聯(lián)盟
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)稳强,非商業(yè)轉(zhuǎn)載請(qǐng)注明出處