目錄

什么是uniapp

為什么學uniapp

uni-app目錄結構

uniapp開發規范

pages.json頁面的基本配置

pages頁面配置

pages對象的屬性

globalStyle全局配置?

配置基本tabbar

tabbar的基本屬性

condition啟動模式配置

具體屬性

組件的基本使用

text文本組件

view組件

button組件

size屬性

type屬性

form-type屬性

image組件

mode屬性

uni-app中的樣式

scss嵌套css的使用

基本的數據綁定

uni-app中的事件

生命周期函數

應用的生命周期

頁面的生命周期函數

uni-app中的網絡請求

get請求

node.js搭建服務用于接收get請求

uni-app發送get請求

post請求

node.js搭建服務用于接收post請求

uni-app發送post請求

數據緩存

異步設置緩存

Object中參數說明

同步設置緩存

參數說明

圖片的上傳和預覽

從本地相冊選擇圖片或使用相機拍照

Object參數說明

預覽圖片

Object參數說明

條件編譯跨端兼容

跨平臺兼容

條件編譯

平臺標識

uniapp中的導航跳轉

聲明式跳轉

屬性值

編程式導航

保留當前頁面，跳轉到應用內的某個頁面

跳轉到tabBar頁面，并關閉其他所有的非tabBar頁面

關閉當前頁面，跳轉到應用內的某個頁面

組件的創建和使用

組件的生命周期

組件之間的通訊方式

父組件向子組件傳值

子組件從父組件接收值

子組件向父組件傳值

父組件從子組件接收值

兄弟組件之間的相互傳參

兄弟組件

父組件

uni-ui組件庫的基本使用

以日歷組件的使用為例

首先使用HbuilderX導入插件

然后就直接使用

什么是uniapp

含義：其是使用vue.js開發所有前端應用的框架，開發者編寫一套代碼，可以發布到ios、android、h5以及各種小程序（微信/支付寶/百度/頭條/qq/釘釘）等多個平臺

為什么學uniapp

• 一套代碼可以打包到不同的應用平臺
• 方便入手
• 豐富的生態環境

uni-app目錄結構

• pages：vue的組件頁面一般都放在這里
• static：存放靜態文件的地方
• unpackage：存放項目最終打包輸出的文件
• App.vue：用來配置vue的全局組件
• main.js：vue初始化的入口文件
• index.html：最終項目解析之后所生成的單文件項目
• uni.scss：定義公共的css樣式
• manifest.json：項目的配置入口
• pages.json：頁面以及全局外觀的配置

uniapp開發規范

• 頁面文件遵循vue的單文件組件
• 組件標簽靠近小程序規范
• 接口能力靠近微信小程序規范，但需要將前綴wx換為uni
• 數據綁定及事件處理遵循vue規范，同時補充了App及頁面的生命周期
• 為兼容多端運行，建議使用flex布局進行開發

pages.json頁面的基本配置

pages頁面配置

配置的vue組件一般都放在page目錄中，若要使該組件生效則需要將該vue組件的路徑path寫在pages.json內pages數組中（該數組內每一項都是一個對象），并且pages數組中第一項vue頁面表示應用的啟動頁；其中每個對象表示一個頁面的配置，多個對象之中用逗號相隔。

pages對象的屬性

globalStyle全局配置?

在pages.json內通過globalStyle屬性進行全局配置

作用：用于設置應用的狀態欄、導航條、標題、窗口背景色等。

注意：頁面配置內每個頁面的style配置會將全局配置覆蓋

配置基本tabbar

若一個應用是一個多tab應用，可以通過tabbar配置項指定tab欄的表現，以及tab切換時顯示的對應頁

tabbar的基本屬性

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

注意：

• 當設置的position為top時，將不會顯示icon
• tabBar中的list是一個數組，只能配置最少兩個、最多五個tab，tab按數組的順序排序
• tabbar的頁面展現過一次后就會保留在內存中，再次切換到該tabbar頁面。只會觸發頁面的onShow函數，不會再觸發onLoad函數
• pagePath為點擊后跳轉頁面的路徑

condition啟動模式配置

啟動模式配置僅在開發期間生效，模擬直達頁面的場景，如小程序轉發后用戶點擊所打開的頁面

具體屬性

list內的屬性

注意：list數組里面由多個對象組成，每個對象所具有的屬性如下

組件的基本使用

前言：uni-app為開發者提供了一系列基礎組件，類似html里的基礎標簽元素，雖然uni-app不推薦使用HTML標簽，但實際上若開發者寫了div等h5標簽，在編譯到非H5平臺時也會被編譯成view標簽，類似的還有span轉text、a轉navigator等，包括css里的選擇器也會轉；但為了管理方便，策略統一，新寫代碼時仍建議使用view等標簽

text文本組件

注意：

• text組件相當于行內標簽（span），在同一行顯示
• 除了文本節點以外的其他節點都無法長按選中
• ensp：中文空格一半大小；emsp：中文空格大小；nbsp：根據字體控制空格大小

view組件

前言：view屬性相當于HTML中的div標簽

button組件

屬性名	類型	默認值	說明
size	String	default	按鈕的大小
type	String	default	按鈕的樣式類型
plain	Boolean	false	按鈕背景色是否透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	是否帶loading圖標
hover-class	String	button-hover	指定按鈕按下去的樣式類，當屬性為none時沒有點擊效果
hover-start-time	Number	20	按住多久后出現點擊態單位ms
hover-stay-time	Number	20	手指松開后生態保存時間，單位ms
form-type	String		用于form標簽，點擊后分別觸發form組件的submit/reset事件

size屬性

• default：默認大小
• mini：小尺寸

type屬性

• primary：微信小程序為綠色，app、h5、百度小程序、支付寶小程序為藍色，頭條小程序為紅色，qq小程序為淺藍色
• default：白色
• warn：紅色

form-type屬性

• submit：提交表單事件
• reset：重置表單事件

image組件

mode屬性

注意：

• image組件默認寬度300px、高度225px
• src僅支持相對路徑、絕對路徑，支持base64編碼
• webp格式圖片、app-vue下，ios不支持，android支持；app-nvue下，ios和android均支持。

uni-app中的樣式

rpx：響應式px，一種根據屏幕寬度自適應的動態單位

理解：以750寬度的屏幕為基準，750rpx恰好為屏幕的寬度，屏幕變寬，那么rpx實際顯示效果也會等比放大?

使用@import語句可以導入外聯樣式表

語法：@import(url)

導入本頁面相同路徑下的add.css文件

<style>@import url("add.css"); </style>

注意：

• 在uniapp中支持基本的常用選擇器，如class、id、標簽名選擇器等，但是不能使用通配符*選擇器
• uniapp中的page標簽相當于body節點
• 定義在App.vue中的樣式為全局樣式，作用于每一個頁面。在pages目錄下的vue文件定義的樣式為局部樣式，只會作用于對應的頁面，并會覆蓋App.vue中的樣式

scss嵌套css的使用

<template><view class="box"><text>唱歌跳舞打籃球</text></view> </template> <script> </script> <style lang="scss">.box{width: 100px;height: 100px;background-color: aqua;text{background-color: red;}} </style>

注意：

• 使用時需要下載scss插件
• uni.scss中還定義了公共的樣式屬性，可以直接拿來使用（直接用屬性替換對應的顏色）

基本的數據綁定

<template><view><view>數據綁定的學習</view><!-- 插值表達式 --><view>{{msg}}</view><!-- 動態綁定屬性，v-bind也可以省略不寫 --><image v-bind:src="imgUrl"></image><!-- v-for綁定 --><view v-for="(item,index) in arr">序號：{{index}}&emsp;名字：{{item.name}}&emsp;年齡：{{item.age}}</view></view> </template> <script>export default{data(){return{msg:"hello world",imgUrl:"https://www.jd.com/favicon.ico",arr:[{name:"lili",age:18},{name:"lan",age:19}]}}} </script>

uni-app中的事件

<template><view><view>uni-app中的事件</view><!-- 點擊事件 --><button type="button" v-on:click="clickHandle('參數信息',$event)">點擊</button></view> </template> <script>export default{methods:{clickHandle(num,e){console.log("傳遞的參數為："+num+"\n事件對象為：",e)}}} </script>

生命周期函數

應用的生命周期

生命周期含義：一個對象從創建、運行、銷毀的整個過程被稱為生命周期

生命周期函數：生命周期中的每個階段都會伴隨著一個函數的觸發，這些函數被稱為生命周期函數

注意：應用的生命周期函數應該定義在App.vue內

<script>export default {onLaunch: function() {console.log('項目啟動了')},onShow: function() {console.log('程序進入前臺頁面')},onHide: function() {console.log('程序即將進入后臺')},onError:function(err){console.log("出現異常了",err)}} </script>

頁面的生命周期函數

onPullDownRefresh：監聽頁面下拉刷新狀態

onReachBottom：監聽頁面觸底的事件（前提頁面高度，高于屏幕高度-可滾動）

注意：

• 頁面的生命周期函數一般都定義在每個頁面組件內
• onLoad函數和onReady函數僅會觸發一次
• 關閉下拉刷新用uni.stopPullDownRefresh()方法，觸發下拉刷新用uni.startPullDownRefresh()函數
• 頁面觸底的事件中觸底距離可以在通過pages.json文件內設置onReachBottomDistance屬性來設置，默認為50

<script>export default{onLoad(options){console.log("頁面加載了，上一個頁面傳過來的參數為：",options)},onShow(){console.log("頁面出現了")},onReady(){console.log("頁面初次渲染完成")},onHide(){console.log("頁面隱藏了")},onUnload(){console.log("頁面卸載了")},onPullDownRefresh(){console.log("觸發了下拉刷新")/* 關閉下拉刷新 */uni.stopPullDownRefresh();}，onReachBottom(){console.log("頁面觸底了")}} </script>

uni-app中的網絡請求

語法：uni.request(object)

object對應的參數

參數名	類型	必填	默認值	說明
url	String	是		請求的url
data	Object/String/ArrayBuffer	否		請求的參數
header	Obhect	否		設置請求的請求頭
method	String	否	Get	請求方法
timeout	Number	否	30000	請求超時時間，單位ms
success	Function	否		調用成功后執行的回調函數
fail	Function	否		調用失敗后執行的回調函數
dataType	String	否	json	傳輸的數據格式
responseType	String	否	text	接受的數據格式

get請求

node.js搭建服務用于接收get請求

//引入http內置模塊 var http=require("http") //創建http服務 var server=http.createServer() server.on("request",(req,res)=>{//拼接并解析請求的urlconst myurl=new URL(req.url,"http://localhost:3000/")//獲取請求url的參數迭代器var b=myurl.searchParams//對該迭代器進行遍歷for (const [key,value] of b) {console.log(key,value);}//設置響應編碼格式res.setHeader("content-Type","text/html;charset=utf-8")//設置返回內容res.write("好吧，你已經成功了")res.end() }) server.listen(3000,()=>{console.log("server start") })

uni-app發送get請求

<template><view><button @click="get()">發送get請求</button></view> </template> <script>export default{methods:{get(){//發送get請求uni.request({url:"http://localhost:3000/?name=lili",method:"get",success(res){//打印接收到的返回值console.log("請求的返回值為："+res.data)}})}}} </script>

注意：res.data為接收到的返回值

post請求

node.js搭建服務用于接收post請求

//引入http內置模塊 var http=require("http") //創建http服務 var server=http.createServer() server.on("request",(req,res)=>{let data=""; //接收post請求傳遞的參數req.on("data",chunk=>{data+=chunk})req.on("end",()=>{console.log(data);})//設置響應編碼格式res.setHeader("content-Type","text/html;charset=utf-8")//設置返回內容res.write("好吧，你已經成功了")res.end() }) server.listen(3000,()=>{console.log("server start") })

uni-app發送post請求

<template><view><button @click="post()">發送post請求</button></view> </template> <script>export default{methods:{post(){//發送post請求uni.request({url:"http://localhost:3000",method:"post",data:{"name":"lili","age":23},success(res){//打印接收到的返回值console.log("請求的返回值為："+res.data)},fail(err){//打印失敗信息console.log("您失敗了：",err)}})}}} </script>

數據緩存

異步設置緩存

在本地儲存中設置數據：uni.setStorage(Object)

在本地儲存中獲取數據：uni.getStorage(Object)

在本地儲存中移除數據：uni.removeStorage(Object)

理解：將數據存儲在本地緩存中指定的key中，會覆蓋掉原來key的內容，但是以上的接口為異步接口

Object中參數說明

<template><view><button type="primary" @click="setStorage()">存儲數據</button><button type="primary" @click="getStorage('id')">獲取數據</button><button type="primary" @click="removeStorage('id')">移除數據</button></view> </template> <script>export default{methods:{setStorage(){//向本地存數據uni.setStorage({key:"id",data:80,success(){console.log("存儲成功！")}})},getStorage(data){//從本地獲取數據uni.getStorage({key:data,success(res){console.log("獲取到的數據為："+res.data)}})},removeStorage(data){//從本地移除數據uni.removeStorage({key:data,success(res){console.log("移除數據成功！",res)}})}}} </script>

同步設置緩存

同步設置緩存：uni.setStorageSync(key,data)

同步獲取緩存：uni.getStorageSync(key)

同步移除緩存：uni.removeStorageSync(key)

參數說明

<template><view><button type="primary" @click="setStorageSync('id',23)">同步存儲數據</button><button type="primary" @click="getStorageSync('id')">同步獲取數據</button><button type="primary" @click="removeStorageSync('id')">同步移除數據</button></view> </template> <script>export default{methods:{setStorageSync(key,data){uni.setStorageSync(key,data);},getStorageSync(key){const res=uni.getStorageSync(key)console.log("獲取到的數據為："+res)},removeStorageSync(key){uni.removeStorageSync(key)}}} </script>

圖片的上傳和預覽

從本地相冊選擇圖片或使用相機拍照

方法：uni.chooseImage(Object)

Object參數說明

預覽圖片

方法：uni.previewImage(Object)

Object參數說明

注意：上面的current代表的是當前的圖片的路徑

<template><view><button type="primary" @click="chooseImg()">上傳圖片</button><!-- 預覽圖片 --><image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image></view> </template> <script>export default{data() {return{imgArr:[]}},methods:{chooseImg(){uni.chooseImage({count:5,success:res=>{this.imgArr=res.tempFilePaths}})},previewImg(data){uni.previewImage({current:data,urls:this.imgArr,loop:true,indicator:"number"})}}} </script>

條件編譯跨端兼容

跨平臺兼容

含義：uni-app已經將常用的組件，js API封裝到框架中，開發者按照uni-app規范開發即刻保證多平臺兼容，大部分業務均可直接滿足，但是每個平臺都有自己的一些特性，因此會存在著一些無法跨平臺的情況

條件編譯

含義：條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺

語法：#ifdef 平臺標識 …… #endif

平臺標識

<template><view><!-- #ifdef H5 --><view>我希望在H5頁面中看見</view><!-- #endif --><!-- #ifdef MP-WEIXIN --><view>我希望在微信小程序頁面中看見</view><!-- #endif --></view> </template> <script>export default{methods:{onLoad(){//#ifdef H5console.log("我希望在H5內中打印")//#endif//#ifdef MP-WEIXINconsole.log("我希望在微信小程序內中打印")//#endif}}} </script> <style>/* H5中的樣式 *//* #ifdef H5 */view{color: red;}/* #endif *//* 微信小程序的樣式 *//* #ifdef MP-WEIXIN */view{color: blue;}/* #endif */ </style>

注意：條件編譯要寫在注釋里面

uniapp中的導航跳轉

聲明式跳轉

組件：navigator

屬性值

open-type的有效值

編程式導航

保留當前頁面，跳轉到應用內的某個頁面

語法：uni.navigateTo(object)

object參數說明

跳轉到tabBar頁面，并關閉其他所有的非tabBar頁面

語法：uni.switchTab(object)

object參數說明

關閉當前頁面，跳轉到應用內的某個頁面

語法：uni.redirectTo(object)

object屬性

<template><view><view>聲明式導航的學習</view><navigator url="/pages/detail/detail">跳轉到詳情頁</navigator><!-- 因為這里的信息頁為tabBar頁面 --><navigator url="/pages/message/message" open-type="switchTab">跳轉到信息頁</navigator><view>編程式導航的學習</view><button @click="goDetail()">跳轉至詳情頁</button><button @click="goMessage()">跳轉至信息頁</button></view> </template> <script>export default{methods:{goDetail(){uni.navigateTo({url:"/pages/detail/detail"})},goMessage(){uni.switchTab({url:"/pages/message/message"})}}} </script>

注意：導航過程中也可以進行頁面的傳參，通過？和&拼接的形式，若取得上個頁面傳過來的參數則需要頁面生命周期onLoad函數。

組件的創建和使用

前言：在uni-app中，可以通過創建一個后綴名為vue的文件，即創建一個組件成功，其他組件可以將該組件通過import的方式導入，再通過components進行注冊即可

<template><view><view>使用組件工具類</view><!-- 使用組件 --><partName></partName></view> </template> <script>//引入組件import Part from "../../components/test.vue"//注冊組件export default{components:{partName:Part}} </script>

組件的生命周期

組件之間的通訊方式

父組件向子組件傳值

<template><view><view>我是父組件</view><!-- 父組件向子組件傳遞title值 --><child :title="title"></child></view> </template> <script>import child from "../../components/child.vue"export default{data(){return{title:"hello uniapp"}},components:{child:child}} </script>

子組件從父組件接收值

<template><view><view>我是子組件</view><view>title的值為{{title}}</view> </view> </template> <script>export default{//子組件接收父組件傳遞過來的titleprops:['title']} </script>

子組件向父組件傳值

<template><view><view>我是子組件</view><button @click="sendNum()">給父組件傳值</button></view> </template> <script>export default{data(){return{num:6}},methods:{sendNum(){//第一個參數傳自定義事件名稱，第二個參數傳請求參數this.$emit('myEvent',this.num)}}} </script>

父組件從子組件接收值

<template><view><view>我是父組件</view><child @myEvent="getNum"></child></view> </template> <script>import child from "../../components/child.vue"export default{methods:{//num用于接收觸發了事件傳過來的值getNum(num){console.log("子組件傳過來的值為："+num)}},components:{child:child}} </script>

兄弟組件之間的相互傳參

兄弟組件

<template><view><view>我是兄弟組件1</view><button @click="addNum()">修改組件2中的數據</button></view> </template> <script>export default{methods:{addNum(){//觸發全局事件uni.$emit("updateNum",10)}}} </script> <template><view><view>我是兄弟組件2</view><view>組件2內num的值為{{num}}</view></view> </template> <script>export default{data(){return{num:0}},created() {//監聽全局事件uni.$on("updateNum",(num)=>{this.num+=num})}} </script>

父組件

<template><view><view>我是父組件</view><part1></part1><part2></part2></view> </template> <script>import part1 from "../../components/student1.vue"import part2 from "../../components/student2.vue"export default{components:{part1,part2}} </script>

uni-ui組件庫的基本使用

含義：uni-ui是DCloud提供的一個跨端ui庫，他是基于vue組件的，flex布局的，無dom的全端ui庫

網址：https://ext.dcloud.net.cn/

以日歷組件的使用為例

首先使用HbuilderX導入插件

然后就直接使用

<template><view><view>uni-ui組件庫</view><uni-calendar:insert="true":lunar="true":start-data="'2019-3-2'":end-data="'2019-5-20'"@change="change"></uni-calendar></view> </template> <script>export default{methods:{change(e){console.log("觸發了change函數",e)}},} </script>

總結

以上是生活随笔為你收集整理的uni-app框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。