建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
創(chuàng)新互聯(lián)UNI-APP教程：uni-app 框架簡介
uni-app 使用 vue 的語法 + 小程序的標簽和 API。
創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比崇禮網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式崇禮網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋崇禮地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。
開發(fā)規(guī)范
為了實現多端兼容，綜合考慮編譯速度，運行性能等因素，uni-app 約定了如下開發(fā)規(guī)范：
- 頁面文件向導 Vue單文件組件（SFC）規(guī)范
- 組件標簽靠近小程序規(guī)范，詳見 uni-app 組件規(guī)范
- 互連能力（JS API）靠近微信小程序規(guī)范，但需要將 wx替換為 uni，詳見 uni-app 接口規(guī)范
- 數據綁定及事件處理同 Vue.js 規(guī)范，同時補充了 App 和頁面的生命周期
- 為兼容多端運行，建議使用 flex 布局進行開發(fā)
目錄結構
一個 uni-app 工程，默認包含如下目錄及文件：
┌─components uni-app組件目錄
│ └─comp-a.vue 可復用的a組件
├─hybrid 存放本地網頁的目錄，詳見
├─platforms 存放各平臺專用頁面的目錄，詳見
├─pages 業(yè)務頁面文件存放的目錄
│ ├─index
│ │ └─index.vue index頁面
│ └─list
│ └─list.vue list頁面
├─static 存放應用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─wxcomponents 存放小程序組件的目錄，詳見
├─main.js Vue初始化入口文件
├─App.vue 應用配置，用來配置App全局樣式以及監(jiān)聽 應用生命周期
├─manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見
└─pages.json 配置頁面路由、導航條、選項卡等頁面類信息，詳見
提示
- static 下目錄的 js 文件不會被 compile-，里面如果有 es6 的代碼，不經過轉換直接運行，在手機設備上會報錯。
- css，less/scss 等資源同樣不要放在 static 目錄下，建議這些公共的資源放在 common 目錄下。
- HbuilderX 1.9.0+ 支持在根目錄創(chuàng)建 ext.json sitemap.json 文件。
| 有效目錄 | 說明 |
|---|---|
| 應用程式加 | 應用程式 |
| mp-h5 | H5 |
| mp-weixin | 微信小程序 |
| mp-Alipay | 支付寶小程序 |
| mp-baidu | 百度小程序 |
資源路徑說明
模板內引用靜態(tài)資源
template 內引用靜態(tài)資源，如 image，video 等標簽的 src 屬性時，可以使用相對路徑或絕對路徑，形式如下
注意
- @初始的絕對路徑以及相對路徑會通過base64轉換規(guī)則校驗
- 引入的靜態(tài)資源在非 h5 平臺，均不轉為 base64。
- H5 平臺，小于 4kb 的資源會被轉換成 base64，其余不轉。
- 自 HBuilderX 2.6.6-alpha 起 template 內支持@初始路徑日期靜態(tài)資源，舊版本不支持此方式
js 文件引用
js 文件或 script 標簽內（包括renderjs等）日期 js 文件時，可以使用相對路徑和絕對路徑，形式如下
// 絕對路徑，@指向項目根目錄，在cli項目中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'注意
- js 文件不支持使用/開頭的方式引用
css發(fā)布靜態(tài)資源
css 文件或 style 標簽內引用 css 文件時（ scss，less 文件同理），只能使用相對路徑
/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');注意
- 自 HBuilderX 2.6.6-alpha 起支持絕對路徑日期靜態(tài)資源，舊版本不支持此方式
css 文件或 style 標簽內引用的圖片路徑可以使用相對路徑也可以使用絕對路徑，需要注意的是，有些小程序端css 文件可以引用本地文件（請看注意事項）。
/* 絕對路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */
background-image: url(../../static/logo.png);提示
- @初始的絕對路徑以及相對路徑會通過 base64 轉換規(guī)則校驗
- 不支持本地圖片的平臺，小于 40kb，一定會轉 base64。（共四個平臺 mp-weixin，mp-qq，mp-toutiao，app v2）
- h5 平臺，小于 4kb 會轉 base64，超過 4kb 時不轉。
- 其余平臺不會轉 base64
分享標題：創(chuàng)新互聯(lián)UNI-APP教程：uni-app 框架簡介
分享網址：http://www.dlmjj.cn/article/cddesjg.html
