1.項目準備

1.1開發(fā)方式

uni-app為我們提供2種開發(fā)方式：

使用DCloud公司提供HBuilderX工具來快速開發(fā)；

使用腳手架來快速開發(fā)（我們這次項目使用此方式）；

1.2腳手架搭建項目

全局安裝，如果你以前安裝過就不需要重復安裝了。

npm install -g @vue/cli

創(chuàng)建項目。

vue create -p dcloudio/uni-preset-vue dnpicture

啟動項目（微信小程序）。

npm run dev:mp-weixin

在微信小程序開發(fā)者工具導入項目。

1.3搭建過程中可能遇到的問題

容易出現(xiàn) vue 和 vue-template-complier版本不一致的問題。

1.3搭建過程中可能遇到的問題
容易出現(xiàn) vue 和 vue-template-complier版本不一致的問題。

根據(jù)提示重新安裝對應的vue版本即可 npm install vue@2.6.10，然后再重新運行項目 npm run dev:mp-weixin。

1.4安裝sass依賴

npm install sass-loader@7.3.1 npm install node-sass@4.14.1

2. 項目目錄結(jié)構(gòu)

官網(wǎng)https://uniapp.dcloud.io/

3. 基本語法

數(shù)據(jù)的展示

數(shù)據(jù)的循環(huán)

條件編譯

計算屬性

事件

（1）事件的基本使用


（2）事件傳參

組件的簡單使用

（1）組件的定義

（2）組件的引入

（3）組件的注冊

（4）組件的使用


7. 組件傳遞參數(shù)

（1）父向子傳遞參數(shù)

（2）子向父傳遞參數(shù)

（3）使用全局數(shù)據(jù)傳遞參數(shù)

通過Vue的原型共享數(shù)據(jù)：

通過globaldata共享數(shù)據(jù)：

8. 組件插槽slot



具名插槽：


9. 生命周期

完整的生命周期：
uniapp:
https://uniapp.dcloud.io/frame?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F





vue: https://cn.vuejs.org/v2/guide/instance.html?#生命周期圖示

微信小程序: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

總結(jié)

以上是生活随笔為你收集整理的Uniapp学习笔记(数据展示、数据循环、条件编译、计算属性、组件的使用、组件插槽、生命周期)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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