1 uni-app學(xué)習(xí)
1.1 什么是uni-app
uni-app是一個使用Vue.js語法來開發(fā)所有前端應(yīng)用的框架（也稱之為全端開發(fā)框架）
技術(shù)棧：JavaScript辆毡，vue揩抡， 微信小程序唆鸡， uni-app
1.2 有哪些uni-app的作品
image
1.3. uni-app的社區(qū)規(guī)模
image
2 uni-app基礎(chǔ)
2.1 如何創(chuàng)建項目
腳手架搭建項目
1.全局安裝
npm install -g @vue/cli
2.創(chuàng)建項目
vue create -p dcloudio/uni-preset-vue my-project
3.啟動項目（微信小程序）
npm run dev:mp-weixin
4.微信小程序開發(fā)者工具導(dǎo)入項目
（搭建過程中可能會遇到的問題）
image
2.2 如何編寫代碼
2.3 uni-app初體驗
image
2.4 項目結(jié)構(gòu)介紹
image
2.5 樣式和sass
- 支持小程序的rpx 和 h5的vw览祖，vh葬凳。
rpx 小程序中的單位 750rpx = 屏幕寬度 vw h5單位 100vw = 屏幕的寬度蹋半， 100vh = 屏幕的高度 - 內(nèi)置sass的配置若债， 只需要安裝對應(yīng)的依賴即可
npm install sass-loader node-sass - vue組件中，在style標(biāo)簽上加入屬性
<style lang= 'scss'>即可
2.6 基本語法
學(xué)過vue的同學(xué)應(yīng)該很容易上手,大膽去嘗試吧
<template>
<view class="content">
<view>{{dataObj.name}}</view>
<view>{{dataObj.age}}</view>
<view>{{dataObj.boolean}}</view>
<view>
<view v-for="item in filterList" :key= 'item.id'>{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
dataObj: {
name: 'Davidsofter',
age: 23,
boolean: true,
},
fruitList: [{id: 0, text: '??'},{id: 1, text: '??'},{id: 2, text: '??'}]
}
},
computed: {
filterList() {
return this.fruitList.filter(v => v.id<=0)
}
}
}
</script>
image
2.7 事件
添加點擊事件熔任，自定義參數(shù)和傳參
<template>
<view class="content">
<view>
<button data-item="123" @click="btclick(1,$event)">點擊我試試</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
btclick(data,event) {
console.log("我不想努力了??")
console.log(data)
console.log(event)
}
},
}
</script>
查看打印出的結(jié)果：
image
2.8 組件
1 組件的定義/引入/注冊/使用
重點章節(jié)褒链，組件化思想是前端必備思想之一，靈活的使用組件可以提高網(wǎng)頁開發(fā)效率疑苔，提高代碼復(fù)用率甫匹，降低塊與塊之間的耦合性。
1.1 組件的定義
- 在src目錄下新建文件夾components用來存放組件
- 在components目錄下直接新建vue文件
1.2 組件的引入
- 在頁面中引入組件 "import 組件名 from '組件路徑'"
1.3 組件的注冊
- 在頁面的實例中惦费，新增屬性 components
- 屬性components是一個對象兵迅， 在里面添加要注冊的組件
1.4 組件的使用
+在頁面的template中添加組件標(biāo)簽 "<組件><組件/>"
1.5 全局?jǐn)?shù)據(jù)傳遞
- 通過prototype在vue的原型上添加屬性
image
-
在App.vue文件中向外暴露一個全局對象
image 以上兩種方法的拿值
image
1.6 使用插槽實現(xiàn)動態(tài)更新組件
image
2.9 生命周期
1 介紹
- uni-app框架的生命周期結(jié)合了vue和微信小程序的生命周期
- 全局APP中使用 onLaunch 表示應(yīng)用啟動時
- 頁面中使用 onLoad 或者 onShow 分別表示頁面加載完成 和 頁面顯示時
- 組件中使用mounted 表示組件掛載完畢時
2 完整生命周期
uni-app項目
- 懂你找圖
本文結(jié)合黑馬程序員教學(xué)視頻，部分截圖來自原視頻
黑馬視頻鏈接： https://www.bilibili.com/video/BV1Sc41187nZ?p=1
作者：VinSmokeW
鏈接：http://www.reibang.com/p/3dec2cc2e30b
來源：簡書
著作權(quán)歸作者所有薪贫。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)恍箭，非商業(yè)轉(zhuǎn)載請注明出處。
