uni-app是一個使用Vue.js開發(fā)跨平臺個人文庫應(yīng)用的前端框架,開發(fā)者編寫一套代碼,可編譯到的iOS,安卓,H5,小程序等多個平臺。

新增以下章節(jié)
1、新聞列表、詳情實戰(zhàn)
2、在uni-app中使用 vue.js
3、自定義組件封裝及調(diào)用
一、uni app介紹、部署、目錄結(jié)構(gòu)
uni-app 是一個使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架,開發(fā)者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平臺。
了解下什么是 uni-app
快速上手
二、uni的樣式和布局
可以在根目錄app.vue定義全局樣式,子頁面可以單獨(dú)定義單頁樣式
基準(zhǔn)寬度為750px,建議設(shè)計寬度為750px ,
導(dǎo)入外聯(lián)樣式和使用內(nèi)聯(lián)樣式
選擇器 .class #id element
三、 uni配置相關(guān)
pages.json 可以進(jìn)行頁面配置
pages 進(jìn)行每個頁面的聲明
globalStyle 全局頁面樣式設(shè)置。也可以在每個頁面進(jìn)行單獨(dú)頁面樣式設(shè)置
tabBar 頁面菜單項設(shè)置
condition 開發(fā)期間生效,編譯模式,測試模擬頁面使用
其它配置可以在編輯器內(nèi)查看
四、生命周期
生命周期介紹
五、模版語法和數(shù)據(jù)綁定
模版和變量關(guān)系
data(){
return {
title: 'you age:',
age:'19',
}}
列表渲染 v-for
判斷渲染 v-if
六、class 和 style 的使用
class 支持的語法:
style 支持的語法:
七、uni事件處理
幾乎全支持 Vue官方文檔:事件處理器
// 事件映射表,左側(cè)為 WEB 事件,右側(cè)為 ``uni-app`` 對應(yīng)事件
{
click: 'tap', 點(diǎn)擊時
touchstart: 'touchstart', 觸摸時
touchmove: 'touchmove', 觸摸移動時
touchcancel: 'touchcancel', 停止跟蹤觸摸時
touchend: 'touchend', 觸摸移出時
tap: 'tap', 按下時
longtap: 'longtap', 長按時
input: 'input', 輸入時
change: 'change', 選擇時
submit: 'submit', 表單提交時
blur: 'blur', 失去焦點(diǎn)時
focus: 'focus', 獲得焦點(diǎn)時
reset: 'reset', 表單重置時
confirm: 'confirm', 顯示消息提示時
columnchange: 'columnchange', 字段變化時
linechange: 'linechange', 行變化時
error: 'error', 錯誤時
scrolltoupper: 'scrolltoupper', 滾動到頂部時
scrolltolower: 'scrolltolower', 滾動到底部時
scroll: 'scroll' 滾動時
}
事件修飾符 stop
事件綁定 @click="事件函數(shù)名"
事件監(jiān)聽、傳參
八、基礎(chǔ)組件使用