一、項(xiàng)目結(jié)構(gòu)介紹

pages.json：配置頁(yè)面路由隐解、導(dǎo)航條鞍帝、選項(xiàng)卡等頁(yè)面類信息，詳見煞茫。
manifest.json：配置應(yīng)用名稱帕涌、appid、logo续徽、版本等打包信息蚓曼，詳見。
App.vue：應(yīng)用配置钦扭，用來(lái)配置App全局樣式以及監(jiān)聽?wèi)?yīng)用的生命周期纫版。
main.js：Vue初始化入口文件
static目錄：存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的地方客情，注意：靜態(tài)資源只能存放于此
pages目錄：業(yè)務(wù)頁(yè)面文件存放目錄
components目錄：組件文件存放目錄

Vue.prototype.$store知識(shí)點(diǎn)：
https://blog.csdn.net/qq_32407233/article/details/83819831

數(shù)據(jù)緩存uni.getStorageSync知識(shí)點(diǎn)：
http://www.hcoder.net/tutorials/info_1353.html

Vue.config.productionTip = false 以開發(fā)環(huán)境運(yùn)行

二其弊、css3相關(guān)

http://www.reibang.com/p/fe36aa3e5fc6

vw: 視口寬度的百分比（1vw 等于視口寬度的 1%）
vh: 視口高度的百分比（1vh 等于視口高度的 1%）
％ 是相對(duì)于父元素的大小設(shè)定的比率，vw vh 是視口大小決定的
vmin: 選取 vw 和 vh 中最小的那個(gè)
vmax: 選取 vw 和 vh 中最大的那個(gè)

vw膀斋、vh 是基于視口的梭伐，而不是父元素。1vw 等于1/100 的視口寬度仰担，1vh 等于1/100 的視口高度糊识，比如：
瀏覽器高度 950px，寬度為 1920px, 1vh = 950px/100 = 9.5 px惰匙，1vw = 1920px/100 =19.2 px
vw技掏、vh 能直接獲取高度，而 ％ 如果沒有設(shè)置body的高度情況下项鬼，是無(wú)法獲取可視區(qū)域的高度哑梳。
vmin、vmax 用處解決橫屏豎屏字體不一樣的問(wèn)題

單位方面绘盟，px無(wú)法動(dòng)態(tài)適應(yīng)不同寬度的屏幕鸠真，rem只能用于h5、rpx只能用于微信小程序龄毡。為此uni-app新增了 upx 吠卷，通吃所有端、所有屏幕寬度的動(dòng)態(tài)單位 upx文檔沦零，微信小程序中認(rèn)為頁(yè)面寬度為750rpx祭隔，在不同的設(shè)備上1rpx對(duì)應(yīng)的像素值是不同的，如果設(shè)備寬度為750px那么1rpx=1px路操，如果設(shè)備寬度為1500px那么1rpx=2px疾渴，upx類似于rpx使用更寬泛千贯。

html > body table + ul {margin-top:20px;}

這個(gè)選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的所有兄弟 ul 元素，該 table 元素包含在一個(gè) body 元素中搞坝，body 元素本身是 html 元素的子元素搔谴。

a:link {color: #FF0000}     /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00}  /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}   /* 選定的鏈接 */

box-sizing布局

css3增添了盒模型box-sizing,有三個(gè)屬性值
content-box:默認(rèn)值，讓元素維持w3c的標(biāo)準(zhǔn)盒模型桩撮。元素的width/height等于border的寬度加上padding值加上元素內(nèi)容的width/height敦第，(默認(rèn)內(nèi)容區(qū)大小不會(huì)變)
即Element Width/Height = boder + padding + content width/height;
border-box:讓元素維持IE6及以下版本盒模型，元素的width/height等于元素內(nèi)容的width/height店量，
即：Element Width/Height = width/height-border-padding芜果。
inherit:繼承父元素的盒模型模式。
其中最重要的就是border-box,如果遇到不影響其他區(qū)域布局垫桂，還要給元素加padding师幕、border的情況粟按，使用border-box元素所占空間不會(huì)變诬滩，加padding、border會(huì)往內(nèi)擠灭将，保持外面容器不被破壞疼鸟。（注意：margin不包含在元素空間，加了margin會(huì)向外撐開）庙曙。
兼容性：IE8+及其他主流瀏覽器均支持box-sizing空镜。其中IE6及以下默認(rèn)是以類似border-box盒模型來(lái)計(jì)算尺寸。
（ps：Firefox瀏覽器捌朴，box-sizing還可以設(shè)置一個(gè)padding-box吴攒，指定元素的寬度/高度等于內(nèi)容的寬度/高度和內(nèi)距，
即：Element Width/Height = content width/height+padding砂蔽。）

三洼怔、輸入框input

v-model僅僅是語(yǔ)法糖

<input type="text" v-model="something">

相當(dāng)于

<input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

四、狀態(tài)欄$導(dǎo)航欄

可以隱藏掉uni-app的原生導(dǎo)航欄使用colorui提供的cu-custom自定義導(dǎo)航欄左驾。

1镣隶、下載插件

https://ext.dcloud.net.cn/plugin?id=239下載colorui并倒入你的項(xiàng)目根目錄

2、App.vue 引入關(guān)鍵Css main css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    ....
</style>

3诡右、使用自定義導(dǎo)航欄

main.js 引入 cu-custom 組件

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

4安岂、App.vue 獲得系統(tǒng)信息

onLaunch: function() {
    uni.getSystemInfo({
        success: function(e) {
            // #ifndef MP
            Vue.prototype.StatusBar = e.statusBarHeight;
            if (e.platform == 'android') {
                Vue.prototype.CustomBar = e.statusBarHeight + 50;
            } else {
                Vue.prototype.CustomBar = e.statusBarHeight + 45;
            };
            // #endif

            // #ifdef MP
            Vue.prototype.StatusBar = e.statusBarHeight;
            let custom = wx.getMenuButtonBoundingClientRect();
            Vue.prototype.Custom = custom;
            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
            // #endif
        }
    })
},

5、pages.json 配置取消系統(tǒng)導(dǎo)航欄

"globalStyle": {
    "navigationStyle": "custom"
},

6帆吻、page.vue 頁(yè)面可以直接調(diào)用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">導(dǎo)航欄</block>
</cu-custom>

帶分割線的導(dǎo)航欄

<cu-custom bgColor="bg-white solid-bottom" :isBack="false">
    <block slot="backText"></block>
    <block slot="content">消息</block>
</cu-custom>

7域那、修改狀態(tài)欄文字顏色

pages.json 文件中對(duì)應(yīng)頁(yè)面的style設(shè)置navigationBarTextStyle為white或者black

{
            "path" : "pages/mine/minePages/personInfo/personInfo",
            "style" : {
                "navigationBarTitleText": "個(gè)人信息",
                "navigationBarTextStyle": "white"
            }
        }

參數(shù)說(shuō)明

參考地址
http://www.reibang.com/p/c32e09109eb6
https://uniapp.dcloud.io/collocation/pages

五猜煮、數(shù)據(jù)持久化

1. uni.setStorage

將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中次员，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容样眠，這是一個(gè)異步接口。

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

2. uni.setStorageSync
   將 data 存儲(chǔ)在本地緩存中指定的 key 中翠肘，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容檐束，這是一個(gè)同步接口。

try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

3. uni.getStorage
   從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容束倍。

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

4. uni.getStorageSync
   從本地緩存中同步獲取指定 key 對(duì)應(yīng)的內(nèi)容被丧。

try {
    const value = uni.getStorageSync('storage_key');
    if (value) {
        console.log(value);
    }
} catch (e) {
    // error
}

5. uni.getStorageInfo
   異步獲取當(dāng)前 storage 的相關(guān)信息。

uni.getStorageInfo({
    success: function (res) {
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    }
});

6. uni.getStorageInfoSync

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}

7. uni.removeStorage
   從本地緩存中異步移除指定 key绪妹。

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});

8. uni.removeStorageSync
   從本地緩存中同步移除指定 key甥桂。

try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

9. uni.clearStorage
   清理本地?cái)?shù)據(jù)緩存。

uni.clearStorage();

10. uni.clearStorageSync
    同步清理本地?cái)?shù)據(jù)緩存邮旷。

try {
    uni.clearStorageSync();
} catch (e) {
    // error
}

uni-app的Storage在不同端的實(shí)現(xiàn)不同：

• H5端為localStorage黄选，瀏覽器限制5M大小，是緩存概念婶肩，可能會(huì)被清理
• App端為原生的plus.storage办陷，無(wú)大小限制，不是緩存律歼，持久化
• 各個(gè)小程序端為其自帶的storage api民镜，數(shù)據(jù)存儲(chǔ)生命周期跟小程序本身一致，即除用戶主動(dòng)刪除或超過(guò)一定時(shí)間被自動(dòng)清理险毁，否則數(shù)據(jù)都一直可用制圈。
• 微信小程序單個(gè) key 允許存儲(chǔ)的最大數(shù)據(jù)長(zhǎng)度為 1MB，所有數(shù)據(jù)存儲(chǔ)上限為 10MB畔况。
• 支付寶小程序單條數(shù)據(jù)轉(zhuǎn)換成字符串后鲸鹦，字符串長(zhǎng)度最大200*1024。同一個(gè)支付寶用戶跷跪，同一個(gè)小程序緩存總上限為10MB馋嗜。
• 百度、頭條小程序文檔未說(shuō)明大小限制
  除此之外域庇，H5端還支持websql嵌戈、indexedDB、sessionStorage听皿；App端還支持SQLite熟呛、IO文件等本地存儲(chǔ)方案。

六尉姨、獲取當(dāng)前時(shí)間

    var date = new Date()
    console.log('當(dāng)前年'+date.getFullYear())
    console.log('當(dāng)前月'+(date.getMonth()+1).toString())
    console.log('當(dāng)前日'+date.getDate().toString())
    console.log('當(dāng)前時(shí)'+date.getHours().toString())
    console.log('當(dāng)前分'+date.getMinutes().toString())
    console.log('當(dāng)前秒'+date.getSeconds().toString())

  /**
 * 獲取當(dāng)前時(shí)間
 * 格式Y(jié)YYY-MM-DD
 */
Vue.prototype.getNowFormatDate = function() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
};

七庵朝、字符串操作

• splite(' ')可以將字符串按某個(gè)字符或者其他分割。返回?cái)?shù)組。
• reverse()該方法會(huì)改變?cè)瓉?lái)的數(shù)組九府，而不會(huì)創(chuàng)建新的數(shù)組椎瘟。此函數(shù)可以將數(shù)組倒序排列。
• join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串侄旬。元素是通過(guò)指定的分隔符進(jìn)行分隔的肺蔚。指定分隔方法join(' ');

例如

                var message = 'abc'
                console.log('操作之前的結(jié)果為'+message)
                var a = message.split('').reverse().join('')
                console.log('操作之后的結(jié)果為'+a)

此操作不會(huì)改變?cè)瓉?lái)的字符串，會(huì)生成一個(gè)新的字符串

八儡羔、計(jì)算屬性(computed)和方法(methods)的區(qū)別

我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性宣羊。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而汰蜘，不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的仇冯。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值。這就意味著只要 message 還沒有發(fā)生改變族操，多次訪問(wèn) reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果苛坚，而不必再次執(zhí)行函數(shù)。

  computed: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  }

但是以下用法不會(huì)出發(fā)更新色难，每次獲取都是第一次的時(shí)間泼舱，需要放到methods中

computed: {
  now: function () {
    return Date.now()
  }
}

九、一個(gè)頁(yè)面的框架

<template>
    <view class="content">
        <cu-custom bgColor="bg-white solid-bottom" style="align-self: flex-start;">
            <block slot="backText"></block>
            <block slot="content">首頁(yè)</block>
        </cu-custom>
        <view class="c"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            
        },
        methods: {
        }
    }
</script>

<style lang="less">
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        width: 100vw;
        background-color: #FFFFFF;
        
        .c{
            width: 750upx;
            background-color: #007AFF;
            flex-grow: 1;
        }
    }
    
</style>

img.png

默認(rèn)導(dǎo)航欄有可能不是居中的莱预，所以需要給cu-custom設(shè)置style

        <cu-custom bgColor="bg-white solid-bottom" style="align-self: flex-start;">
            <block slot="backText"></block>
            <block slot="content">首頁(yè)</block>
        </cu-custom>