1.uni-app的相關(guān)介紹使用

uni-app的基本使用

基礎(chǔ)部分：

+環(huán)境搭建

+頁面外觀配置

+數(shù)據(jù)綁定

+uni-app的生命周期

+組件的使用

+uni-app中樣式學(xué)習(xí)

+在uni-app中使用字體圖標(biāo)和開啟scss

+條件注釋跨端兼容

+uni中的事件

+導(dǎo)航跳轉(zhuǎn)

+組件創(chuàng)建和通訊婿奔，及組件的生命周期

+uni-app中使用uni-ui庫

項(xiàng)目：黑馬商城項(xiàng)目

##### uni-app介紹 [官方網(wǎng)頁](https://uniapp.dcloud.io/resource)

`uni-app`是一個(gè)使用[Vue.js](https://vuejs.org/)開發(fā)所有前端應(yīng)用的框架符隙，開發(fā)者編寫一套代碼甥郑，可發(fā)布到iOS躬它、Android顾瞪、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺(tái)。

即使不跨端讼稚，`uni-app`同時(shí)也是更好的小程序開發(fā)框架。

具有vue和微信小程序的開發(fā)經(jīng)驗(yàn)绕沈，可快速上手uni-app

為什么要去學(xué)習(xí)uni-app锐想？

相對(duì)開發(fā)者來說，減少了學(xué)習(xí)成本乍狐，因?yàn)橹粚W(xué)會(huì)uni-app之后赠摇，即可開發(fā)出iOS、Android浅蚪、H5藕帜、以及各種小程序的應(yīng)用，不需要再去學(xué)習(xí)開發(fā)其他應(yīng)用的框架掘鄙，相對(duì)公司而言耘戚，也大大減少了開發(fā)成本。

#####環(huán)境搭建

安裝編輯器HbuilderX? [下載地址](https://www.dcloud.io/hbuilderx.html)

HBuilderX是通用的前端開發(fā)工具操漠，但為`uni-app`做了特別強(qiáng)化收津。

下載App開發(fā)版，可開箱即用

安裝微信開發(fā)者工具 [下載地址](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

##### 利用HbuilderX初始化項(xiàng)目

+點(diǎn)擊HbuilderX菜單欄文件>項(xiàng)目>新建

+選擇uni-app,填寫項(xiàng)目名稱浊伙，項(xiàng)目創(chuàng)建的目錄

? ![](./images/create.jpg)

#####運(yùn)行項(xiàng)目

在菜單欄中點(diǎn)擊運(yùn)行撞秋，運(yùn)行到瀏覽器，選擇瀏覽器即可運(yùn)行

在微信開發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目嚣鄙，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開發(fā)者工具吻贿，即可在微信開發(fā)者工具里面體驗(yàn)uni-app

在微信開發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目霉猛，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到手機(jī)或模擬器 -> 選擇調(diào)式的手機(jī)

**注意：**

+如果是第一次使用涉波，需要先配置小程序ide的相關(guān)路徑岳枷，才能運(yùn)行成功

+微信開發(fā)者工具在設(shè)置中安全設(shè)置声滥，服務(wù)端口開啟

##### 介紹項(xiàng)目目錄和文件作用

`pages.json`文件用來對(duì) uni-app 進(jìn)行全局配置，決定頁面文件的路徑帐要、窗口樣式把敞、原生的導(dǎo)航欄、底部的原生tabbar 等

`manifest.json`文件是應(yīng)用的配置文件榨惠，用于指定應(yīng)用的名稱奋早、圖標(biāo)、權(quán)限等赠橙。

`App.vue`是我們的跟組件耽装，所有頁面都是在`App.vue`下進(jìn)行切換的，是頁面入口文件期揪，可以調(diào)用應(yīng)用的生命周期函數(shù)掉奄。

`main.js`是我們的項(xiàng)目入口文件，主要作用是初始化`vue`實(shí)例并使用需要的插件凤薛。

`uni.scss`文件的用途是為了方便整體控制應(yīng)用的風(fēng)格挥萌。比如按鈕顏色、邊框風(fēng)格枉侧，`uni.scss`文件里預(yù)置了一批scss變量預(yù)置。

```unpackage```就是打包目錄狂芋，在這里有各個(gè)平臺(tái)的打包文件

```pages```所有的頁面存放目錄

```static```靜態(tài)資源目錄榨馁，例如圖片等

```components``` 組件存放目錄

為了實(shí)現(xiàn)多端兼容，綜合考慮編譯速度帜矾、運(yùn)行性能等因素翼虫，`uni-app`約定了如下開發(fā)規(guī)范：

- 頁面文件遵循 [Vue 單文件組件 (SFC) 規(guī)范](https://vue-loader.vuejs.org/zh/spec.html)

- 組件標(biāo)簽靠近小程序規(guī)范，詳見[uni-app 組件規(guī)范](https://uniapp.dcloud.io/component/README)

-接口能力（JS API）靠近微信小程序規(guī)范屡萤，但需將前綴`wx`替換為`uni`珍剑，詳見[uni-app接口規(guī)范](https://uniapp.dcloud.io/api/README)

-數(shù)據(jù)綁定及事件處理同`Vue.js`規(guī)范，同時(shí)補(bǔ)充了App及頁面的生命周期

-為兼容多端運(yùn)行死陆，建議使用flex布局進(jìn)行開發(fā)

#### 全局配置和頁面配置

##### 通過globalStyle進(jìn)行全局配置

用于設(shè)置應(yīng)用的狀態(tài)欄招拙、導(dǎo)航條、標(biāo)題措译、窗口背景色等别凤。[詳細(xì)文檔](https://uniapp.dcloud.io/collocation/pages?id=globalstyle)

| 屬性? ? ? ? ? ? ? ? ? ? ? ? ? | 類型? ? ? | 默認(rèn)值? ? | 描述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| ---------------------------- | -------- | ------- | ---------------------------------------- |

| navigationBarBackgroundColor | HexColor | #F7F7F7 | 導(dǎo)航欄背景顏色（同狀態(tài)欄背景色）? ? ? ? ? ? ? ? ? ? ? ? |

| navigationBarTextStyle? ? ? | String? | white? | 導(dǎo)航欄標(biāo)題顏色及狀態(tài)欄前景顏色，僅支持 black/white? ? ? ? ? |

| navigationBarTitleText? ? ? | String? |? ? ? ? | 導(dǎo)航欄標(biāo)題文字內(nèi)容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| backgroundColor? ? ? ? ? ? ? | HexColor | #ffffff | 窗口的背景色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| backgroundTextStyle? ? ? ? ? | String? | dark? ? | 下拉 loading 的樣式领虹，僅支持 dark / light? ? ? ? ? |

| enablePullDownRefresh? ? ? ? | Boolean? | false? | 是否開啟下拉刷新规哪，詳見[頁面生命周期](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)。 |

| onReachBottomDistance? ? ? ? | Number? | 50? ? ? | 頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離塌衰，單位只支持px诉稍，詳見[頁面生命周期](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)|

##### 創(chuàng)建新的message頁面

右鍵pages新建message目錄蝠嘉，在message目錄下右鍵新建.vue文件,并選擇基本模板

```html

<template>

這是信息頁面

</template>

<script>

</script>

<style>

</style>

```

##### 通過pages來配置頁面

| 屬性? ? | 類型? ? | 默認(rèn)值? | 描述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| ----- | ------ | ---- | ---------------------------------------- |

| path? | String |? ? ? | 配置頁面路徑? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| style | Object |? ? ? | 配置頁面窗口表現(xiàn)，配置項(xiàng)參考[pageStyle](https://uniapp.dcloud.io/collocation/pages?id=style)|

pages數(shù)組數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁

```html

"pages": [ 杯巨、

{

"path":"pages/message/message"

},

{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "uni-app"

}

}

]

```

通過style修改頁面的標(biāo)題和導(dǎo)航欄背景色蚤告，并且設(shè)置h5下拉刷新的特有樣式

```js

"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages

{

"path":"pages/message/message",

"style": {

"navigationBarBackgroundColor": "#007AFF",

"navigationBarTextStyle": "white",

"enablePullDownRefresh": true,

"disableScroll": true,

"h5": {

"pullToRefresh": {

"color": "#007AFF"

}

}

}

}

]

```

##### 配置tabbar

如果應(yīng)用是一個(gè)多 tab 應(yīng)用舔箭，可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)罩缴，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁。

**Tips**

-當(dāng)設(shè)置 position 為 top 時(shí)层扶，將不會(huì)顯示 icon

-tabBar 中的 list 是一個(gè)數(shù)組箫章，只能配置最少2個(gè)、最多5個(gè) tab镜会，tab 按數(shù)組的順序排序檬寂。

**屬性說明：**

| 屬性? ? ? ? ? ? ? | 類型? ? ? | 必填? | 默認(rèn)值? ? | 描述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 平臺(tái)差異說明? ? ? ? ? ? |

| --------------- | -------- | ---- | ------ | ---------------------------------- | ------------------ |

| color? ? ? ? ? | HexColor | 是? ? |? ? ? ? | tab 上的文字默認(rèn)顏色? ? ? ? ? ? ? ? ? ? ? |? ? ? ? ? ? ? ? ? ? |

| selectedColor? | HexColor | 是? ? |? ? ? ? | tab 上的文字選中時(shí)的顏色? ? ? ? ? ? ? ? ? ? |? ? ? ? ? ? ? ? ? ? |

| backgroundColor | HexColor | 是? ? |? ? ? ? | tab 的背景色? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? ? ? ? ? ? ? |

| borderStyle? ? | String? | 否? ? | black? | tabbar 上邊框的顏色，僅支持 black/white? ? ? | App 2.3.4+ 支持其他顏色值 |

| list? ? ? ? ? ? | Array? ? | 是? ? |? ? ? ? | tab 的列表戳表，詳見 list 屬性說明桶至，最少2個(gè)、最多5個(gè) tab |? ? ? ? ? ? ? ? ? ? |

| position? ? ? ? | String? | 否? ? | bottom | 可選值 bottom匾旭、top? ? ? ? ? ? ? ? ? ? | top 值僅微信小程序支持? ? ? |

其中 list 接收一個(gè)數(shù)組镣屹，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象，其屬性值如下：

| 屬性? ? ? ? ? ? ? | 類型? ? | 必填? | 說明? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| ---------------- | ------ | ---- | ---------------------------------------- |

| pagePath? ? ? ? | String | 是? ? | 頁面路徑价涝，必須在 pages 中先定義? ? ? ? ? ? ? ? ? ? ? |

| text? ? ? ? ? ? | String | 是? ? | tab 上按鈕文字女蜈，在 5+APP 和 H5 平臺(tái)為非必填。例如中間可放一個(gè)沒有文字的+號(hào)圖標(biāo) |

| iconPath? ? ? ? | String | 否? ? | 圖片路徑色瘩，icon 大小限制為40kb伪窖，建議尺寸為 81px * 81px，當(dāng) postion 為 top 時(shí)居兆，此參數(shù)無效覆山，不支持網(wǎng)絡(luò)圖片，不支持字體圖標(biāo) |

| selectedIconPath | String | 否? ? | 選中時(shí)的圖片路徑泥栖，icon 大小限制為40kb簇宽，建議尺寸為 81px * 81px ，當(dāng) postion 為 top 時(shí)聊倔，此參數(shù)無效 |

案例代碼：

```js

"tabBar": {

"list": [

{

"text": "首頁",

"pagePath":"pages/index/index",

"iconPath":"static/tabs/home.png",

"selectedIconPath":"static/tabs/home-active.png"

},

{

"text": "信息",

"pagePath":"pages/message/message",

"iconPath":"static/tabs/message.png",

"selectedIconPath":"static/tabs/message-active.png"

},

{

"text": "我們",

"pagePath":"pages/contact/contact",

"iconPath":"static/tabs/contact.png",

"selectedIconPath":"static/tabs/contact-active.png"

}

]

}

```

##### condition啟動(dòng)模式配置

啟動(dòng)模式配置晦毙，僅開發(fā)期間生效，用于模擬直達(dá)頁面的場景耙蔑，如：小程序轉(zhuǎn)發(fā)后见妒，用戶點(diǎn)擊所打開的頁面。

**屬性說明：**

| 屬性? ? ? | 類型? ? | 是否必填 | 描述? ? ? ? ? ? ? ? |

| ------- | ------ | ---- | ------------------ |

| current | Number | 是? ? | 當(dāng)前激活的模式甸陌，list節(jié)點(diǎn)的索引值 |

| list? ? | Array? | 是? ? | 啟動(dòng)模式列表? ? ? ? ? ? |

**list說明：**

| 屬性? ? | 類型? ? | 是否必填 | 描述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| ----- | ------ | ---- | ---------------------------------------- |

| name? | String | 是? ? | 啟動(dòng)模式名稱? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| path? | String | 是? ? | 啟動(dòng)頁面路徑? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| query | String | 否? ? | 啟動(dòng)參數(shù)须揣，可在頁面的[onLoad](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f) 函數(shù)里獲得 |

#### 組件的基本使用

uni-app提供了豐富的基礎(chǔ)組件給開發(fā)者盐股，開發(fā)者可以像搭積木一樣，組合各種組件拼接稱自己的應(yīng)用

uni-app中的組件耻卡，就像`HTML`中的`div`疯汁、`p`、`span`等標(biāo)簽的作用一樣卵酪，用于搭建頁面的基礎(chǔ)結(jié)構(gòu)

##### text文本組件的用法

###### 001 - text 組件的屬性

|? ? 屬性? ? |? 類型? ? |? 默認(rèn)值? |? 必填? |? ? ? ? ? ? ? ? 說明? ? ? ? ? ? ? ? |

| :--------: | :-----: | :---: | :--: | :------------------------------: |

| selectable | boolean | false |? 否? |? ? ? ? ? ? ? 文本是否可選? ? ? ? ? ? ? |

|? space? ? | string? |? .? |? 否? | 顯示連續(xù)空格幌蚊，可選參數(shù)：`ensp`、`emsp`溃卡、`nbsp`|

|? decode? | boolean | false |? 否? |? ? ? ? ? ? ? 是否解碼? ? ? ? ? ? ? |

-`text`組件相當(dāng)于行內(nèi)標(biāo)簽溢豆、在同一行顯示

-除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無法長按選中

###### 002 - 代碼案例

```html

<view>


? 來了老弟

</view>

<view>


?

? ? 來了? 老弟


?

? ? 來了? 老弟


?

? ? 來了? 老弟


</view>

<view>

? skyblue

</view>

<view>


? ? < > & ' ? ?

</view>

```

##### view視圖容器組件的用法

> View 視圖容器， 類似于 HTML 中的 div

###### 001 - 組件的屬性

![](./images/2view.png)

###### 002 - 代碼案例

```html

<view class="box2" hover-class="box2_active">

?


</view>

```

##### button按鈕組件的用法

###### 001 - 組件的屬性

|? 屬性名? ? |? 類型? ? |? 默認(rèn)值? |? ? ? ? 說明? ? ? ? |

| :------: | :-----: | :-----: | :---------------: |

|? size? | String? | default |? ? ? 按鈕的大小? ? ? |

|? type? | String? | default |? ? ? 按鈕的樣式類型? ? ? |

|? plain? | Boolean |? false? |? 按鈕是否鏤空瘸羡，背景色透明? ? |

| disabled | Boolean |? false? |? ? ? 是否按鈕? ? ? ? |

| loading? | Boolean |? false? | 名稱是否帶 loading t圖標(biāo) |

-`button`組件默認(rèn)獨(dú)占一行漩仙，設(shè)置`size`為`mini`時(shí)可以在一行顯示多個(gè)

###### 002 - 案例代碼

```html

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

```

##### image組件的使用

###### [image](https://uniapp.dcloud.io/component/image?id=image)

圖片。

| 屬性名? | 類型? ? | 默認(rèn)值? ? ? ? ? | 說明? ? ? ? | 平臺(tái)差異說明 |

| ---- | ------ | ------------- | ---------- | ------ |

| src? | String |? ? ? ? ? ? ? | 圖片資源地址? ? |? ? ? ? |

| mode | String | 'scaleToFill' | 圖片裁剪犹赖、縮放的模式 |? ? ? ? |

**Tips**

-`<image>`組件默認(rèn)寬度 300px队他、高度 225px；

-`src`僅支持相對(duì)路徑峻村、絕對(duì)路徑麸折，支持 base64 碼；

-頁面結(jié)構(gòu)復(fù)雜粘昨，css樣式太多的情況磕谅，使用 image 可能導(dǎo)致樣式生效較慢，出現(xiàn) “閃一下” 的情況雾棺，此時(shí)設(shè)置`image{will-change: transform}`,可優(yōu)化此問題。

#### uni-app中的樣式

+rpx 即響應(yīng)式px衬浑，一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位捌浩。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度工秩。屏幕變寬尸饺，rpx 實(shí)際顯示效果會(huì)等比放大。

+使用`@import`語句可以導(dǎo)入外聯(lián)樣式表助币，`@import`后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑浪听，用`;`表示語句結(jié)束

+支持基本常用的選擇器class、id眉菱、element等

+在`uni-app`中不能使用`*`選擇器迹栓。

+`page`相當(dāng)于`body`節(jié)點(diǎn)

+定義在 App.vue 中的樣式為全局樣式，作用于每一個(gè)頁面俭缓。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式克伊，只作用在對(duì)應(yīng)的頁面酥郭，并會(huì)覆蓋 App.vue 中相同的選擇器。

+`uni-app`支持使用字體圖標(biāo)愿吹，使用方式與普通`web`項(xiàng)目相同不从，需要注意以下幾點(diǎn)：

? -字體文件小于 40kb，`uni-app`會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式犁跪；

? -字體文件大于等于 40kb椿息， 需開發(fā)者自己轉(zhuǎn)換，否則使用將不生效坷衍；

? -字體文件的引用路徑推薦使用以 ~@ 開頭的絕對(duì)路徑寝优。

? ? ```

?? ?@font-face {

?? ?? ? font-family: test1-icon;

?? ?? ? src: url('~@/static/iconfont.ttf');

?? ? }

? ? ```

+如何使用scss或者less

#### uni-app中的數(shù)據(jù)綁定

在頁面中需要定義數(shù)據(jù)，和我們之前的vue一摸一樣惫叛，直接在data中定義數(shù)據(jù)即可

```js

export default {

? data () {

? ? return {

? ? ? msg: 'hello-uni'

? ? }

? }

}

```

##### 插值表達(dá)式的使用

+利用插值表達(dá)式渲染基本數(shù)據(jù)

? ```html

? {{msg}}

? ```

+在插值表達(dá)式中使用三元運(yùn)算

? ```html

? {{ flag ? '我是真的':'我是假的' }}

? ```

+基本運(yùn)算

? ```html

? {{1+1}}

? ```

##### v-bind動(dòng)態(tài)綁定屬性

在data中定義了一張圖片倡勇，我們希望把這張圖片渲染到頁面上

```js

export default {

? data () {

? ? return {

? ? ? img: 'http://destiny001.gitee.io/image/monkey_02.jpg'

? ? }

? }

}

```

利用v-bind進(jìn)行渲染

```html

<image v-bind:src="img"></image>

```

還可以縮寫成:

```html

<image :src="img"></image>

```

##### v-for的使用

data中定以一個(gè)數(shù)組，最終將數(shù)組渲染到頁面上

```js

data () {

? return {

? ? arr: [

? ? ? { name: '劉能', age: 29 },

? ? ? { name: '趙四', age: 39 },

? ? ? { name: '宋小寶', age: 49 },

? ? ? { name: '小沈陽', age: 59 }

? ? ]

? }

}

```

利用v-for進(jìn)行循環(huán)

```js

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年齡：{{item.age}}</view>

```

#### uni中的事件

#####事件綁定

在uni中事件綁定和vue中是一樣的嘉涌，通過v-on進(jìn)行事件的綁定妻熊，也可以簡寫為@

```html

<button @click="tapHandle">點(diǎn)我啊</button>

```

事件函數(shù)定義在methods中

```js

methods: {

? tapHandle () {

? ? console.log('真的點(diǎn)我了')

? }

}

```

#####事件傳參

-默認(rèn)如果沒有傳遞參數(shù)，事件函數(shù)第一個(gè)形參為事件對(duì)象

? ```

? // template

? 點(diǎn)我啊

? // script

? methods: {

? ? tapHandle (e) {

? ? ? console.log(e)

? ? }

? }

? ```

-如果給事件函數(shù)傳遞參數(shù)了仑最，則對(duì)應(yīng)的事件函數(shù)形參接收的則是傳遞過來的數(shù)據(jù)

? ```

? // template

? 點(diǎn)我啊

? // script

? methods: {

? ? tapHandle (num) {

? ? ? console.log(num)

? ? }

? }

? ```

-如果獲取事件對(duì)象也想傳遞參數(shù)

? ```

? // template

? 點(diǎn)我啊

? // script

? methods: {

? ? tapHandle (num,e) {

? ? ? console.log(num,e)

? ? }

? }

? ```

#### uni的生命周期

##### 應(yīng)用的生命周期

生命周期的概念：一個(gè)對(duì)象從創(chuàng)建扔役、運(yùn)行、銷毀的整個(gè)過程被成為生命周期警医。

生命周期函數(shù)：在生命周期中每個(gè)階段會(huì)伴隨著每一個(gè)函數(shù)的觸發(fā)亿胸，這些函數(shù)被稱為生命周期函數(shù)

`uni-app`支持如下應(yīng)用生命周期函數(shù)：

| 函數(shù)名? ? ? | 說明? ? ? ? ? ? ? ? ? ? ? ? ? |

| -------- | ---------------------------- |

| onLaunch | 當(dāng)`uni-app`初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次） |

| onShow? | 當(dāng)`uni-app`啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示? ? |

| onHide? | 當(dāng)`uni-app`從前臺(tái)進(jìn)入后臺(tái)? ? ? ? ? |

| onError? | 當(dāng)`uni-app`報(bào)錯(cuò)時(shí)觸發(fā)? ? ? ? ? ? |

##### 頁面的生命周期

`uni-app`支持如下頁面生命周期函數(shù)：

| 函數(shù)名? ? ? | 說明? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 平臺(tái)差異說明 | 最低版本 |

| -------- | ---------------------------------------- | ------ | ---- |

| onLoad? | 監(jiān)聽頁面加載预皇，其參數(shù)為上個(gè)頁面?zhèn)鬟f的數(shù)據(jù)侈玄，參數(shù)類型為Object（用于頁面?zhèn)鲄ⅲ瑓⒖糩示例](https://uniapp.dcloud.io/api/router?id=navigateto)|? ? ? ? |? ? ? |

| onShow? | 監(jiān)聽頁面顯示吟温。頁面每次出現(xiàn)在屏幕上都觸發(fā)序仙，包括從下級(jí)頁面點(diǎn)返回露出當(dāng)前頁面? ? |? ? ? ? |? ? ? |

| onReady? | 監(jiān)聽頁面初次渲染完成。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? |? ? ? |

| onHide? | 監(jiān)聽頁面隱藏? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? |? ? ? |

| onUnload | 監(jiān)聽頁面卸載? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? |? ? ? |

####下拉刷新

##### 開啟下拉刷新

在uni-app中有兩種方式開啟下拉刷新

+ 需要在 `pages.json` 里鲁豪，找到的當(dāng)前頁面的pages節(jié)點(diǎn)潘悼，并在 `style` 選項(xiàng)中開啟 `enablePullDownRefresh`

+通過調(diào)用uni.startPullDownRefresh方法來開啟下拉刷新

###### 通過配置文件開啟

創(chuàng)建list頁面進(jìn)行演示

```html

<template>

杭州學(xué)科

{{item}}

</template>

<script>

export default {

data () {

return {

arr: ['前端','java','ui','大數(shù)據(jù)']

}

}

}

</script>

<style>

</style>

```

通過pages.json文件中找到當(dāng)前頁面的pages節(jié)點(diǎn)，并在`style`選項(xiàng)中開啟`enablePullDownRefresh`

```js

{

? "path":"pages/list/list",

? ? "style":{

? ? ? "enablePullDownRefresh": true

? ? }

}

```

###### 通過API開啟

[api文檔](https://uniapp.dcloud.io/api/ui/pulldown)

```html

uni.startPullDownRefresh()

```

##### 監(jiān)聽下拉刷新

通過onPullDownRefresh可以監(jiān)聽到下拉刷新的動(dòng)作

```js

export default {

? data () {

? ? return {

? ? ? arr: ['前端','java','ui','大數(shù)據(jù)']

? ? }

? },

? methods: {

? ? startPull () {

? ? ? uni.startPullDownRefresh()

? ? }

? },

? onPullDownRefresh () {

? ? console.log('觸發(fā)下拉刷新了')

? }

}

```

##### 關(guān)閉下拉刷新

uni.stopPullDownRefresh()

停止當(dāng)前頁面下拉刷新爬橡。

案例演示

```html

<template>

開啟下拉刷新

杭州學(xué)科

{{item}}

</template>

<script>

export default {

data () {

return {

arr: ['前端','java','ui','大數(shù)據(jù)']

}

},

methods: {

startPull () {

uni.startPullDownRefresh()

}

},

onPullDownRefresh () {

this.arr = []

setTimeout(()=> {

this.arr = ['前端','java','ui','大數(shù)據(jù)']

uni.stopPullDownRefresh()

}, 1000);

}

}

</script>

```

####上拉加載

通過在pages.json文件中找到當(dāng)前頁面的pages節(jié)點(diǎn)下style中配置onReachBottomDistance可以設(shè)置距離底部開啟加載的距離治唤，默認(rèn)為50px

通過onReachBottom監(jiān)聽到觸底的行為

```js

<template>

開啟下拉刷新

杭州學(xué)科

{{item}}

</template>

<script>

export default {

data () {

return {

arr: ['前端','java','ui','大數(shù)據(jù)','前端','java','ui','大數(shù)據(jù)']

}

},

onReachBottom () {

console.log('觸底了')

}

}

</script>

<style>

view{

height: 100px;

line-height: 100px;

}

</style>

```

####網(wǎng)絡(luò)請(qǐng)求

在uni中可以調(diào)用uni.request方法進(jìn)行請(qǐng)求網(wǎng)絡(luò)請(qǐng)求

需要注意的是：在小程序中網(wǎng)絡(luò)相關(guān)的 API 在使用前需要配置域名白名單。

**發(fā)送get請(qǐng)求**

```js

<template>

發(fā)送請(qǐng)求

</template>

<script>

export default {

methods: {

sendGet () {

uni.request({

url: 'http://localhost:8082/api/getlunbo',

success(res) {

console.log(res)

}

})

}

}

}

</script>

```

**發(fā)送post請(qǐng)求**

####數(shù)據(jù)緩存

##### **uni.setStorage**

[官方文檔](https://uniapp.dcloud.io/api/storage/storage?id=setstorage)

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

代碼演示

```js

<template>

存儲(chǔ)數(shù)據(jù)

</template>

<script>

export default {

methods: {

setStor () {

uni.setStorage({

key: 'id',

data: 100,

success () {

console.log('存儲(chǔ)成功')

}

})

}

}

}

</script>

<style>

</style>

```

##### uni.setStorageSync

將 data 存儲(chǔ)在本地緩存中指定的 key 中，會(huì)覆蓋掉原來該 key 對(duì)應(yīng)的內(nèi)容辞槐，這是一個(gè)同步接口掷漱。

代碼演示

```js

<template>

存儲(chǔ)數(shù)據(jù)

</template>

<script>

export default {

methods: {

setStor () {

uni.setStorageSync('id',100)

}

}

}

</script>

<style>

</style>

```

##### uni.getStorage

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

代碼演示

```html

<template>

獲取數(shù)據(jù)

</template>

<script>

export default {

data () {

return {

id: ''

}

},

methods: {

getStorage () {

uni.getStorage({

key: 'id',

success:? res=>{

this.id = res.data

}

})

}

}

}

</script>

```

##### uni.getStorageSync

從本地緩存中同步獲取指定 key 對(duì)應(yīng)的內(nèi)容榄檬。

代碼演示

```html

<template>

獲取數(shù)據(jù)

</template>

<script>

export default {

methods: {

getStorage () {

const id = uni.getStorageSync('id')

console.log(id)

}

}

}

</script>

```

##### uni.removeStorage

從本地緩存中異步移除指定 key卜范。

代碼演示

```html

<template>

刪除數(shù)據(jù)

</template>

<script>

export default {

methods: {

removeStorage () {

uni.removeStorage({

key: 'id',

success: function () {

console.log('刪除成功')

}

})

}

}

}

</script>

```

##### uni.removeStorageSync

從本地緩存中同步移除指定 key。

代碼演示

```html

<template>

刪除數(shù)據(jù)

</template>

<script>

export default {

methods: {

removeStorage () {

uni.removeStorageSync('id')

}

}

}

</script>

```

#### 上傳圖片鹿榜、預(yù)覽圖片

#####上傳圖片

uni.chooseImage方法從本地相冊(cè)選擇圖片或使用相機(jī)拍照海雪。

案例代碼

```html

<template>

上傳圖片

</template>

<script>

export default {

data () {

return {

imgArr: []

}

},

methods: {

chooseImg () {

uni.chooseImage({

count: 9,

success: res=>{

this.imgArr = res.tempFilePaths

}

})

}

}

}

</script>

```

#####預(yù)覽圖片

結(jié)構(gòu)

```html

<view>

</view>

```

預(yù)覽圖片的方法

```js

previewImg (current) {

? uni.previewImage({

? ? urls: this.imgArr,

? ? current

? })

}

```

#### 條件注釋實(shí)現(xiàn)跨段兼容

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋舱殿，將注釋里面的代碼編譯到不同平臺(tái)奥裸。

**寫法：**以 #ifdef 加平臺(tái)標(biāo)識(shí) 開頭，以 #endif 結(jié)尾沪袭。

平臺(tái)標(biāo)識(shí)

| 值? ? ? ? ? | 平臺(tái)? ? ? ? ? ? ? ? ? ? ? ? ? ? | 參考文檔? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| ---------- | ------------------------------ | ---------------------------------------- |

| APP-PLUS? | 5+App? ? ? ? ? ? ? ? ? ? ? ? ? |[HTML5+ 規(guī)范](http://www.html5plus.org/doc/)|

| H5? ? ? ? | H5? ? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| MP-WEIXIN? | 微信小程序? ? ? ? ? ? ? ? ? ? ? ? ? |[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/)|

| MP-ALIPAY? | 支付寶小程序? ? ? ? ? ? ? ? ? ? ? ? |[支付寶小程序](https://docs.alipay.com/mini/developer/getting-started)|

| MP-BAIDU? | 百度小程序? ? ? ? ? ? ? ? ? ? ? ? ? |[百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/) |

| MP-TOUTIAO | 頭條小程序? ? ? ? ? ? ? ? ? ? ? ? ? |[頭條小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/introduction) |

| MP-QQ? ? ? | QQ小程序? ? ? ? ? ? ? ? ? ? ? ? ? | （目前僅cli版支持）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| MP? ? ? ? | 微信小程序/支付寶小程序/百度小程序/頭條小程序/QQ小程序 |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

##### 組件的條件注釋

代碼演示

```html

<!-- #ifdef H5 -->

<view>

? h5頁面會(huì)顯示

</view>

<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->

<view>

? 微信小程序會(huì)顯示

</view>

<!-- #endif -->

<!-- #ifdef APP-PLUS -->

<view>

? app會(huì)顯示

</view>

<!-- #endif -->

```

##### api的條件注釋

代碼演示

```js

onLoad () {

? //#ifdef MP-WEIXIN

? console.log('微信小程序')

? //#endif

? //#ifdef H5

? console.log('h5頁面')

? //#endif

}

```

樣式的條件注釋

代碼演示

```css

/* #ifdef H5 */

view{

? height: 100px;

? line-height: 100px;

? background: red;

}

/* #endif */

/* #ifdef MP-WEIXIN */

view{

? height: 100px;

? line-height: 100px;

? background: green;

}

/* #endif */

```

#### uni中的導(dǎo)航跳轉(zhuǎn)

##### 利用navigator進(jìn)行跳轉(zhuǎn)

navigator詳細(xì)文檔：[文檔地址](https://uniapp.dcloud.io/component/navigator)

跳轉(zhuǎn)到普通頁面

```html

<navigator url="/pages/about/about" hover-class="navigator-hover">

? 跳轉(zhuǎn)到關(guān)于頁面

</navigator>

```

跳轉(zhuǎn)到tabbar頁面

```html

<navigator url="/pages/message/message" open-type="switchTab">

? 跳轉(zhuǎn)到message頁面

</navigator>

```

##### 利用編程式導(dǎo)航進(jìn)行跳轉(zhuǎn)

[導(dǎo)航跳轉(zhuǎn)文檔]( [uni.navigateTo](https://uniapp.dcloud.io/api/router?id=navigateto))

**利用navigateTo進(jìn)行導(dǎo)航跳轉(zhuǎn)**

保留當(dāng)前頁面湾宙，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用`uni.navigateBack`可以返回到原頁面冈绊。

```html

<button type="primary" @click="goAbout">跳轉(zhuǎn)到關(guān)于頁面</button>

```

通過navigateTo方法進(jìn)行跳轉(zhuǎn)到普通頁面

```js

goAbout () {

? uni.navigateTo({

? ? url: '/pages/about/about',

? })

}

```

**通過switchTab跳轉(zhuǎn)到tabbar頁面**

跳轉(zhuǎn)到tabbar頁面

```html

<button type="primary" @click="goMessage">跳轉(zhuǎn)到message頁面</button>

```

通過switchTab方法進(jìn)行跳轉(zhuǎn)

```js

goMessage () {

? uni.switchTab({

? ? url: '/pages/message/message'

? })

}

```

**redirectTo進(jìn)行跳轉(zhuǎn)**?

關(guān)閉當(dāng)前頁面侠鳄，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。

```html

<!-- template -->

<button type="primary" @click="goMessage">跳轉(zhuǎn)到message頁面</button>

<!-- js -->

goMessage () {

? uni.switchTab({

? ? url: '/pages/message/message'

? })

}

```

通過onUnload測試當(dāng)前組件確實(shí)卸載

```js

onUnload () {

? console.log('組件卸載了')

}

```

##### 導(dǎo)航跳轉(zhuǎn)傳遞參數(shù)

在導(dǎo)航進(jìn)行跳轉(zhuǎn)到下一個(gè)頁面的同時(shí)死宣，可以給下一個(gè)頁面?zhèn)鬟f相應(yīng)的參數(shù)伟恶，接收參數(shù)的頁面可以通過onLoad生命周期進(jìn)行接收

傳遞參數(shù)的頁面

```js

goAbout () {

? uni.navigateTo({

? ? url: '/pages/about/about?id=80',

? });

}

```

接收參數(shù)的頁面

```js

<script>

export default {

onLoad (options) {

console.log(options)

}

}

</script>

```

####?

#### uni-app中組件的創(chuàng)建

在uni-app中，可以通過創(chuàng)建一個(gè)后綴名為vue的文件毅该，即創(chuàng)建一個(gè)組件成功博秫，其他組件可以將該組件通過impot的方式導(dǎo)入，在通過components進(jìn)行注冊(cè)即可

+創(chuàng)建login組件眶掌，在component中創(chuàng)建login目錄挡育，然后新建login.vue文件

? ```

?

?

? 這是一個(gè)自定義組件



?


?


? ```

+在其他組件中導(dǎo)入該組件并注冊(cè)

? ```

? import login from "@/components/test/test.vue"

? ```

+注冊(cè)組件

? ```js

? components: {test}

? ```

+使用組件

? ```

?

? ```

##### 組件的生命周期函數(shù)

| beforeCreate? | 在實(shí)例初始化之后被調(diào)用。[詳見](https://cn.vuejs.org/v2/api/#beforeCreate)|? ? ? ? |? ? ? |

| ------------- | ---------------------------------------- | ------- | ---- |

| created? ? ? | 在實(shí)例創(chuàng)建完成后被立即調(diào)用朴爬。[詳見](https://cn.vuejs.org/v2/api/#created)|? ? ? ? |? ? ? |

| beforeMount? | 在掛載開始之前被調(diào)用静盅。[詳見](https://cn.vuejs.org/v2/api/#beforeMount)|? ? ? ? |? ? ? |

| mounted? ? ? | 掛載到實(shí)例上去之后調(diào)用。[詳見](https://cn.vuejs.org/v2/api/#mounted)注意：此處并不能確定子組件被全部掛載寝殴，如果需要子組件完全掛載之后在執(zhí)行操作可以使用`$nextTick`[Vue官方文檔](https://cn.vuejs.org/v2/api/#Vue-nextTick)|? ? ? ? |? ? ? |

| beforeUpdate? | 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前明垢。[詳見](https://cn.vuejs.org/v2/api/#beforeUpdate)| 僅H5平臺(tái)支持 |? ? ? |

| updated? ? ? | 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁蚣常，在這之后會(huì)調(diào)用該鉤子。[詳見](https://cn.vuejs.org/v2/api/#updated)| 僅H5平臺(tái)支持 |? ? ? |

| beforeDestroy | 實(shí)例銷毀之前調(diào)用痊银。在這一步抵蚊，實(shí)例仍然完全可用。[詳見](https://cn.vuejs.org/v2/api/#beforeDestroy)|? ? ? ? |? ? ? |

| destroyed? ? | Vue 實(shí)例銷毀后調(diào)用。調(diào)用后贞绳，Vue 實(shí)例指示的所有東西都會(huì)解綁定谷醉，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀冈闭。[詳見](https://cn.vuejs.org/v2/api/#destroyed)|? ? ? ? |? ? ? |

#### 組件的通訊

##### 父組件給子組件傳值

通過props來接受外界傳遞到組件內(nèi)部的值

```

<template>

這是一個(gè)自定義組件 {{msg}}

</template>

<script>

export default {

props: ['msg']

}

</script>

<style>

</style>

```

其他組件在使用login組件的時(shí)候傳遞值

```

<template>

</template>

<script>

import test from "@/components/test/test.vue"

export default {

data () {

return {

msg: 'hello'

}

},

components: {test}

}

</script>

```

##### 子組件給父組件傳值

通過$emit觸發(fā)事件進(jìn)行傳遞參數(shù)

```html

<template>

這是一個(gè)自定義組件 {{msg}}

給父組件傳值

</template>

<script>

export default {

data () {

return {

status: '打籃球'

}

},

props: {

msg: {

type: String,

value: ''

}

},

methods: {

sendMsg () {

this.$emit('myEvent',this.status)

}

}

}

</script>

```

父組件定義自定義事件并接收參數(shù)

```html

<template>

</template>

<script>

import test from "@/components/test/test.vue"

export default {

data () {

return {

msg: 'hello'

}

},

methods: {

getMsg (res) {

console.log(res)

}

},

components: {test}

}

</script>

```

##### 兄弟組件通訊

#### uni-ui的使用

[uni-ui文檔](https://uniapp.dcloud.io/component/README?id=uniui)

1俱尼、進(jìn)入Grid宮格組件

2、使用HBuilderX導(dǎo)入該組件

3萎攒、導(dǎo)入該組件

```html

import uniGrid from "@/components/uni-grid/uni-grid.vue"

import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

```

4遇八、注冊(cè)組件

```html

components: {uniGrid,uniGridItem}

```

5、使用組件

```html

<uni-grid :column="3">

?

? ? 文本


?

? ? 文本


?

? ? 文本


</uni-grid>

```

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末耍休，一起剝皮案震驚了整個(gè)濱河市刃永，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌羊精，老刑警劉巖斯够，帶你破解...
    沈念sama閱讀 216,997評(píng)論 6贊 502
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異喧锦，居然都是意外死亡读规，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門裸违，熙熙樓的掌柜王于貴愁眉苦臉地迎上來掖桦，“玉大人，你說我怎么就攤上這事供汛∏雇簦” “怎么了？”我有些...
    開封第一講書人閱讀 163,359評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵怔昨，是天一觀的道長雀久。 經(jīng)常有香客問我，道長趁舀，這世上最難降的妖魔是什么赖捌？ 我笑而不...
    開封第一講書人閱讀 58,309評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮矮烹，結(jié)果婚禮上越庇，老公的妹妹穿的比我還像新娘。我一直安慰自己奉狈，他們只是感情好卤唉，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評(píng)論 6贊 390
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著仁期，像睡著了一般桑驱。 火紅的嫁衣襯著肌膚如雪竭恬。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,258評(píng)論 1贊 300
  • 城市分裂傳說
    那天熬的，我揣著相機(jī)與錄音痊硕，去河邊找鬼。 笑死押框，一個(gè)胖子當(dāng)著我的面吹牛岔绸，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播强戴，決...
    沈念sama閱讀 40,122評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼亭螟，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼！你這毒婦竟也來了骑歹？” 一聲冷哼從身側(cè)響起预烙，我...
    開封第一講書人閱讀 38,970評(píng)論 0贊 275
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎道媚，沒想到半個(gè)月后扁掸，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,403評(píng)論 1贊 313
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡最域，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評(píng)論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年谴分，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镀脂。...
    茶點(diǎn)故事閱讀 39,769評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡牺蹄，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出薄翅，到底是詐尸還是另有隱情沙兰，我是刑警寧澤，帶...
    沈念sama閱讀 35,464評(píng)論 5贊 344
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布翘魄，位于F島的核電站鼎天，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏暑竟。R本人自食惡果不足惜斋射，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評(píng)論 3贊 327
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望但荤。 院中可真熱鬧罗岖，春花似錦、人聲如沸腹躁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽潜慎。三九已至捡多，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間铐炫，已是汗流浹背垒手。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留倒信，地道東北人科贬。 一個(gè)月前我還...
    沈念sama閱讀 47,831評(píng)論 2贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像鳖悠，于是被迫代替她去往敵國和親榜掌。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評(píng)論 2贊 354

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

  • uni-app框架介紹 介紹 uni-app 是一個(gè)跨端開發(fā)框架乘综，一套代碼運(yùn)行多個(gè)平臺(tái)憎账，并可以使用條件編譯實(shí)現(xiàn)不同...
    Jagtu閱讀 13,304評(píng)論 0贊 0
  • uni-app的基本使用 課程介紹： 基礎(chǔ)部分： 環(huán)境搭建 頁面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    Neo_duan閱讀 2,131評(píng)論 1贊 1
  • 目錄結(jié)構(gòu) 一個(gè)uni-app工程，默認(rèn)包含如下目錄及文件：┌─common 用于存放一些通用的 js...
    李霖弢閱讀 1,729評(píng)論 0贊 0
  • 1. uni-app 介紹 1.1 什么是uni-app https://uniapp.dcloud.io/REA...
    努力的瑩瑩閱讀 1,599評(píng)論 0贊 3
  • 前言 從2019年11月開始接觸uni-app卡辰，總結(jié)了一些使用體驗(yàn)與小結(jié)胞皱。希望可以幫助到大家，畢竟這個(gè)生態(tài)圈還是比...
    Swan_c閱讀 2,856評(píng)論 0贊 1