UniApp框架基礎

1. MVC和MVVM思想

1.M:model-模型層迈倍,數(shù)據(jù)的增刪改查
2.V:view - 視圖層,前端頁面(html/javascript/css)
3.C:controller - 控制層范咨,處理業(yè)務


MVC圖解
MVVM模式

2.項目結構與文件類型

  • components:組件
  • pages:頁面
  • static:靜態(tài)文件,圖片資源
  • unpakage:打包文件
  • App.vue
    style:全局公用樣式,在頁面中局部樣式可以覆蓋全局樣式
    script:生命周期方法
  • main.js:配置全局變量
  • manifast.json:項目基礎配置
    基礎配置:appID,應用名稱厂庇,版本號(0.0.1)
    APP圖標配置
    APP啟動配置:默認啟動頁面
    APP SDK配置:appkey,secrect,登錄渠啊,分享,推送等
    APP模塊 權限配置:
    h5配置:頁面標題权旷,啟用https協(xié)議替蛉,發(fā)布到appstore,安卓平臺微信小程序,支付寶小程序必須要勾選
    微信小程序配置:appID,檢查安全域名(調(diào)試時取消勾選拄氯,本地局域網(wǎng)調(diào)試)
    源碼視圖:配置源碼視圖
  • uni.css:內(nèi)置常量的樣式(可不使用躲查,打包時不會添加進去使用需要安裝scss插件還需要在style節(jié)點lang-"scss")

3.全局標題與頁面標題

4.全局樣式與頁面樣式

5.APP的生命周期

  • onlaunch:初始化完成(全局只觸發(fā)一次)
  • onShow:(從后臺進去前臺)
  • onHide:(從前臺進入后臺)
  • onUniNViewMessage:(nview向vue通訊,傳遞json數(shù)據(jù)译柏,一般使用不到)
  • onShareAppMessage:頁面分享(只能分享到好友和群)
  • onPageScroll:頁面滾動
  • onNavagationBarButtontap:原生標題欄按鈕點擊

6.頁面的生命周期

  • onLoad:頁面加載
  • onUload:頁面關閉
  • onShow:頁面顯示
  • onHide:頁面隱藏
    -onReady:頁面初次渲染完成
  • onPullDownReresh:下拉刷新
  • onReachBottom:上拉刷新

7.數(shù)據(jù)綁定與事件

{{表達式}}:數(shù)據(jù)綁定
v-bind:組件的屬性名 可簡寫成 --> :組件的屬性名
事件:methords對象中添加方法

8.組件中的動態(tài)和靜態(tài)變量

9.條件判斷與for循環(huán)

條件渲染
v-if:v-if = " isShow"
v-else-if = " isShow"
v-else :其他(組件移除或添加)

v-show = " isShow" 組件隱藏或顯示

三元計算:v-if = "sex == 1"? true : fause

列表渲染:v-for
組件循環(huán)創(chuàng)建:v-for = " (stuObj stuIndex) in studentArray :key = ""stu.id"
:key:組件與數(shù)據(jù)綁定镣煮,實現(xiàn)組件和數(shù)據(jù)的一致性

雙層for循環(huán):
<block>標簽:只循環(huán)創(chuàng)建元素,不會換行展示
<view>標簽:會循環(huán)創(chuàng)建view標簽鄙麦,會換行展示
<checkbox>標簽:復選框
studentArray.push//從數(shù)組尾部添加元素
studentArray.

注意:嵌套循環(huán)時典唇,必須指定不同的索引,否則微信小程序運行會報錯

10.多端兼容條件編譯

編譯平臺:H5:網(wǎng)頁 APP-PLUS:(安卓胯府,iOS) MP:(微信小程序蚓聘,支付寶小城,頭條小程序) MP-WEIXIN:(微信小程序)
HTML中條件編譯

只在安卓盟劫,iOS上編譯

js中條件編譯
//#ifdef MP
只在小程序(微信夜牡,支付寶,百度)進行編譯
//#endif

css中條件編譯
/* #ifdef APP-PLUS/
只在安卓侣签,iOS進行編譯
/
#endif*/

11.固定像素px和響應式像素upx

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末塘装,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子影所,更是在濱河造成了極大的恐慌蹦肴,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猴娩,死亡現(xiàn)場離奇詭異阴幌,居然都是意外死亡勺阐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門矛双,熙熙樓的掌柜王于貴愁眉苦臉地迎上來渊抽,“玉大人,你說我怎么就攤上這事议忽±撩疲” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵栈幸,是天一觀的道長愤估。 經(jīng)常有香客問我,道長速址,這世上最難降的妖魔是什么玩焰? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮芍锚,結果婚禮上昔园,老公的妹妹穿的比我還像新娘。我一直安慰自己闹炉,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布润樱。 她就那樣靜靜地躺著渣触,像睡著了一般。 火紅的嫁衣襯著肌膚如雪壹若。 梳的紋絲不亂的頭發(fā)上嗅钻,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音店展,去河邊找鬼养篓。 笑死,一個胖子當著我的面吹牛赂蕴,可吹牛的內(nèi)容都是我干的柳弄。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼概说,長吁一口氣:“原來是場噩夢啊……” “哼碧注!你這毒婦竟也來了?” 一聲冷哼從身側響起糖赔,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤萍丐,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后放典,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逝变,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡基茵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了壳影。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拱层。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖态贤,靈堂內(nèi)的尸體忽然破棺而出舱呻,到底是詐尸還是另有隱情,我是刑警寧澤悠汽,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布箱吕,位于F島的核電站,受9級特大地震影響柿冲,放射性物質(zhì)發(fā)生泄漏茬高。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一假抄、第九天 我趴在偏房一處隱蔽的房頂上張望怎栽。 院中可真熱鬧,春花似錦宿饱、人聲如沸熏瞄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽强饮。三九已至,卻和暖如春为黎,著一層夾襖步出監(jiān)牢的瞬間邮丰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工铭乾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留剪廉,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓炕檩,卻偏偏與公主長得像斗蒋,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子笛质,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • ### 什么是Vue.js + Vue.js 是目前最火的一個前端框架吹泡,React是最流行的一個前端框架(Reac...
    JLong閱讀 1,053評論 0 0
  • 一、 vue的基礎用法 二经瓷、父子組件傳值(父傳子) 1.父傳子的時候通過屬性傳遞 2.子要聲明props:["屬性...
    江南之城閱讀 476評論 0 2
  • 一爆哑、模版指令 通過模版指令(寫在html中的),即是html和vue對象的粘合劑舆吮。 數(shù)據(jù)渲染 v-text揭朝、v-h...
    EndEvent閱讀 721評論 0 4
  • Webpack Webpack是模塊打包工具 作用: 1.減少文件數(shù)量 2.縮減代碼體積 3.提高瀏覽器打開速度 ...
    TUtuQ閱讀 833評論 0 0
  • #### vue note --- 1队贱、vue.js是什么? ? 構建數(shù)據(jù)驅(qū)動的web應用開發(fā)框架 2潭袱、為什么如此...
    李宏偉_eb5e閱讀 415評論 0 0