uni-app基本使用（一）

關注了下最近uni-app使用率在提高，畢竟是多端公用代碼，使用者體驗更接近原生效果，還是值得一看的，今天抽時間進行下總結，如果不對的地方，歡迎指出，及時修改

1.根據官網補充下介紹

1.uni-app是一個使用vue開發跨平台前端應用架構，是以開發者編寫vue.js代碼即可
2.uni-app通過編譯ios android 微信小程式等多個平台，并也達到了比較好的使用者體驗
3.uni-app因為是跨平台進行編譯的，是以原本的html标簽是不能使用的，自身定義了一套自己的标簽
           

2.開發環境搭建-及項目建立-及運作

uni-app的開發用HbuilderX  下載下傳app開發版--内置了uni-app編譯器及其模闆
如果開發小程式的話。需要結合微信開發者工具
 
打開HbuilderX  ---》建立----》項目 ---》uni-app項目    
    一般項目開發是建立空項目模闆
    官方直接有一套項目成型模闆，也可以建立供參考用
項目運作比較簡單-可以用模拟器-也可以用真機-自行百科
           

3.項目目錄結構

components檔案夾：元件存放目錄
unPackage:編譯的臨時檔案目錄
pages.json-->配置頁面路由，導覽列，頁籤等頁面資訊
    檔案裡邊幾個配置屬性：
        globalStyle-->全局配置.如果單個頁面不單獨進行配置的話，會走全局配置選項
        tabBar-->配置導航頁面
        condition-->進行模式配置，僅用作開發階段生效
        pages-->數組裡邊每一個元素相當于每一個元件route,預設第一個是首頁
main.js--項目入口檔案
mainfest.json-->配置應用名稱appid, logo,版本等打包資訊
page檔案夾是是每個頁面的元件
static檔案夾是存放引用的靜态資源
app.vue-->主要包含三個事件監聽 
    onLaunch:程式啟動執行事件
    onShow:程式開始啟動執行事件
    onHide：程式背景隐藏執行事件
           

4.元件内參數擷取

onLoad(options){
    console.log(options) // 這就是url上傳遞的參數
}
           

5.常用的标簽示例---官網ui直接拉過來就可以用

<view> --相當于div
<text> --相當于p
<navigator> --調轉标簽 相當于a
    示例:<navigator url="urltwo?id=100">
            <text class="name">{{name}}</text>
        </navigator>

uni-app像素機關是upx
    
           

今天到這吧  看看有時間繼續補上，這個官網還是比較詳細的，用法基本結合小程式和vue,其實也真沒什麼，看一下基本就會了