1.uni-app是什么

官網(wǎng)鏈接：https://uniapp.dcloud.io/component/README
微信小程序官網(wǎng)：https://developers.weixin.qq.com/miniprogram/dev/component/

• 前端跨端框架
  使用vue.js開發(fā)所有前端應(yīng)用的框架
• 跨端解決方案
  只需開發(fā)一套代碼琐脏，即可發(fā)布多平臺

2.uni-app的主要特征

截屏2020-02-17上午11.01.04.png

3.uni-app解決了什么問題

• 多平臺統(tǒng)一的開發(fā)（微信荠诬，百度，支付寶，字節(jié)跳動檐蚜，QQ小程序，）
• 過去的跨端框架性能不夠優(yōu)秀
• 生態(tài)不豐富

4.創(chuàng)建uni-app工程

• 最好使用HBuilderX開發(fā)工具
  一般為了穩(wěn)定使用正式版，標(biāo)準(zhǔn)版只是簡單的一個編輯器锤悄，不能進(jìn)行app開發(fā)，因?yàn)闆]有預(yù)裝app開發(fā)的環(huán)境嘉抒，所以可以下載app開發(fā)版零聚，它已經(jīng)集成了相關(guān)的插件
  WechatIMG19.jpeg
• 創(chuàng)建項(xiàng)目
  方法一： 通過 HBuilderX 可視化界面
  1.在點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目
  2.選擇uni-app，輸入工程名众眨，如：hello-uniapp握牧，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建 uni-app娩梨。點(diǎn)擊模板里的 Hello uni-app 即可體驗(yàn)官方示例沿腰。
  
  WechatIMG26.png
  
  方法二：通過vue-cli命令行

// 1.使用正式版（對應(yīng)HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
// 2.使用alpha版（對應(yīng)HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
// 接下來選擇模版

5.運(yùn)行平臺

• H5
• APP
• 小程序（微信，支付寶狈定，百度颂龙，頭條，QQ）

6.目錄結(jié)構(gòu)說明

WechatIMG36.jpeg

WechatIMG34.jpeg

7.頁面配置（pages.json）

pages.json 文件用來對 uni-app 進(jìn)行全局配置纽什，決定頁面文件的路徑措嵌、窗口樣式、原生的導(dǎo)航欄芦缰、底部的原生tabbar 等企巢。（所有的頁面必須要在pages.json里面注冊，否則頁面將不會展示）

它類似微信小程序中app.json的頁面管理部分让蕾。注意定位權(quán)限申請等原屬于app.json的內(nèi)容浪规，在uni-app中是在manifest中配置。

• pages的配置說明（所有的頁面必須要在pages里面注冊探孝，否則頁面將不會展示）

  
  
  WechatIMG49.png
  
  
  18619776-70a4345b0a58e47d.png

• globalStyle
  用于設(shè)置應(yīng)用的狀態(tài)欄笋婿、導(dǎo)航條、標(biāo)題顿颅、窗口背景色等缸濒。會被pages里style的樣式覆蓋

  
  
  截屏2020-02-17下午1.05.42.png
• tabBar
  如果應(yīng)用是一個多 tab 應(yīng)用，可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應(yīng)頁庇配。

"tabBar": {
    "color": "#7A7E83",//顏色
    "selectedColor": "#3cc51f",//選中后的顏色
    "borderStyle": "black",
    "backgroundColor": "#ffffff",//背景色
    "list": [{
        "pagePath": "pages/component/index",//組件路徑
        "iconPath": "static/image/icon_component.png",//未選中時的圖標(biāo)
        "selectedIconPath": "static/image/icon_component_HL.png",//選中時的圖標(biāo)
        "text": "組件"http://中文文案
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}
/**
注意：
1.list下最多配置5項(xiàng)斩跌，最少配置2項(xiàng)；
2.tabbar顯示一次就會保存到內(nèi)存中讨永，以后每次打開不會重新請求資源滔驶，如果需要重新加載頁面，需要在onshow的生命周期中做邏輯運(yùn)算卿闹，達(dá)到刷新頁面的操作
3.有些屬性在某些平臺是不支持的
**/

8.基礎(chǔ)組件

<template>
<!-- 
1.vue文件：自定義的文件類型揭糕，類html語法，描述的一個vue
2.三部分組成：
    - template 視圖層 組件
    - script 邏輯層
    - style 樣式層
3.常用的基礎(chǔ)組件
    -view  ->  div  容器組件
    -text  ->  span  文字組件
    -image  ->  img  圖片組件
 -->
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }   
</style>

9.生命周期

• 應(yīng)用生命周期
  應(yīng)用生命周期僅可在App.vue中監(jiān)聽锻霎，在其它頁面監(jiān)聽無效著角。

<script>
    // 只能在App.vue里監(jiān)聽?wèi)?yīng)用的生命周期
    export default {
        //當(dāng)uni-app 初始化完成時觸發(fā)（全局只觸發(fā)一次）
        onLaunch() {},
        //當(dāng) uni-app 啟動，或從后臺進(jìn)入前臺顯示
        onShow() {},
        //當(dāng) uni-app 從前臺進(jìn)入后臺
        onHide() {},
      //當(dāng) uni-app 報錯時觸發(fā)
        onError() {}
    }
</script>

• 頁面生命周期

<!-- 
兩個頁面旋恼，A頁面 B頁面
A  進(jìn)入  B
1.A onHide
2.B onLoad
3.B onShow
4.B onReady

B  進(jìn)入  A
1.B onUnload
2.A onShow
-->
<script>
   export default {
        //頁面加載
        onLoad(e) {
          //接收上個頁面?zhèn)鱽淼膮?shù)（比如從路由傳過來的{id:566}）
          //請求后臺接口
          //渲染前的操作
        },
        //頁面顯示
        onShow() {},
        //頁面渲染完成
        onReady() { //獲取節(jié)點(diǎn)信息},
        //頁面隱藏
        onHide() {},
        //頁面卸載
        onUnload() {}
  }
</script>

WechatIMG155.jpeg

• 組件生命周期
  uni-app 組件支持的生命周期吏口，與vue標(biāo)準(zhǔn)組件的生命周期相同。這里沒有頁面級的onLoad等生命周期：

10.路由

uni-app 有兩種頁面路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)冰更、調(diào)用API跳轉(zhuǎn)产徊。

<template>
    <navigator url="../../App">組件跳轉(zhuǎn)</navigator>
    <button type="primary" @click="open">navigateTo跳轉(zhuǎn)</button>  
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        methods: {
            //uni.navigateTo保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面蜀细，使用uni.navigateBack可以返回到原頁面舟铜。
            open(){
                uni.navigateTo({
                    url:'../../App'
                })
            },
            //uni.redirectTo關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面奠衔。
            //uni.reLaunch關(guān)閉所有頁面谆刨，打開到應(yīng)用內(nèi)的某個頁面。   
            //uni.switchTab跳轉(zhuǎn)到 tabBar 頁面归斤，并關(guān)閉其他所有非 tabBar 頁面痊夭。    
            //uni.navigateBack關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面脏里∷遥可通過 getCurrentPages() 獲取當(dāng)前的頁面棧，決定需要返回幾層迫横。 
        }
    }
</script>

10.語法(和vue一樣)

<template>
    <view>
        <!-- 動態(tài)綁定數(shù)據(jù) -->
        <text class="title">{{title}}</text>

        <!-- 動態(tài)綁定屬性 -->
        <image class="logo" :src="src"></image>
    
        <!-- 動態(tài)class -->
        <view :class="content"></view>
        <view :class="[content,background]">會把數(shù)組里的都渲染</view>
        <view :class="{content:flag}">flag是一個布爾值鸦难，如果是true樣式就會渲染，否則樣式就不被渲染</view>

        <!-- 動態(tài)style 還有數(shù)組和對象的綁定方式?jīng)]有展示-->
        <view style="border: 1px solid red">111</view>
        <view :style="{background: 'red'}">222</view>
        <view :style="{background: background1}">333</view>
        <!-- 對象方式-->
        <view :style="{backgroundImage:`url(${imgUrl})`}">222</view>
        <view :style="{ paddingTop: paddingTopNum + 'px' }">333</view>


        <!-- 條件渲染 -->
        <view v-if="show">條件渲染show是布爾值</view>
        <view v-else></view>

        <!-- 列表渲染 必須加key屬性-->
        <view v-for="(item,i) in arr" :key="i">{{item}}</view>

        <!-- 事件綁定 綁定的方法需要寫在methods里-->
        <view @click="onClick('uni')">點(diǎn)擊</view>
        <input type="text" value="" @input='change'/>
    </view> 
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                src:'/static/logo.png',
                // class
                content:'content',
                background:'background',
                flag:true,

                // style
                background1:'green',
                imgUrl:'/static/image/logo1.png',
                paddingTopNum:10,

                show:true,
                arr:[111,222,333,444,555]
            }
        },
        methods: {
            onClick(e){
                console.log("參數(shù)",e)
            },
            change(e){
                //方法和屬性都是用this調(diào)用
                this.onClick()
                this.title="改變title"
                console.log('事件對象',e)
            }
            
        }
    }
</script>

<style>
    .content {
        border: 1px solid yellow;
    }
    .background{
        background-color: green;
    }
</style>

• 添加樣式

//style樣式設(shè)置
//對象方式
:style="{ backgroundImage:`url(${topBgImg})` }"
:style="{ left:`${iconDistance}rpx` }"
:style="{ paddingTop: paddingTopNum + 'px' }"
//對象數(shù)組方式
:style="[{ color: activeColor, fontSize: fontSize + 'px' }]"
//calc
:style="{height:'calc(100vh - ' + pageTopHeight +'px - 140rpx)'}"

//class樣式設(shè)置
//對象方式
:class="{ active: isActive, 'text-danger': hasError }" 
:class="[activeClass, errorClass]"

//三元運(yùn)算方式
:class="[isActive ? activeClass : ' ', errorClass]"
//數(shù)組加三元運(yùn)算方式
:class="[items.isShow?'':'noneActive',subIndex[index] == indexs?'value-item-active':'value-item']"

//數(shù)組加對象方式
:class="[{ active: isActive }, errorClass]"

11.布局與樣式

• 尺寸單位

（1）px 即屏幕像素
（2）rpx 即響應(yīng)式px员淫，一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位。以750寬的屏幕為基準(zhǔn)击敌，750rpx恰好為屏幕寬度介返。屏幕變寬，rpx 實(shí)際顯示效果會等比放大。
uni-app 規(guī)定屏幕基準(zhǔn)寬度 750rpx圣蝎。
（3）開發(fā)者可以通過設(shè)計稿基準(zhǔn)寬度計算頁面元素 rpx 值刃宵，設(shè)計稿 1px 與框架樣式 1rpx 轉(zhuǎn)換公式如下：
設(shè)計稿 1px / 設(shè)計稿基準(zhǔn)寬度 = 框架樣式 1rpx / 750rpx
換言之，頁面元素寬度在 uni-app 中的寬度計算公式：
750 * 元素在設(shè)計稿中的寬度 / 設(shè)計稿基準(zhǔn)寬度

舉例說明：
（1）若設(shè)計稿寬度為 750px徘公，元素 A 在設(shè)計稿上的寬度為 100px牲证，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx
（2）若設(shè)計稿寬度為 640px关面，元素 A 在設(shè)計稿上的寬度為 100px坦袍，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx
（3）若設(shè)計稿寬度為 375px等太，元素 B 在設(shè)計稿上的寬度為 200px捂齐，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400rpx缩抡。
HBuilderX有自帶的可以配置px和rpx的轉(zhuǎn)換奠宜，不用每次手動計算

WechatIMG243.png

• 樣式導(dǎo)入
  uni-app 內(nèi)置了常用的樣式變量，采用 scss 預(yù)處理方式瞻想，文件名為 uni.scss压真，在代碼中無需 import 這個文件即可使用這些樣式變量。

<!-- App.vue -->
<script>
    export default {}
</script>

<style>
    /*1.每個頁面公共css蘑险，可以直接在其他頁面使用 */
      .border{
        border: 1px solid red;
    }
    /*2.不想在App.vue里寫的話可以在外面新建一個base.css ,然后在這里引進(jìn)來滴肿，也可以在某個組件里引用*/
    @import './common/base.css'
</style>

12.基礎(chǔ)API（自行參考文檔）

12.自定義組件(和vue一樣)

//pages/index/index.vue
<template>
    <view>
        <list :name="11" @onClick='onClick'></list>
        <list :name="22"></list>
    </view> 
</template>
<script>
    /**1.在項(xiàng)目根目錄創(chuàng)建components目錄
    2.創(chuàng)建組件
    3.引入組件
    4.注冊組件
    5.傳參
    6.事件通訊
    **/
    import list from '@/components/list.vue'
    export default {
        components:{list},
        methods: {
            onClick(val){
                console.log(val)
            }
        }
    }
</script>

//components/list.vue
<template>
    <view class="list" @click="onClick">{{name}}</view>
</template>

<script>
    export default {
        props:{
            name:{
                type:Number,
                default:null
            }
        },
        methods: {
            onClick(){
                this.$emit('onClick',this.name)
            }
        }
    }
</script>
<style>
.list{
    border: 1px solid red;
    width: 100px;
    height: 100px;
}
</style>

13.自定義導(dǎo)航欄

image.png

image.png

• 最近需要獲取小程序頁面中 膠囊的 frame (y,x,w,h)等數(shù)據(jù),可以通過wx/uni提供的能力(如果用的是原生,則將以下代碼中的uni換為wx即可)

//膠囊的位置信息
var data = uni.getMenuButtonBoundingClientRect()
    console.log('膠囊寬度：',data.width)
    console.log('膠囊高度：',data.height)
    console.log('膠囊上邊界坐標(biāo)：',data.top)
    console.log('膠囊右邊界坐標(biāo)：',data.right)
    console.log('膠囊下邊界坐標(biāo)：',data.bottom)
    console.log('膠囊左邊界坐標(biāo)：',data.left)
//獲取狀態(tài)欄高度
uni.getSystemInfo({
    success(res) {
        console.log("狀態(tài)欄的高度：" + res.statusBarHeight)
    }
})

//2.計算頭部高度
//在app.vue中
onLaunch: function() {
    uni.getSystemInfo({
      success: (res) => {
        const statusBarHeight = res.statusBarHeight //狀態(tài)欄高度
        const menuButton = uni.getMenuButtonBoundingClientRect() //膠囊的信息
        //(menuButton.top - res.statusBarHeight) * 2//導(dǎo)航欄上下內(nèi)邊距
        const navHeight = menuButton.height + (menuButton.top - res.statusBarHeight) * 2 // 導(dǎo)航欄高度
        const headerHeight = navHeight + statusBarHeight // 總高度(狀態(tài)欄+導(dǎo)航欄)
        // 存儲到Vue里
        Vue.prototype.navData = { statusBarHeight, navHeight, headerHeight }
        // 存儲到本地存儲
        uni.setStorage({
          key: 'navData',
          data: { statusBarHeight, navHeight, headerHeight }
        })
      }
    })
  }

• 自定義導(dǎo)航欄組件
  app.vue中獲取個高度

<script>
    export default {
        onLaunch() {
            // uni.getSystemInfo 獲取設(shè)備信息 
            // uni.getMenuButtonBoundingClientRect 獲取膠囊數(shù)據(jù)
            // uni.setStorage 異步本地存儲
            uni.getSystemInfo({
                success: (res) => {
                    const menuButton = uni.getMenuButtonBoundingClientRect() // 膠囊
                    const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
                    const statusBarHeight = res.statusBarHeight //狀態(tài)欄高度
                    const navHeight = menuButton.height + navBarPadding // nav高度
                    const headerHeight = navHeight + statusBarHeight // 總高度
                    uni.setStorage({
                        key: 'navData',
                        data: {statusBarHeight,navHeight,headerHeight}
                    })
                    console.log(statusBarHeight, navHeight, headerHeight, ) // 20 40 60 iphone6/7/8
                }
            })
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每個頁面公共css */
</style>

封裝導(dǎo)航組件

<template>
    <view>
        <view class="navBar">
            <view class="navBar_statusBar" :style="{height: statusBarHeight + 'px'}"></view>

            <view class="navBar_head" :style="{height: navHeight + 'px',lineHeight: navHeight + 'px'}">
                <view class="navBar_callback">
                    <image v-if="callback" @click="callBack" src="../static/vertical/callBack.png"></image>
                </view>
                <p class="navBar_content">{{content}}</p>
            </view>
        </view>

        <view class="navBox" :style="{height: headerHeight + 'px'}"></view>
    </view>

</template>

<script>
    export default {
        props: {
            callback: {
                type: Boolean,
                default: true
            },
            content: {
                type: String,
                default: '首頁'
            }
        },
        data() {
            return {
                statusBarHeight: '',
                navHeight: '',
                headerHeight: '',
            };
        },

        created() {
            let _this = this
            uni.getStorage({
                key: 'navData',
                success({ data }) {
                    _this.statusBarHeight = data.statusBarHeight
                    _this.navHeight = data.navHeight
                    _this.headerHeight = data.headerHeight
                }
            });
        },
        methods: {
            callBack() {
                uni.navigateBack({

                })
            }
        }
    }
</script>

<style lang="scss">
    .navBar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: $green;
        width: 750rpx;

        .navBar_head {
            padding: 0 56rpx;
            display: flex;
            align-items: center;
            height: 53rpx;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 53rpx;
            text-align: center;

            .navBar_callback {
                position: absolute;
                left: 56rx;

                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }

            .navBar_content {
                width: 100%;
            }
        }
    }

    .navBox {
        width: 750rpx;
    }
</style>

• 小程序右上角的膠囊顏色怎么修改,pakeage.json

{
  "navigationBarBackgroundColor": "#f83e06",
  "navigationBarTitleText": "服務(wù)中心",
  "navigationBarTextStyle": "white"
}

修改效果：
"navigationBarTextStyle":"white"

image.png

"navigationBarTextStyle":"black"

image.png

14.封裝全局登錄檢查函數(shù)

WechatIMG218.jpeg

WechatIMG219.jpeg

WechatIMG220.jpeg

WechatIMG221.jpeg

15.定位

想獲取用戶的位置，首先需要獲取權(quán)限漠其，該權(quán)限需要在manifest.json里設(shè)置

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息將用于小程序位置接口的效果展示"
    }
}

image.png

16.修改uniapp組件樣式

自己嘗試了很多種方式嘴高，最后經(jīng)過查閱資料發(fā)現(xiàn)，style標(biāo)簽上加scoped和屎，同時使用 deep 穿透 可以成功修改：

<style scoped>
/deep/ .uni-combox__input {
    font-size: 14px;
}
</style>

17.url參數(shù)傳遞對象

開發(fā)小程序和uni-app時拴驮，遇到需要在navigaor組件中傳遞對象參數(shù)到下一個頁面的需求，傳遞對象時如果不JSON.stringify的話柴信，接收到的對象會被轉(zhuǎn)化成[object,object]形式套啤。但是使用字符串化往往還會帶來另一個問題，那就是超出規(guī)定的長度随常。那么怎么解決呢潜沦？方案如下，兩步走：

• 1.使用encodeURIComponent以及JSON.stringify()方法對對象進(jìn)行字符串化和編碼绪氛，這樣可以控制url參數(shù)的長度唆鸡，參考示例代碼（uni-app書寫方式，微信小程序自己改枣察。）

  <navigator :url="'/pages/base/baseEdit/baseEdit?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
  

• 2.接受信息的頁面使用JSON.parse()以及decodeURIComponent()接收和解碼參數(shù)争占。

  onLoad(option){
    const item = JSON.parse(decodeURIComponent(option.item));
  }
  

上述兩步即可解決url傳遞的對象的被編碼和長度超長問題了
參考：https://blog.csdn.net/qq_16371909/java/article/details/91361734

18.獲取從哪跳轉(zhuǎn)過來的頁面地址

 var pages = getCurrentPages(); // 當(dāng)前頁面
 var beforePage = pages[pages.length - 2]; // 前一個頁面
 var route=pages[pages.length - 2].route;//前一個頁面的路由

 wx.navigateBack({
     success: function() {
         beforePage.onLoad(); // 執(zhí)行前一個頁面的onLoad方法
     }
 });

19.placeholder樣式修改

<input type="text" style="font-size: 34upx;" placeholder-style="font-size:16px;" placeholder="患者姓名" confirm-type="search"></input>

19.uni如何執(zhí)行input中回車鍵的監(jiān)聽

按鍵修飾符：uni-app運(yùn)行在手機(jī)端燃逻，沒有鍵盤事件，所以不支持按鍵修飾符臂痕。
那如果有一個需求伯襟，希望在input中輸入之后，按回車鍵執(zhí)行一個查詢握童，應(yīng)該如何實(shí)現(xiàn)姆怪？

<input confirm-type="search" @confirm="search()">