當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

uniapp 基础知识学习

發(fā)布時間：2023/12/14 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 uniapp 基础知识学习小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

uniapp 基礎(chǔ)知識學(xué)習(xí)

uniapp 基礎(chǔ)知識學(xué)習(xí)
- [uniapp 介紹](https://uniapp.dcloud.io/README)
- - 有哪些uni-app的作品
  - uni-app的社區(qū)規(guī)模
  - 為什么要去學(xué)習(xí)uni-app？
  - 快速體驗
  - 功能框架
  - 一套代碼，運行到多個平臺
- 環(huán)境搭建
- - 利用HbuilderX初始化項目
  - 運行項目
  - 介紹項目目錄和文件作用
- 發(fā)布uni-app
- - 打包為原生App
  - 發(fā)布為H5
  - 發(fā)布為小程序
- 通過 vue-cli命令行
- - 配置環(huán)境
  - 創(chuàng)建uni-app
  - - 自定義模板
    - 國內(nèi)特殊情況
    - 修改依賴為指定版本
  - 運行、發(fā)布uni-app
  - 運行并發(fā)布快應(yīng)用
  - - 運行并發(fā)布快應(yīng)用(webview)
    - 運行并發(fā)布快應(yīng)用(webview)-華為
  - 使用cli創(chuàng)建項目和使用HBuilderX可視化界面創(chuàng)建項目有什么區(qū)別
  - - 編譯器的區(qū)別
    - 開發(fā)工具的區(qū)別
- 框架簡介
- - 介紹項目目錄和文件作用
  - - 目錄結(jié)構(gòu)
    - 具體來講
  - 資源路徑說明
  - - 模板內(nèi)引入靜態(tài)資源
    - js文件引入
    - css引入靜態(tài)資源
- 全局配置和頁面配置
- - 通過globalStyle進行全局配置
  - 創(chuàng)建新的message頁面
  - - 寫入內(nèi)容
    - 通過pages來配置頁面
    - 配置tabbar
    - condition啟動模式配置
  - 組件的基本使用
  - - 視圖容器
    - - cover-image
      - 支持的格式
      - image
      - Tips
        mode 有效值：
      - cover-view
      - Bug & Tip
      - view
      - 示例代碼：
      - swiper
      - swiper-item
    - 基礎(chǔ)內(nèi)容
    - - icon
      - progress
      - rich-text
      - nodes
      - text文本組件的用法
      - text 組件的屬性
    - 表單組件
    - - button
      - checkbox-group
      - checkbox
      - form
      - input
      - textarea

uniapp 基礎(chǔ)知識學(xué)習(xí)

uniapp 介紹

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個平臺。uni-app也稱之為全端開發(fā)框架

DCloud公司擁有800萬開發(fā)者、數(shù)百萬應(yīng)用、12億手機端月活用戶、數(shù)千款uni-app插件、70+微信/qq群。阿里小程序工具官方內(nèi)置uni-app（詳見），騰訊課堂官方為uni-app錄制培訓(xùn)課程（詳見），開發(fā)者可以放心選擇。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發(fā)框架（詳見）、更好的App跨平臺框架、更方便的H5開發(fā)框架。不管領(lǐng)導(dǎo)安排什么樣的項目，你都可以快速交付，不需要轉(zhuǎn)換開發(fā)思維、不需要更改開發(fā)習(xí)慣。

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

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

有哪些uni-app的作品

uni-app的社區(qū)規(guī)模

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

uni-app在開發(fā)者數(shù)量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本等8大關(guān)鍵指標上擁有更強的優(yōu)勢。

相對開發(fā)者來說，減少了學(xué)習(xí)成本，因為只學(xué)會uni-app之后，即可開發(fā)出iOS、Android、H5、以及各種小程序的應(yīng)用，不需要再去學(xué)習(xí)開發(fā)其他應(yīng)用的框架，相對公司而言，也大大減少了開發(fā)成本。

快速體驗

一套代碼編到10個平臺，這不是夢想。眼見為實，掃描10個二維碼，親自體驗最全面的跨平臺效果！

注：

某些平臺不能提交簡單demo，故補充了一些其他功能；hello uni-app示例代碼可從github獲取
快應(yīng)用僅支持 vivo 、oppo、華為
360小程序僅 windows平臺支持，需要在360瀏覽器中打開

功能框架

從下面uni-app功能框架圖可看出，uni-app在跨平臺的過程中，不犧牲平臺特色，可優(yōu)雅的調(diào)用平臺專有能力，真正做到海納百川、各取所長。

一套代碼，運行到多個平臺

uni-app實現(xiàn)了一套代碼，同時運行到多個平臺；如下圖所示，一套代碼，同時運行到iOS模擬器、Android模擬器、H5、微信開發(fā)者工具、支付寶小程序Studio、百度開發(fā)者工具、字節(jié)跳動開發(fā)者工具、QQ開發(fā)者工具（底部8個終端選項卡代表8個終端模擬器）：

實際運行效果如下（點擊圖片可放大）：

環(huán)境搭建

安裝編輯器HbuilderX 下載地址

HBuilderX是通用的前端開發(fā)工具，但為uni-app做了特別強化。

下載App開發(fā)版，可開箱即用；如下載標準版，在運行或發(fā)行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。

如使用cli方式創(chuàng)建項目，可直接下載標準版，因為uni-app編譯插件被安裝到項目下了。

安裝微信開發(fā)者工具下載地址

利用HbuilderX初始化項目

點擊HbuilderX菜單欄文件>項目>新建
選擇uni-app,填寫項目名稱，項目創(chuàng)建的目錄

運行項目

在瀏覽器中運行：在菜單欄中點擊運行，運行到瀏覽器，選擇谷歌瀏覽器即可運行

真機運行：連接手機，開啟USB調(diào)試，進入hello-uniapp項目，點擊工具欄的運行 -> 真機運行 -> 選擇運行的設(shè)備，即可在該設(shè)備里面體驗uni-app。

如手機無法識別，請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。注意目前開發(fā)App也需要安裝微信開發(fā)者工具。

在微信開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發(fā)者工具，即可在微信開發(fā)者工具里面體驗uni-app

在微信開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到手機或模擬器 -> 選擇調(diào)式的手機

注意： 如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運行成功。如下圖，需在輸入框輸入微信開發(fā)者工具的安裝路徑。若HBuilderX不能正常啟動微信開發(fā)者工具，需要開發(fā)者手動啟動，然后將uni-app生成小程序工程的路徑拷貝到微信開發(fā)者工具里面，在HBuilderX里面開發(fā)，在微信開發(fā)者工具里面就可看到實時的效果。

uni-app默認把項目編譯到根目錄的unpackage目錄。

在支付寶小程序開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 支付寶小程序開發(fā)者工具，即可在支付寶小程序開發(fā)者工具里面體驗uni-app。

在百度開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 百度開發(fā)者工具，即可在百度開發(fā)者工具里面體驗uni-app。

在字節(jié)跳動開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 字節(jié)跳動開發(fā)者工具，即可在字節(jié)跳動開發(fā)者工具里面體驗uni-app。

在360開發(fā)工具中導(dǎo)入：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 360開發(fā)工具，即可在360開發(fā)工具里面體驗uni-app。

在快應(yīng)用聯(lián)盟工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 快應(yīng)用聯(lián)盟工具，即可在快應(yīng)用聯(lián)盟工具里面體驗uni-app。

在華為開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 華為開發(fā)者工具，即可在華為開發(fā)者工具里面體驗uni-app。

在QQ小程序開發(fā)工具里運行：內(nèi)容同上，不再重復(fù)。

注意：

微信開發(fā)者工具在設(shè)置中安全設(shè)置，服務(wù)端口開啟
如果是第一次使用，需要配置開發(fā)工具的相關(guān)路徑。點擊工具欄的運行 -> 運行到小程序模擬器 -> 運行設(shè)置，配置相應(yīng)小程序開發(fā)者工具的路徑。
支付寶/百度/字節(jié)跳動/360小程序工具，不支持直接指定項目啟動并運行。因此開發(fā)工具啟動后，請將 HBuilderX 控制臺中提示的項目路徑，在相應(yīng)小程序開發(fā)者工具中打開。
如果自動啟動小程序開發(fā)工具失敗，請手動啟動小程序開發(fā)工具并將 HBuilderX 控制臺提示的項目路徑，打開項目。

運行的快捷鍵是Ctrl+r。 HBuilderX 還提供了快捷運行菜單，可以按數(shù)字快速選擇要運行的設(shè)備：

如需調(diào)試，可參考：uni-app調(diào)試

介紹項目目錄和文件作用

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

manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標、權(quán)限等。

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

main.js是我們的項目入口文件，主要作用是初始化vue實例并使用需要的插件。

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

unpackage就是打包目錄，在這里有各個平臺的打包文件

pages所有的頁面存放目錄

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

components組件存放目錄

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

頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
組件標簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范
接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范
數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時補充了App及頁面的生命周期
為兼容多端運行，建議使用flex布局進行開發(fā)

發(fā)布uni-app

打包為原生App

在HBuilderX工具欄，點擊發(fā)行，選擇原生app-云端打包，如下圖：

出現(xiàn)如下界面，點擊打包即可。

云端打包支持安心打包，保護用戶隱私，不會上傳代碼和證書，通過差量包制作方式實現(xiàn)安心打包。詳見：https://ask.dcloud.net.cn/article/37979

云打包也支持cli模式，通過HBuilderX的cli方式（不是uni-app的cli），可以調(diào)用命令行打包，方便持續(xù)集成。詳見：https://hx.dcloud.net.cn/cli/pack

雖然安心打包已經(jīng)滿足需求，但如仍然希望自己使用 xcode 或 Android studio 進行離線打包，則在 HBuilderX 發(fā)行菜單里找到本地打包菜單，生成離線打包資源，然后參考離線打包文檔操作：https://nativesupport.dcloud.net.cn/AppDocs/README。

發(fā)布為H5

在

manifest.json

的可視化界面，進行如下配置（發(fā)行在網(wǎng)站根目錄可不配置應(yīng)用基本路徑），此時發(fā)行網(wǎng)站路徑是 www.xxx.com/h5，如：

https://hellouniapp.dcloud.net.cn

在HBuilderX工具欄，點擊發(fā)行，選擇網(wǎng)站-H5手機版，如下圖，點擊即可生成 H5 的相關(guān)資源文件，保存于 unpackage 目錄。

注意

history 模式發(fā)行需要后臺配置支持，詳見：history 模式的后端配置
打包部署后，在服務(wù)器上開啟 gzip 可以進一步壓縮文件。具體的配置，可以參考網(wǎng)上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

發(fā)布為小程序

發(fā)布為微信小程序：

申請微信小程序AppID，參考：微信教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “小程序-微信”，輸入小程序名稱和appid點擊發(fā)行即可在

unpackage/dist/build/mp-weixin

生成微信小程序項目代碼。

在微信小程序開發(fā)者工具中，導(dǎo)入生成的微信小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕，之后按照 “提交審核” => “發(fā)布” 小程序標準流程，逐步操作即可，詳細查看：微信官方教程。

發(fā)布為百度小程序：

入駐小程序并申請百度小程序AppID，參考：百度小程序教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “小程序-百度”，輸入小程序名稱和appid點擊發(fā)行即可在

/unpackage/dist/build/mp-baidu

生成百度小程序項目代碼。

在百度小程序開發(fā)者工具中，導(dǎo)入生成的百度小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，之后在百度小程序的管理中心選擇創(chuàng)建的應(yīng)用點擊前往發(fā)布，選擇對應(yīng)的版本然后提交審核。

發(fā)布為支付寶小程序：

入駐支付寶小程序，參考：支付寶小程序教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “小程序-支付寶”，即可在

/unpackage/dist/build/mp-alipay

生成支付寶小程序項目代碼。

在支付寶小程序開發(fā)者工具中，導(dǎo)入生成的支付寶小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，在支付寶小程序后臺，選擇剛提交的版本點擊提交審核，詳見：支付寶小程序文檔。

發(fā)布為字節(jié)跳動小程序：

入駐字節(jié)跳動小程序，參考：字節(jié)跳動小程序教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “小程序-字節(jié)跳動”，即可在

/unpackage/dist/build/mp-alipay

生成字節(jié)跳動小程序項目代碼。

在字節(jié)跳動小程序開發(fā)者工具中，導(dǎo)入生成的字節(jié)跳動小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，在字節(jié)跳動小程序后臺，選擇剛提交的版本點擊提交審核，詳見：字節(jié)跳動小程序文檔。

發(fā)布為360小程序：

入駐360小程序，參考：360小程序教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “小程序-360”，即可在

/unpackage/dist/build/mp-360

生成360小程序項目代碼。

在360瀏覽器中，導(dǎo)入生成的360小程序項目

注意

目前僅windows平臺支持。360瀏覽器自身不支持mac平臺。

發(fā)布為快應(yīng)用(webview)：

入駐快應(yīng)用(webview)，參考：快應(yīng)用(webview)教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “快應(yīng)用聯(lián)盟”，即可在

/unpackage/dist/build/quickapp-webview

生成快應(yīng)用(webview)項目代碼。

在快應(yīng)用聯(lián)盟工具中，導(dǎo)入生成的快應(yīng)用聯(lián)盟項目，測試項目代碼運行正常后，點擊”構(gòu)建“打包正式版，在快應(yīng)用聯(lián)盟后臺上傳

發(fā)布為快應(yīng)用(webview) - 華為：

入駐華為快應(yīng)用，參考：華為快應(yīng)用教程。

在HBuilderX中頂部菜單依次點擊 “發(fā)行” => “快應(yīng)用-華為”，即可在

/unpackage/dist/build/quickapp-webview

生成華為快應(yīng)用項目代碼。

在華為開發(fā)者工具中，導(dǎo)入生成的華為快應(yīng)用項目，測試項目代碼運行正常后，點擊”構(gòu)建“打包正式版，在華為快應(yīng)用后臺上傳

發(fā)布為QQ小程序： 內(nèi)容同上，不再重復(fù)。

發(fā)布的快捷鍵是Ctrl+u。同樣可拉下快速發(fā)布菜單并按數(shù)字鍵選擇。

通過 vue-cli命令行

配置環(huán)境

全局安裝 vue-cli

npm install -g @vue/cli

創(chuàng)建uni-app

使用正式版（對應(yīng)HBuilderX最新正式版）

vue create -p dcloudio/uni-preset-vue my-project

使用alpha版（對應(yīng)HBuilderX最新alpha版）

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

此時，會提示選擇項目模板，初次體驗建議選擇 hello uni-app 項目模板，如下所示：

自定義模板

選擇自定義模板時，需要填寫 uni-app 模板地址，這個地址其實就是托管在云端的倉庫地址。以 GitHub 為例，地址格式為 userName/repositoryName，如 dcloudio/uni-template-picture 就是下載圖片模板。

更多支持的下載方式，請參考這個插件的說明：download-git-repo

國內(nèi)特殊情況

模板項目存放于 Github，由于國內(nèi)網(wǎng)絡(luò)環(huán)境問題，可能下載失敗。針對此問題可以嘗試如下措施：

更換網(wǎng)絡(luò)重試，比如使用 4g 網(wǎng)絡(luò)
在設(shè)備或路由器的網(wǎng)絡(luò)設(shè)置中增加 DNS（如：8.8.8.8）
在設(shè)備中增加固定的 hosts（如：140.82.113.4 github.com）

修改依賴為指定版本

查看 HBuilderX 對應(yīng)的 NPM 依賴版本: 打開 NPM版本記錄，版本號 2.0.0- 后面是與 HBuilderX 對應(yīng)的版本號且小版本不會超過9，比如 HBuilderX 2.7.5.20200518 對應(yīng)的版本號 2.0.0-27520200518001，2.0.0-271420200618 對應(yīng)的為 2.0.0-27920200618002。

批量修改 package.json 中 uni 相關(guān)依賴為指定的版本號（去掉版本號前面 ^）。

對于有變化的依賴進行增刪，提示不存指定版本的依賴可以保留原始版本或者刪除，運行時提示缺少的依賴自行安裝。

運行、發(fā)布uni-app

npm run dev:%PLATFORM%npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值平臺

app-plus	app平臺生成打包資源（支持npm run build:app-plus，可用于持續(xù)集成。不支持run，運行調(diào)試仍需在HBuilderX中操作）
h5	H5
mp-alipay	支付寶小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字節(jié)跳動小程序
mp-qq	qq 小程序
mp-360	360 小程序
quickapp-webview	快應(yīng)用(webview)
quickapp-webview-union	快應(yīng)用聯(lián)盟
quickapp-webview-huawei	快應(yīng)用華為

可以自定義更多條件編譯平臺，比如釘釘小程序，參考package.json文檔。

運行并發(fā)布快應(yīng)用

快應(yīng)用有兩種開發(fā)方式，uni-app均支持：

類小程序webview渲染方式：https://ask.dcloud.net.cn/article/37182
原生渲染方式：https://ask.dcloud.net.cn/article/37145

運行并發(fā)布快應(yīng)用(webview)

HBuilderX 2.7.12+ 版支持

運行并發(fā)布快應(yīng)用(webview)-華為

HBuilderX 2.7.10+ 版支持

華為快應(yīng)用文檔-小程序轉(zhuǎn)快應(yīng)用 https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure

其他：

目前使用npm run build:app-plus會在/dist/build/app-plus下生成app打包資源。如需制作wgt包，將app-plus中的文件壓縮成zip（注意：不要包含app-plus目錄），再重命名為${appid}.wgt， appid為manifest.json文件中的appid。
dev 模式編譯出的各平臺代碼存放于根目錄下的 /dist/dev/目錄，打開各平臺開發(fā)工具選擇對應(yīng)平臺目錄即可進行預(yù)覽（h5 平臺不會在此目錄，存在于緩存中）；
build 模式編譯出的各平臺代碼存放于根目錄下的 /dist/build/ 目錄，發(fā)布時選擇此目錄進行發(fā)布；
dev 和 build 模式的區(qū)別：
dev 模式有 SourceMap 可以方便的進行斷點調(diào)試；
build 模式會將代碼進行壓縮，體積更小更適合發(fā)布為正式版應(yīng)用；
進行環(huán)境判斷時，dev 模式 process.env.NODE_ENV 的值為 development，build 模式 process.env.NODE_ENV 的值為 production。

使用cli創(chuàng)建項目和使用HBuilderX可視化界面創(chuàng)建項目有什么區(qū)別

編譯器的區(qū)別

cli 創(chuàng)建的項目，編譯器安裝在項目下。并且不會跟隨HBuilderX升級。如需升級編譯器，執(zhí)行 npm update，或者手動修改 package.json 中的 uni 相關(guān)依賴版本后執(zhí)行 npm install。更新后可能會有新增的依賴并不會自動安裝，手動安裝缺少的依賴即可。
HBuilderX可視化界面創(chuàng)建的項目，編譯器在HBuilderX的安裝目錄下的plugin目錄，隨著HBuilderX的升級會自動升級編譯器。
已經(jīng)使用cli創(chuàng)建的項目，如果想繼續(xù)在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整個項目拖入HBuilderX，則編譯時走的是項目下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。
cli版如果想安裝less、scss、ts等編譯器，需自己手動npm安裝。在HBuilderX的插件管理界面安裝無效，那個只作用于HBuilderX創(chuàng)建的項目。

開發(fā)工具的區(qū)別

cli創(chuàng)建的項目，內(nèi)置了d.ts，同其他常規(guī)npm庫一樣，可在vscode、webstorm等支持d.ts的開發(fā)工具里正常開發(fā)并有語法提示。
使用HBuilderX創(chuàng)建的項目不帶d.ts，HBuilderX內(nèi)置了uni-app語法提示庫。如需把HBuilderX創(chuàng)建的項目在其他編輯器打開并且補充d.ts，可以在項目下先執(zhí)行 npm init，然后npm i @types/uni-app -D，來補充d.ts。
但vscode等其他開發(fā)工具，在vue或uni-app領(lǐng)域，開發(fā)效率比不過HBuilderX。詳見：https://ask.dcloud.net.cn/article/35451
發(fā)布App時，仍然需要使用HBuilderX。其他開發(fā)工具無法發(fā)布App，但可以發(fā)布H5、各種小程序。如需開發(fā)App，可以先在HBuilderX里運行起來，然后在其他編輯器里修改保存代碼，代碼修改后會自動同步到手機基座。
如果使用cli創(chuàng)建項目，那下載HBuilderX時只需下載10M的標準版即可。因為編譯器已經(jīng)安裝到項目下了。

框架簡介

介紹項目目錄和文件作用

目錄結(jié)構(gòu)

一個uni-app工程，默認包含如下目錄及文件：

┌─uniCloud 云空間目錄，阿里云為uniCloud-aliyun,騰訊云為uniCloud-tcb（詳見uniCloud）│─components 符合vue組件規(guī)范的uni-app組件目錄│ └─comp-a.vue 可復(fù)用的a組件├─hybrid App端存放本地html文件的目錄，詳見├─platforms 存放各平臺專用頁面的目錄，詳見├─pages 業(yè)務(wù)頁面文件存放的目錄│ ├─index│ │ └─index.vue index頁面│ └─list│ └─list.vue list頁面├─static 存放應(yīng)用引用的本地靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此├─uni_modules 存放[uni_module](/uni_modules)規(guī)范的插件。├─wxcomponents 存放小程序組件的目錄，詳見├─main.js Vue初始化入口文件├─App.vue 應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽應(yīng)用生命周期├─manifest.json 配置應(yīng)用名稱、appid、logo、版本等打包信息，詳見└─pages.json 配置頁面路由、導(dǎo)航條、選項卡等頁面類信息，詳見

Tips

編譯到任意平臺時，static 目錄下的文件均會被完整打包進去，且不會編譯。非 static 目錄下的文件（vue、js、css 等）只有被引用到才會被打包編譯進去。
static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經(jīng)過轉(zhuǎn)換直接運行，在手機設(shè)備上會報錯。
css、less/scss 等資源不要放在 static 目錄下，建議這些公用的資源放在自建的 common 目錄下。
HbuilderX 1.9.0+ 支持在根目錄創(chuàng)建 ext.json、sitemap.json 等小程序需要的文件。

有效目錄說明

app-plus	App
h5	H5
mp-weixin	微信小程序
mp-alipay	支付寶小程序
mp-baidu	百度小程序

具體來講

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

manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標、權(quán)限等。

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

main.js是我們的項目入口文件，主要作用是初始化vue實例并使用需要的插件。

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

unpackage就是打包目錄，在這里有各個平臺的打包文件

pages所有的頁面存放目錄

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

components組件存放目錄

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

頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
組件標簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范
接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范
數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時補充了App及頁面的生命周期
為兼容多端運行，建議使用flex布局進行開發(fā)

資源路徑說明

模板內(nèi)引入靜態(tài)資源

template內(nèi)引入靜態(tài)資源，如image、video等標簽的src屬性時，可以使用相對路徑或者絕對路徑，形式如下

<image class="logo" src="/static/logo.png"></image><image class="logo" src="@/static/logo.png"></image><image class="logo" src="../../static/logo.png"></image>

注意

@開頭的絕對路徑以及相對路徑會經(jīng)過base64轉(zhuǎn)換規(guī)則校驗
引入的靜態(tài)資源在非h5平臺，均不轉(zhuǎn)為base64。
H5平臺，小于4kb的資源會被轉(zhuǎn)換成base64，其余不轉(zhuǎn)。
自HBuilderX 2.6.6起template內(nèi)支持@開頭路徑引入靜態(tài)資源，舊版本不支持此方式
App平臺自HBuilderX 2.6.9起template節(jié)點中引用靜態(tài)資源文件時（如：圖片），調(diào)整查找策略為【基于當前文件的路徑搜索】，與其他平臺保持一致
支付寶小程序組件內(nèi) image 標簽不可使用相對路徑

js文件引入

js文件或script標簽內(nèi)（包括renderjs等）引入js文件時，可以使用相對路徑和絕對路徑，形式如下

// 絕對路徑，@指向項目根目錄，在cli項目中@指向src目錄import add from '@/common/add.js'// 相對路徑import add from '../../common/add.js'

注意

js文件不支持使用/開頭的方式引入

css引入靜態(tài)資源

css文件或style標簽內(nèi)引入css文件時（scss、less文件同理），可以使用相對路徑或絕對路徑（HBuilderX 2.6.6）

/* 絕對路徑 */@import url('/common/uni.css');@import url('@/common/uni.css');/* 相對路徑 */@import url('../../common/uni.css');

注意

自HBuilderX 2.6.6起支持絕對路徑引入靜態(tài)資源，舊版本不支持此方式

css文件或style標簽內(nèi)引用的圖片路徑可以使用相對路徑也可以使用絕對路徑，需要注意的是，有些小程序端css文件不允許引用本地文件（請看注意事項）。

/* 絕對路徑 */background-image: url(/static/logo.png);background-image: url(@/static/logo.png);/* 相對路徑 */background-image: url(../../static/logo.png);

Tips

引入字體圖標請參考，字體圖標
@開頭的絕對路徑以及相對路徑會經(jīng)過base64轉(zhuǎn)換規(guī)則校驗
不支持本地圖片的平臺，小于40kb，一定會轉(zhuǎn)base64。（共四個平臺mp-weixin, mp-qq, mp-toutiao, app v2）
h5平臺，小于4kb會轉(zhuǎn)base64，超出4kb時不轉(zhuǎn)。
其余平臺不會轉(zhuǎn)base64

全局配置和頁面配置

通過globalStyle進行全局配置

用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標題、窗口背景色等。詳細文檔

屬性類型默認值描述

navigationBarBackgroundColor	HexColor	#F7F7F7	導(dǎo)航欄背景顏色（同狀態(tài)欄背景色）
navigationBarTextStyle	String	white	導(dǎo)航欄標題顏色及狀態(tài)欄前景顏色，僅支持 black/white
navigationBarTitleText	String		導(dǎo)航欄標題文字內(nèi)容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh	Boolean	false	是否開啟下拉刷新，詳見頁面生命周期。
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位只支持px，詳見頁面生命周期

在此注意，當我們給pages設(shè)置單獨樣式是，他會覆蓋掉全局樣式。例如：

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

在 pages 文件夾下創(chuàng)建 message 目錄，在message目錄下右鍵新建.vue文件,并選擇簡單模板

寫入內(nèi)容

<template> <view>hello-uni</view></template>

但我們會發(fā)現(xiàn)，在頁面上不會輸出我們所編寫的的內(nèi)容，這是因為我們的啟動頁不是此頁面，所以我們要在pages.json 文件中進行配置

通過pages來配置頁面

屬性類型默認值描述

path	String		配置頁面路徑
style	Object		配置頁面窗口表現(xiàn)，配置項參考 pageStyle

Tips：

pages節(jié)點的第一項為應(yīng)用入口頁（即首頁）
應(yīng)用中新增/減少頁面，都需要對 pages 數(shù)組進行修改
文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源

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

"pages": [ { "path": "pages/message/message" }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "猜猜我是誰" } } ],

配置頁面的獨有樣式

{ "path": "pages/message/message", "style":{ "navigationBarTitleText":"信息頁", "navigationBarBackgroundColor":"#000080", "h5":{ // 設(shè)置在 h5 頁面顯示的獨有樣式 "pullToRefresh":{ // 下拉刷新樣式 "color":"#2C405A" } } } },

style除了能設(shè)置 h5 頁面的獨有樣式之外，還可以設(shè)置別的，例如以下幾個：

屬性類型默認值描述平臺差異說明

app-plus	Object	設(shè)置編譯到 App 平臺的特定樣式，配置項參考下方 app-plus	App
h5	Object	設(shè)置編譯到 H5 平臺的特定樣式，配置項參考下方 H5	H5
mp-alipay	Object	設(shè)置編譯到 mp-alipay 平臺的特定樣式，配置項參考下方 MP-ALIPAY	支付寶小程序
mp-weixin	Object	設(shè)置編譯到 mp-weixin 平臺的特定樣式	微信小程序
mp-baidu	Object	設(shè)置編譯到 mp-baidu 平臺的特定樣式	百度小程序
mp-toutiao	Object	設(shè)置編譯到 mp-toutiao 平臺的特定樣式	字節(jié)跳動小程序
mp-qq	Object	設(shè)置編譯到 mp-qq 平臺的特定樣式	QQ小程序
usingComponents	Object	引用小程序組件，參考小程序組件	App、微信小程序、支付寶小程序、百度小程序

配置tabbar

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

Tips

當設(shè)置 position 為 top 時，將不會顯示 icon
tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。

屬性說明：

屬性類型必填默認值描述平臺差異說明

color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上邊框的顏色，僅支持 black/white	App 2.3.4+ 支持其他顏色值
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top	top 值僅微信小程序支持

其中 list 接收一個數(shù)組，數(shù)組中的每個項都是一個對象，其屬性值如下：

屬性類型必填說明

pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字，在 5+APP 和 H5 平臺為非必填。例如中間可放一個沒有文字的+號圖標
iconPath	String	否	圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數(shù)無效，不支持網(wǎng)絡(luò)圖片，不支持字體圖標
selectedIconPath	String	否	選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此參數(shù)無效

示例代碼：

"tabBar": { "color": "#8B8B7A", "selectedColor": "#8B6914", "backgroundColor": "#FFFFFF", "borderStyle": "white", "position": "top", "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" } ] },

注意：在創(chuàng)建 contact 頁面時我發(fā)現(xiàn)，我們不能使用微信小程序的方式，直接在配置文件中書寫，讓此創(chuàng)建，必須要在pages的文件中，手動創(chuàng)建目錄

condition啟動模式配置

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

屬性說明：

屬性類型是否必填描述

current	Number	是	當前激活的模式，list節(jié)點的索引值
list	Array	是	啟動模式列表

list說明：

屬性類型是否必填描述

name	String	是	啟動模式名稱
path	String	是	啟動頁面路徑
query	String	否	啟動參數(shù)，可在頁面的 onLoad 函數(shù)里獲得

案例說明：

創(chuàng)建詳情頁，當我們使用瀏覽器打開時，可以直接在地址欄中輸入地址即可打開，但是我們在小程序里卻不能這樣，我們要對他進行配置

在全局json文件中進行配置

"condition":{ "current":0, "list":[ { "name":"詳情頁", "path":"pages/detail/detail", "query":"id=80" } ] }

組件的基本使用

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

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

在此注意一點，uniapp 和 vue 一樣，我們必須有一個根組件，否則就會報錯

視圖容器

cover-image

基礎(chǔ)庫 1.4.0 開始支持，低版本需做兼容處理。

覆蓋在原生組件之上的圖片視圖。可覆蓋的原生組件同cover-view，支持嵌套在cover-view里。

屬性類型默認值必填說明最低版本

src	string	否	圖標路徑，支持臨時路徑、網(wǎng)絡(luò)地址（1.6.0起支持）、云文件ID（2.2.3起支持）。	1.4.0
bindload	eventhandle	否	圖片加載成功時觸發(fā)	2.1.0
binderror	eventhandle	否	圖片加載失敗時觸發(fā)	2.1.0

支持的格式

格式iOSAndroid

JPG	√	√
PNG	√	√
SVG	x	x
WEBP	√	√
GIF	√	√
BASE64	x	x

image

圖片。

屬性名類型默認值說明平臺差異說明

src	String		圖片資源地址
mode	String	‘scaleToFill’	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載。只針對page與scroll-view下的image有效	微信小程序、App、百度小程序、字節(jié)跳動小程序
fade-show	Boolean	true	圖片顯示動畫效果	僅App-nvue 2.3.4+ Android有效
webp	boolean	false	默認不解析 webP 格式，只支持網(wǎng)絡(luò)資源	微信小程序2.9.0
show-menu-by-longpress	boolean	false	開啟長按圖片顯示識別小程序碼菜單	微信小程序2.7.0
draggable	boolean	true	鼠標長按是否能拖動圖片	僅 H5 平臺 3.1.1+ 有效
@error	HandleEvent		當錯誤發(fā)生時，發(fā)布到 AppService 的事件名，事件對象event.detail = {errMsg: ‘something wrong’}
@load	HandleEvent		當圖片載入完畢時，發(fā)布到 AppService 的事件名，事件對象event.detail = {height:‘圖片高度px’, width:‘圖片寬度px’}

Tips

<image> 組件默認寬度 300px、高度 225px；app-nvue平臺，暫時默認為屏幕寬度
src 僅支持相對路徑、絕對路徑，支持 base64 碼；
頁面結(jié)構(gòu)復(fù)雜，css樣式太多的情況，使用 image 可能導(dǎo)致樣式生效較慢，出現(xiàn) “閃一下” 的情況，此時設(shè)置 image{will-change: transform} ,可優(yōu)化此問題。
自定義組件里面使用 <image>時，若 src 使用相對路徑可能出現(xiàn)路徑查找失敗的情況，故建議使用絕對路徑。
webp格式的圖片在Android上是內(nèi)置支持的。iOS上不同平臺不一樣，具體如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
svg 格式的圖片在不同的平臺支持情況不同。具體為：app-nvue 不支持 svg 格式的圖片，小程序上只支持網(wǎng)絡(luò)地址。

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

模式值說明

縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放	aspectFit	保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放	aspectFill	保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
縮放	widthFix	寬度不變，高度自動變化，保持原圖寬高比不變
縮放	heightFix	高度不變，寬度自動變化，保持原圖寬高比不變 App 和 H5 平臺 HBuilderX 2.9.3+ 支持、微信小程序需要基礎(chǔ)庫 2.10.3
裁剪	top	不縮放圖片，只顯示圖片的頂部區(qū)域
裁剪	bottom	不縮放圖片，只顯示圖片的底部區(qū)域
裁剪	center	不縮放圖片，只顯示圖片的中間區(qū)域
裁剪	left	不縮放圖片，只顯示圖片的左邊區(qū)域
裁剪	right	不縮放圖片，只顯示圖片的右邊區(qū)域
裁剪	top left	不縮放圖片，只顯示圖片的左上邊區(qū)域
裁剪	top right	不縮放圖片，只顯示圖片的右上邊區(qū)域
裁剪	bottom left	不縮放圖片，只顯示圖片的左下邊區(qū)域
裁剪	bottom right	不縮放圖片，只顯示圖片的右下邊區(qū)域

示例代碼：

<image src="http://destiny001.gitee.io/image/cxk.gif"></image>  <image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image>  <image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFill"></image>

cover-view

基礎(chǔ)庫 1.4.0 開始支持，低版本需做兼容處理。

覆蓋在原生組件之上的文本視圖。

可覆蓋的原生組件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。

屬性類型默認值必填說明最低版本

scroll-top

number/string

否

設(shè)置頂部滾動偏移量，僅在設(shè)置了 overflow-y: scroll 成為滾動元素后生效

2.1.0

Bug & Tip

tip: cover-view和cover-image的aria-role僅可設(shè)置為button，讀屏模式下才可以點擊，并朗讀出“按鈕”；為空時可以聚焦，但不可點擊

tip: 基礎(chǔ)庫 2.2.4 起支持 touch 相關(guān)事件，也可使用 hover-class 設(shè)置點擊態(tài)

tip: 基礎(chǔ)庫 2.1.0 起支持設(shè)置 scale rotate 的 css 樣式，包括 transition 動畫

tip: 基礎(chǔ)庫 1.9.90 起 cover-view 支持 overflow: scroll，但不支持動態(tài)更新 overflow

tip: 基礎(chǔ)庫 1.9.90 起最外層 cover-view 支持 position: fixed

tip: 基礎(chǔ)庫 1.9.0 起支持插在 view 等標簽下。在此之前只可嵌套在原生組件map、video、canvas、camera內(nèi)，避免嵌套在其他組件內(nèi)。

tip: 基礎(chǔ)庫 1.6.0 起支持css transition動畫，transition-property只支持transform (translateX, translateY)與opacity。

tip: 基礎(chǔ)庫 1.6.0 起支持css opacity。

tip: 事件模型遵循冒泡模型，但不會冒泡到原生組件。

tip: 文本建議都套上cover-view標簽，避免排版錯誤。

tip: 只支持基本的定位、布局、文本樣式。不支持設(shè)置單邊的border、background-image、shadow、overflow: visible等。

tip: 建議子節(jié)點不要溢出父節(jié)點

tip: 支持使用 z-index 控制層級

tip: 默認設(shè)置的樣式有：white-space: nowrap; line-height: 1.2; display: block;

bug: 自定義組件嵌套 cover-view 時，自定義組件的 slot 及其父節(jié)點暫不支持通過 wx:if 控制顯隱，否則會導(dǎo)致 cover-view 不顯示

view

視圖容器。

它類似于傳統(tǒng)html中的div，用于包裹各種元素內(nèi)容。

如果使用nvue，則需注意，包裹文字應(yīng)該使用組件。

屬性說明

屬性名類型默認值說明

hover-class	String	none	指定按下去的樣式類。當 hover-class=“none” 時，沒有點擊態(tài)效果
hover-stop-propagation	Boolean	false	指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)
hover-start-time	Number	50	按住后多久出現(xiàn)點擊態(tài)，單位毫秒
hover-stay-time	Number	400	手指松開后點擊態(tài)保留時間，單位毫秒

示例代碼：

<view class="box2" hover-class="box2-active">  <view class="box" hover-class="box-active">我是一個大盒子</view></view>

css:

.box{ width: 100px; height: 100px; background-color: #4CD964; } .box2{ width: 200px; height: 200px; background-color: #333333; } /* 按下的樣式 */ .box-active{ background-color: #007AFF; } .box2-active{ background-color: #DD524D; }

此時我們會發(fā)現(xiàn)，當我們按下子盒子時，我們的父盒子也會變色，這是因為他觸發(fā)了事件冒泡

這個時候我們只需要給父盒子加上 hover-stop-propagation 就不會出現(xiàn)此效果了

其他屬性演示：

在使用 hover-start-time 和hover-stay-time 時注意，人家要求是一數(shù)字形式，但是我們不能直接去掉雙引號，會報錯，我們只需要在屬性前面加個 : 即可

swiper

滑塊視圖容器。

一般用于左右滑動或上下滑動，比如banner輪播圖。

注意滑動切換和滾動的區(qū)別，滑動切換是一屏一屏的切換。swiper下的每個swiper-item是一個滑動切換區(qū)域，不能停留在2個滑動區(qū)域之間。

屬性說明

屬性名類型默認值說明平臺差異說明

indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
active-class	String		swiper-item 可見時的 class	支付寶小程序
changing-class	String		acceleration 設(shè)置為 {{true}} 時且處于滑動過程中，中間若干屏處于可見時的class	支付寶小程序
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index
current-item-id	String		當前所在滑塊的 item-id ，不能與 current 被同時指定	支付寶小程序不支持
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長	app-nvue不支持
circular	Boolean	false	是否采用銜接滑動，即播放到末尾后重新回到開頭
vertical	Boolean	false	滑動方向是否為縱向
previous-margin	String	0px	前邊距，可用于露出前一項的一小部分，接受 px 和 rpx 值	app-nvue、字節(jié)跳動小程序不支持
next-margin	String	0px	后邊距，可用于露出后一項的一小部分，接受 px 和 rpx 值	app-nvue、字節(jié)跳動小程序不支持
acceleration	Boolean	false	當開啟時，會根據(jù)滑動速度，連續(xù)滑動多屏	支付寶小程序
disable-programmatic-animation	Boolean	false	是否禁用代碼變動觸發(fā) swiper 切換時使用動畫。	支付寶小程序
display-multiple-items	Number	1	同時顯示的滑塊數(shù)量	app-nvue、支付寶小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳過未顯示的滑塊布局，設(shè)為 true 可優(yōu)化復(fù)雜情況下的滑動性能，但會丟失隱藏狀態(tài)滑塊的布局信息	App、微信小程序
disable-touch	Boolean	false	是否禁止用戶 touch 操作	App 2.5.5+、H5 2.5.5+、支付寶小程序、字節(jié)跳動小程序（只在初始化時有效，不能動態(tài)變更）
touchable	Boolean	true	是否監(jiān)聽用戶的觸摸事件，只在初始化時有效，不能動態(tài)變更	字節(jié)跳動小程序（uni-app 2.5.5+ 推薦統(tǒng)一使用 disable-touch）
easing-function	String	default	指定 swiper 切換緩動動畫類型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序
@change	EventHandle		current 改變時會觸發(fā) change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置發(fā)生改變時會觸發(fā) transition 事件，event.detail = {dx: dx, dy: dy}，支付寶小程序暫不支持dx, dy	App、H5、微信小程序、支付寶小程序、字節(jié)跳動小程序、QQ小程序
@animationfinish	EventHandle		動畫結(jié)束時會觸發(fā) animationfinish 事件，event.detail = {current: current, source: source}	字節(jié)跳動小程序不支持

change 事件返回 detail 中包含一個 source 字段，表示導(dǎo)致變更的原因，可能值如下：

autoplay 自動播放導(dǎo)致swiper變化。
touch 用戶劃動引起swiper變化。
其他原因?qū)⒂每兆址硎尽?/li>

swiper做左右拖動的長列表的專項問題

swiper是單頁組件，適合做banner圖輪播和簡單列表左右滑動。
因為性能問題，用swiper做復(fù)雜長列表，需要較高的優(yōu)化技巧以及接受一些限制。
這是一個范例，插件市場新聞模板示例，它在App端使用了nvue的原生渲染，實現(xiàn)高性能的左右拖動長列表；并支持可自定義的任何形式的下拉刷新。它在非App端使用的模式是只緩存左右一共3列的數(shù)據(jù)，dom中的數(shù)據(jù)過多時，它會自動釋放。就是說App上，只要看過這一頁，再進去時內(nèi)容是還在的。而在非App上，只能做到緩存3頁數(shù)據(jù)，其他頁即便看過，再進去也會重新加載。并且非App的這種情況下，不再提供下拉刷新。雖然插件市場也有其他前端模擬的下拉刷新，但性能不佳。一般小程序的大廠案例里，提供左右拖長列表的，都是這種做法。

Tips

如果 nvue 頁面 @animationfinish 事件不能返回正確的數(shù)據(jù)，可同時監(jiān)聽 @change 事件。
使用豎向滾動時，需要給 <scroll-view> 一個固定高度，通過 css 設(shè)置 height。
注意：其中只可放置 <swiper-item> 組件，否則會導(dǎo)致未定義的行為。
如果遇到current、current-item-id屬性設(shè)置不生效的問題參考：組件屬性設(shè)置不生效解決辦法
banner圖的切換效果和指示器的樣式，有多種風(fēng)格可自定義，可在uni-app插件市場搜索
如需banner管理后臺，參考uniCloud admin banner插件：https://ext.dcloud.net.cn/plugin?id=4117
swiper在App的vue中、百度支付寶頭條QQ小程序中，不支持內(nèi)嵌video、map等原生組件。在微信基礎(chǔ)庫2.4.4起和App nvue2.1.5起支持內(nèi)嵌原生組件。豎向的swiper內(nèi)嵌視頻可實現(xiàn)抖音、映客等視頻垂直拖動切換效果。
同時監(jiān)聽 change transition，開始滑動時觸發(fā)transition, 放開手后，在ios平臺觸發(fā)順序為 transition… change，Android/微信小程序/支付寶為 transition… change transition…

swiper-item

僅可放置在 <swiper> 組件中，寬高自動設(shè)置為100%。注意：寬高100%是相對于其父組件，不是相對于子組件，不能被子組件自動撐開。

屬性名類型默認值說明

item-id

String

該 swiper-item 的標識符

基礎(chǔ)內(nèi)容

icon

基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。

圖標。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。

屬性類型默認值必填說明最低版本

type	string		是	icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的顏色，同css的color	1.0.0

progress

基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。

進度條。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。

屬性類型默認值必填說明最低版本

percent	number		否	百分比0~100	1.0.0
show-info	boolean	false	否	在進度條右側(cè)顯示百分比	1.0.0
border-radius	number/string	0	否	圓角大小	2.3.1
font-size	number/string	16	否	右側(cè)百分比字體大小	2.3.1
stroke-width	number/string	6	否	進度條線的寬度	1.0.0
color	string	#09BB07	否	進度條顏色（請使用activeColor）	1.0.0
activeColor	string	#09BB07	否	已選擇的進度條的顏色	1.0.0
backgroundColor	string	#EBEBEB	否	未選擇的進度條的顏色	1.0.0
active	boolean	false	否	進度條從左往右的動畫	1.0.0
active-mode	string	backwards	否	backwards: 動畫從頭播；forwards：動畫從上次結(jié)束點接著播	1.7.0
duration	number	30	否	進度增加1%所需毫秒數(shù)	2.8.2
bindactiveend	eventhandle		否	動畫完成事件	2.4.1

案例代碼：

<progress :percent="pgList[0]" show-info stroke-width="3" /> <br> <progress :percent="pgList[2]" stroke-width="3" /> <br> <progress :percent="80" activeColor="#10AEFF" stroke-width="3" /> <br> <button @click="setProgress">設(shè)置進度</button> <button type="warn" @click="clearProgress">清除進度</button>

js部分

rich-text

富文本。

屬性說明

屬性名類型默認值說明平臺兼容

nodes	Array / String	[]	節(jié)點列表 / HTML String
space	string		顯示連續(xù)空格	微信基礎(chǔ)庫2.4.1+、QQ小程序
selectable	Boolean	false	富文本是否可以長按選中，可用于復(fù)制，粘貼等場景	百度小程序（真機）

注意

app-nvue 平臺 nodes 屬性只支持使用 Array 類型
支付寶小程序 nodes 屬性只支持使用 Array 類型。

如果需要支持 HTML String，則需要自己將 HTML String轉(zhuǎn)化為 nodes 數(shù)組，可使用 html-parser 轉(zhuǎn)換。

支持默認事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

nodes 屬性推薦使用 Array 類型，由于組件會將 String 類型轉(zhuǎn)換為 Array 類型，因而性能會有所下降。

nodes

現(xiàn)支持兩種節(jié)點，通過 type 來區(qū)分，分別是元素節(jié)點和文本節(jié)點，默認是元素節(jié)點，在富文本區(qū)域里顯示的 HTML 節(jié)點。

元素節(jié)點：type = node

屬性說明類型必填備注

name	標簽名	String	是	支持部分受信任的 HTML 節(jié)點
attrs	屬性	Object	否	支持部分受信任的屬性，遵循 Pascal 命名法
children	子節(jié)點列表	Array	否	結(jié)構(gòu)和 nodes 一致

文本節(jié)點：type = text

屬性說明類型必填備注

text

文本

String

是

支持 entities

text文本組件的用法

text 組件的屬性

屬性名類型默認值說明平臺差異說明

selectable	Boolean	false	文本是否可選	App、H5
user-select	Boolean	false	文本是否可選	微信小程序
space	String		顯示連續(xù)空格，可選參數(shù)：ensp、emsp、nbsp	App、H5、微信小程序
decode	Boolean	false	是否解碼	App、H5、微信小程序

space 值說明

值說明

ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根據(jù)字體設(shè)置的空格大小

Tips

text 組件相當于行內(nèi)標簽、在同一行顯示
<text> 組件內(nèi)只支持嵌套 <text>，不支持其它組件或自定義組件，否則會引發(fā)在不同平臺的渲染差異。
在app-nvue下，只有<text>才能包裹文本內(nèi)容。無法在<view>組件包裹文本。
decode 可以解析的有 < > & ' 。
各個操作系統(tǒng)的空格標準并不一致。
除了文本節(jié)點以外的其他節(jié)點都無法長按選中。
支持 \n 方式換行。
如果使用 <span> 組件編譯時會被轉(zhuǎn)換為 <text>。

舉例說明：

<template> <view>    <view> <view> <text space='ensp'>中文字符空格一半大小</text> </view> <view> <text space='emsp'>中文字符空格大小</text> </view> <view> <text space='nbsp' style="font-size: 100rpx;">根據(jù) 字體設(shè)置的空格大小</text> </view> </view> <view> <text>skyblue</text> </view>  <view> <text decode='true'>  < > & ' &ensp; &emsp;</text> </view> </view></template>

表單組件

button

按鈕。

屬性說明

屬性名類型默認值說明生效時機平臺差異說明

size	String	default	按鈕的大小
type	String	default	按鈕的樣式類型
plain	Boolean	false	按鈕是否鏤空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名稱前是否帶 loading 圖標		App-nvue 平臺，在 ios 上為雪花，Android上為圓圈
form-type	String		用于 <form> 組件，點擊分別會觸發(fā) <form> 組件的 submit/reset 事件
open-type	String		開放能力
hover-class	String	button-hover	指定按鈕按下去的樣式類。當 hover-class=“none” 時，沒有點擊態(tài)效果		App-nvue 平臺暫不支持
hover-start-time	Number	20	按住后多久出現(xiàn)點擊態(tài)，單位毫秒
hover-stay-time	Number	70	手指松開后點擊態(tài)保留時間，單位毫秒
app-parameter	String		打開 APP 時，向 APP 傳遞的參數(shù)，open-type=launchApp時有效		微信小程序、QQ小程序
hover-stop-propagation	boolean	false	指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)		微信小程序
lang	string	‘en’	指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文。		微信小程序
session-from	string		會話來源，open-type="contact"時有效		微信小程序
send-message-title	string	當前標題	會話內(nèi)消息卡片標題，open-type="contact"時有效		微信小程序
send-message-path	string	當前分享路徑	會話內(nèi)消息卡片點擊跳轉(zhuǎn)小程序路徑，open-type="contact"時有效		微信小程序
send-message-img	string	截圖	會話內(nèi)消息卡片圖片，open-type="contact"時有效		微信小程序
show-message-card	boolean	false	是否顯示會話內(nèi)消息卡片，設(shè)置此參數(shù)為 true，用戶進入客服會話會在右下角顯示"可能要發(fā)送的小程序"提示，用戶點擊后可以快速發(fā)送小程序消息，open-type="contact"時有效		微信小程序
@getphonenumber	Handler		獲取用戶手機號回調(diào)	open-type=“getPhoneNumber”	微信小程序
@getuserinfo	Handler		用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數(shù)的detail中獲取到的值同uni.getUserInfo	open-type=“getUserInfo”	微信小程序
@error	Handler		當使用開放能力時，發(fā)生錯誤的回調(diào)	open-type=“l(fā)aunchApp”	微信小程序
@opensetting	Handler		在打開授權(quán)設(shè)置頁并關(guān)閉后回調(diào)	open-type=“openSetting”	微信小程序
@launchapp	Handler		從小程序打開 App 成功的回調(diào)	open-type=“l(fā)aunchApp”	微信小程序

注1：button-hover 默認為 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
open-type="launchApp"時需要調(diào)起的APP接入微信OpenSDK詳見

size 有效值

值說明

default	默認大小
mini	小尺寸

type 有效值

值說明

primary	微信小程序、360小程序為綠色，App、H5、百度小程序、支付寶小程序、快應(yīng)用為藍色，字節(jié)跳動小程序為紅色，QQ小程序為淺藍色。如想在多端統(tǒng)一顏色，請改用default，然后自行寫樣式
default	白色
warn	紅色

form-type 有效值

值說明

submit	提交表單
reset	重置表單

open-type 有效值

值說明平臺差異說明

feedback	打開“意見反饋”頁面，用戶可提交反饋內(nèi)容并上傳日志	App、微信小程序、QQ小程序
share	觸發(fā)用戶轉(zhuǎn)發(fā)	微信小程序、百度小程序、支付寶小程序、字節(jié)跳動小程序、QQ小程序
getUserInfo	獲取用戶信息，可以從@getuserinfo回調(diào)中獲取到用戶信息，包括頭像、昵稱等信息	微信小程序、百度小程序、QQ小程序
contact	打開客服會話，如果用戶在會話中點擊消息卡片后返回應(yīng)用，可以從 @contact 回調(diào)中獲得具體信息	微信小程序、百度小程序
getPhoneNumber	獲取用戶手機號，可以從@getphonenumber回調(diào)中獲取到用戶信息	微信小程序、百度小程序、字節(jié)跳動小程序、支付寶小程序。App平臺另見一鍵登陸
launchApp	小程序中打開APP，可以通過app-parameter屬性設(shè)定向APP傳的參數(shù)	微信小程序、QQ小程序
openSetting	打開授權(quán)設(shè)置頁	微信小程序、百度小程序
getAuthorize	支持小程序授權(quán)	支付寶小程序
contactShare	分享到通訊錄好友	支付寶小程序
lifestyle	關(guān)注生活號	支付寶小程序
openGroupProfile	呼起QQ群資料卡頁面，可以通過group-id屬性設(shè)定需要打開的群資料卡的群號，同時manifest中必須配置groupIdList	QQ小程序基礎(chǔ)庫1.4.7版本+

button點擊

button 組件的點擊遵循 vue 標準的 @click事件。

button 組件沒有 url 屬性，如果要跳轉(zhuǎn)頁面，可以在@click中編寫，也可以在button組件外面套一層 navigator 組件。

<button>按鈕</button> <button size="mini">按鈕</button> <button type="primary">按鈕</button> <button type="primary" plain></button> <button type="primary" disabled></button> <button loading></button>

checkbox-group

多項選擇器，內(nèi)部由多個 checkbox 組成。

屬性說明

屬性名類型默認值說明

@change

EventHandle

<checkbox-group>中選中項發(fā)生改變是觸發(fā) change 事件，detail = {value:[選中的checkbox的value的數(shù)組]}

checkbox

多選項目。

屬性說明

屬性名類型默認值說明

value	String		<checkbox> 標識，選中時觸發(fā) <checkbox-group> 的 change 事件，并攜帶 <checkbox> 的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	當前是否選中，可用來設(shè)置默認選中
color	Color		checkbox的顏色，同css的color

form

表單，將組件內(nèi)的用戶輸入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

當點擊 <form> 表單中 formType 為 submit 的 <button> 組件時，會將表單組件中的 value 值進行提交，需要在表單組件中加上 name 來作為 key。

屬性說明

屬性名類型說明平臺差異說明

report-submit	Boolean	是否返回 formId 用于發(fā)送模板消息	微信小程序、支付寶小程序
report-submit-timeout	number	等待一段時間（毫秒數(shù)）以確認 formId 是否生效。如果未指定這個參數(shù)，formId 有很小的概率是無效的（如遇到網(wǎng)絡(luò)失敗的情況）。指定這個參數(shù)將可以檢測 formId 是否有效，以這個參數(shù)的時間作為這項檢測的超時時間。如果失敗，將返回 requestFormId:fail 開頭的 formId	微信小程序2.6.2
@submit	EventHandle	攜帶 form 中的數(shù)據(jù)觸發(fā) submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 為 true 時才會返回 formId
@reset	EventHandle	表單重置時會觸發(fā) reset 事件

input

輸入框。

屬性說明

屬性名類型默認值說明平臺差異說明

value	String		輸入框的初始內(nèi)容
type	String	text	input 的類型	H5 暫未支持動態(tài)切換請使用 v-if 進行整體切換
password	Boolean	false	是否是密碼類型	H5和App寫此屬性時，type失效
placeholder	String		輸入框為空時占位符
placeholder-style	String		指定 placeholder 的樣式
placeholder-class	String	“input-placeholder”	指定 placeholder 的樣式類，注意頁面或組件的style中寫了scoped時，需要在類名前寫/deep/
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大輸入長度，設(shè)置為 -1 的時候不限制最大長度
cursor-spacing	Number	0	指定光標與鍵盤的距離，單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離	App、微信小程序、百度小程序、QQ小程序
focus	Boolean	false	獲取焦點。	在 H5 平臺能否聚焦以及軟鍵盤是否跟隨彈出，取決于當前瀏覽器本身的實現(xiàn)。nvue 頁面不支持，需使用組件的 focus()、blur() 方法控制焦點
confirm-type	String	done	設(shè)置鍵盤右下角按鈕的文字，僅在 type=“text” 時生效。	微信小程序、App、H5
confirm-hold	Boolean	false	點擊鍵盤右下角按鈕時是否保持鍵盤不收起	App、微信小程序、支付寶小程序、百度小程序、QQ小程序
cursor	Number		指定focus時的光標位置
selection-start	Number	-1	光標起始位置，自動聚集時有效，需與selection-end搭配使用
selection-end	Number	-1	光標結(jié)束位置，自動聚集時有效，需與selection-start搭配使用
adjust-position	Boolean	true	鍵盤彈起時，是否自動上推頁面	App-Android（vue 頁面 softinputMode 為 adjustResize 時無效）、微信小程序、百度小程序、QQ小程序
hold-keyboard	boolean	false	focus時，點擊頁面的時候不收起鍵盤	微信小程序2.8.2
auto-blur	boolean	false	鍵盤收起時，是否自動失去焦點	App 3.0.0+
@input	EventHandle		當鍵盤輸入時，觸發(fā)input事件，event.detail = {value}	差異見下方 Tips
@focus	EventHandle		輸入框聚焦時觸發(fā)，event.detail = { value, height }，height 為鍵盤高度	僅微信小程序、App（2.2.3+）、QQ小程序支持 height
@blur	EventHandle		輸入框失去焦點時觸發(fā)，event.detail = {value: value}
@confirm	EventHandle		點擊完成按鈕時觸發(fā)，event.detail = {value: value}
@keyboardheightchange	eventhandle		鍵盤高度發(fā)生變化的時候觸發(fā)此事件，event.detail = {height: height, duration: duration}	微信小程序基礎(chǔ)庫2.7.0+、App 3.1.0+

Tips

input 事件處理函數(shù)可以直接 return 一個字符串，將替換輸入框的內(nèi)容。僅微信小程序支持。
如果遇到 value 屬性設(shè)置不生效的問題參考：組件屬性設(shè)置不生效解決辦法
input 組件上有默認的 min-height 樣式，如果 min-height 的值大于 height 的值那么 height 樣式無效。

type 有效值

值說明平臺差異說明

text	文本輸入鍵盤
number	數(shù)字輸入鍵盤	均支持，app-vue下可以輸入浮點數(shù)，app-nvue和小程序平臺下只能輸入整數(shù)。注意iOS上app-vue彈出的數(shù)字鍵盤并非9宮格方式
idcard	身份證輸入鍵盤	微信、支付寶、百度、QQ小程序
digit	帶小數(shù)點的數(shù)字鍵盤	App的nvue頁面、微信、支付寶、百度、頭條、QQ小程序

注意事項

原h(huán)tml規(guī)范中input不僅是輸入框，還有radio、checkbox、時間、日期、文件選擇功能。在uni-app和小程序規(guī)范中，input僅僅是輸入框。其他功能uni-app有單獨的組件或API：radio組件、checkbox組件、時間選擇、日期選擇、圖片選擇、視頻選擇、多媒體文件選擇(含圖片視頻)、通用文件選擇。
小程序平臺，number 類型只支持輸入整型數(shù)字。微信開發(fā)者工具上體現(xiàn)不出效果，請使用真機預(yù)覽。
如果需要在小程序平臺輸入浮點型數(shù)字，請使用 digit 類型。
小程序端input在置焦時，會表現(xiàn)為原生控件，此時會層級變高。如需前端組件遮蓋input，需讓input失焦，或使用cover-view等覆蓋原生控件的方案，參考。具體來講，阿里小程序的input為text且置焦為原生控件；微信、頭條、QQ所有input置焦均為原生控件；百度小程序置焦時仍然是非原生的。也可以參考原生控件文檔
input組件若不想彈出軟鍵盤，可設(shè)置為disable

confirm-type 有效值

值說明平臺差異說明

send	右下角按鈕為“發(fā)送”	微信、支付寶、百度小程序、app-nvue、app-vue和h5(2.9.9+，且要求設(shè)備webview內(nèi)核Chrome81+、Safari13.7+)
search	右下角按鈕為“搜索”
next	右下角按鈕為“下一個”	微信、支付寶、百度小程序、app-nvue、app-vue和h5(2.9.9+，且要求設(shè)備webview內(nèi)核Chrome81+、Safari13.7+)
go	右下角按鈕為“前往”
done	右下角按鈕為“完成”	微信、支付寶、百度小程序、app-nvue、app-vue和h5(2.9.9+，且要求設(shè)備webview內(nèi)核Chrome81+、Safari13.7+)

App平臺的nvue頁面，如果是weex編譯模式，需通過weex的api設(shè)置（weex模式已被淘汰）
App平臺的vue頁面及 H5平臺的彈出鍵盤使用的是瀏覽器控制的鍵盤，在Chrome81+、Safari13.7+之前，鍵盤右下角文字只能設(shè)置完成和搜索，從Chrome81+、Safari13.7+起支持設(shè)置發(fā)送、下一個。
App平臺涉及聊天的建議使用nvue，一方面因為app-vue控制鍵盤右下角按鍵文字為“發(fā)送”對webview內(nèi)核有要求，另一方面聊天記錄如使用sroll-view，過長的內(nèi)容在app-vue上會有性能問題。

textarea

多行輸入框。

屬性說明

屬性名類型默認值說明平臺差異說明

value	String		輸入框的內(nèi)容
placeholder	String		輸入框為空時占位符
placeholder-style	String		指定 placeholder 的樣式
placeholder-class	String	textarea-placeholder	指定 placeholder 的樣式類，注意頁面或組件的style中寫了scoped時，需要在類名前寫/deep/	字節(jié)跳動小程序不支持
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大輸入長度，設(shè)置為 -1 的時候不限制最大長度
focus	Boolean	false	獲取焦點	在 H5 平臺能否聚焦以及軟鍵盤是否跟隨彈出，取決于當前瀏覽器本身的實現(xiàn)。nvue 頁面不支持，需使用組件的 focus()、blur() 方法控制焦點
auto-height	Boolean	false	是否自動增高，設(shè)置auto-height時，style.height不生效
fixed	Boolean	false	如果 textarea 是在一個 position:fixed 的區(qū)域，需要顯示指定屬性 fixed 為 true	微信小程序、百度小程序、字節(jié)跳動小程序、QQ小程序
cursor-spacing	Number	0	指定光標與鍵盤的距離，單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離	App、微信小程序、百度小程序、字節(jié)跳動小程序、QQ小程序
cursor	Number		指定focus時的光標位置	微信小程序、App、H5、百度小程序、字節(jié)跳動小程序、QQ小程序
confirm-type	String	done	設(shè)置鍵盤右下角按鈕的文字	微信小程序基礎(chǔ)庫2.13.0+、App-vue和H5(2.9.9+，且要求設(shè)備webview內(nèi)核Chrome81+、Safari13.7+)
show-confirm-bar	Boolean	true	是否顯示鍵盤上方帶有”完成“按鈕那一欄	微信小程序、百度小程序、QQ小程序
selection-start	Number	-1	光標起始位置，自動聚焦時有效，需與selection-end搭配使用	微信小程序、App、H5、百度小程序、字節(jié)跳動小程序、QQ小程序
selection-end	Number	-1	光標結(jié)束位置，自動聚焦時有效，需與selection-start搭配使用	微信小程序、App、H5、百度小程序、字節(jié)跳動小程序、QQ小程序
adjust-position	Boolean	true	鍵盤彈起時，是否自動上推頁面	App-Android（softinputMode 為 adjustResize 時無效）、微信小程序、百度小程序、QQ小程序
disable-default-padding	boolean	false	是否去掉 iOS 下的默認內(nèi)邊距	微信小程序2.10.0
hold-keyboard	boolean	false	focus時，點擊頁面的時候不收起鍵盤	微信小程序2.8.2
auto-blur	boolean	false	鍵盤收起時，是否自動失去焦點	App 3.0.0+
@focus	EventHandle		輸入框聚焦時觸發(fā)，event.detail = { value, height }，height 為鍵盤高度	僅微信小程序、App（HBuilderX 2.0+ nvue uni-app模式）、QQ小程序支持 height
@blur	EventHandle		輸入框失去焦點時觸發(fā)，event.detail = {value, cursor}
@linechange	EventHandle		輸入框行數(shù)變化時調(diào)用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}	字節(jié)跳動小程序不支持,nvue ios暫不支持
@input	EventHandle		當鍵盤輸入時，觸發(fā) input 事件，event.detail = {value, cursor}， @input 處理函數(shù)的返回值并不會反映到 textarea 上
@confirm	EventHandle		點擊完成時，觸發(fā) confirm 事件，event.detail = {value: value}	微信小程序、百度小程序、QQ小程序
@keyboardheightchange	Eventhandle		鍵盤高度發(fā)生變化的時候觸發(fā)此事件，event.detail = {height: height, duration: duration}	微信小程序基礎(chǔ)庫2.7.0+、App 3.1.0+

confirm-type 有效值

值說明

send	右下角按鈕為“發(fā)送”
search	右下角按鈕為“搜索”
next	右下角按鈕為“下一個”
go	右下角按鈕為“前往”
done	右下角按鈕為“完成”

總結(jié)

以上是生活随笔為你收集整理的uniapp 基础知识学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：小知识 -- 显卡
下一篇： office被wps捆绑，wps删不干净

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

uniapp 基础知识学习

uniapp 基礎(chǔ)知識學(xué)習(xí)

uniapp 基礎(chǔ)知識學(xué)習(xí)

uniapp 介紹

有哪些uni-app的作品

uni-app的社區(qū)規(guī)模

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

快速體驗

功能框架

一套代碼，運行到多個平臺

環(huán)境搭建

利用HbuilderX初始化項目

運行項目

介紹項目目錄和文件作用

發(fā)布uni-app

打包為原生App

發(fā)布為H5

發(fā)布為小程序

通過 vue-cli命令行

配置環(huán)境

創(chuàng)建uni-app

自定義模板

國內(nèi)特殊情況

修改依賴為指定版本

運行、發(fā)布uni-app

運行并發(fā)布快應(yīng)用

運行并發(fā)布快應(yīng)用(webview)

運行并發(fā)布快應(yīng)用(webview)-華為

使用cli創(chuàng)建項目和使用HBuilderX可視化界面創(chuàng)建項目有什么區(qū)別

編譯器的區(qū)別

開發(fā)工具的區(qū)別

框架簡介

介紹項目目錄和文件作用

目錄結(jié)構(gòu)

具體來講

資源路徑說明

模板內(nèi)引入靜態(tài)資源

js文件引入

css引入靜態(tài)資源

全局配置和頁面配置

通過globalStyle進行全局配置

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

寫入內(nèi)容

通過pages來配置頁面

配置tabbar

condition啟動模式配置

組件的基本使用

視圖容器

cover-image

支持的格式

image

Tips

mode 有效值：

cover-view

Bug & Tip

view

示例代碼：

swiper

swiper-item

基礎(chǔ)內(nèi)容

icon

progress

rich-text

nodes

text文本組件的用法

text 組件的屬性

表單組件

button

checkbox-group

checkbox

form

input

textarea

總結(jié)