如何做一個uni-app專案？這篇文章就來給大家系統的講解一下做一個uni-app的流程，希望對大家有幫助！ 做一個uni-app的流程： 包含大量目前前端必備的技能，如vue，微信小程序，組件封裝，行動裝置手勢封裝，資料分頁，axios，moment，flex佈局，sass，影片播放，影片下載等等功能。 【相關推薦：《uniapp教學》】 1. uni-app介紹 1.1 什麼是uni- app uni-app 是使用vue.js語法開發所有前端應用的框架 可以開發各種東西 也叫全端發展架構 2. uni-app 基礎 #2.1 基礎問題 uni-app初體驗 專案結構介紹 樣式與sass 基本語法 事件 元件 生命週期 3. 先基礎，後專案 #需要的技術堆疊有 html #css JavaScript vue 微信小程式 uni-app##uni-ui uni-api moment.js手勢封裝 #4. 用鷹架搭建專案 ##1、全域安裝npm install -g @vue/cli登入後複製2、建立專案vue create -p dcloudio/uni-preset-vue my-project登入後複製3、啟動專案(微信小程式)npm run dev:mp-weixin登入後複製4、微信小程式開發者工具匯入專案 #記得要進入根目錄裡4.1 專案目錄4.2 樣式和sass支援小程式的rpx和h5的vw、vh內建有sass的配置了，只需要安裝對應的依賴即可「npm install sass-loader node-sass "vue組件中，在style標籤上加入屬性「</h2><p></p> #5 .基本語法<p></p><h2>Vue的基礎語法<strong></strong>如v-bind，v-if，v-show，v-for之類的</h2><p></p>6. 事件的使用<h2><strong></strong>v-on</h2><ul><li>7. 元件</li><li></li><li>元件的簡單使用</li> </ul>元件傳參<p><span style="font-size: 18px;">元件插槽<strong></strong></span></p><ul>7.1 元件的簡單使用<li></li><li></li><li>元件的定義</li><li>元件的引入</li></ul>元件的註冊<p><strong>元件的使用</strong></p><ul>##7.11 元件的定義<li></li><li></li>在src目錄下新資料夾components用來存放元件</ul><p>在components目錄下直接新元件*.vue<strong></strong></p><ul>7.12 元件的引入<li></li></ul><h3 data-id="heading-15">在頁面中引入元件「import 元件名稱from'元件路徑'“<strong></strong></h3><ul>7.13 元件的註冊<li></li> <li></li>#在頁面中的實例中，新增屬性components</ul><h3 data-id="heading-16">屬性components是一個對象，把元件放進去註冊<strong></strong></h3><ul>7.14 元件的使用<li></li></ul><p>在頁面的標籤中，直接使用引入的元件「<元件></元件>」<strong><span style="font-size: 18px;"></span></strong></p>7.2 元件傳遞參數<ul><li><strong></strong></li>父向子傳遞參數透過<li>屬性<strong>的方式</strong></li>子向父傳遞參數透過<li>觸發事件<ul>的方式<li><strong>使用全域資料傳遞參數</strong></li>透過掛載<li>vue<strong> 的原型上</strong></li>透過</ul>globalData</li># 的方式</ul><p><strong></strong></p><ul>7.21 父向子傳遞資料<li><strong></strong><strong>父頁向子元件</strong>ul- com</li> 透過屬性名稱<li>list<strong>傳遞了一個陣列資料</strong></li>子元件透過</ul>props<p>接收資料<strong></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><ul-com : list="[1,2,3,4]"> props: { list: Array },</pre><div class="contentsignin">登入後複製</div></div></p><ul>7.22 子向父傳遞資料<li><strong></strong></li>子元件透過<li>觸發事件<strong>的方式向父元件傳遞資料</strong></li>父元件透過</ul>監聽事件<p>的方式來接收資料</p><ul style="list-style-type: disc;"><li>寫法<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>methods: { handleclick(){ this.$emit("textchange",'来自子组件的数据');} }</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><ul-com :list="[1,2,3,4]" @textChange="handleTextchange"></pre><div class="contentsignin">登入後複製</div></div></p></li><li>在子元件上設定點擊事件<p></p></li><li>在methods 設定傳遞的參數<p></p></li><li>在父子見設定一個監聽事件<p></p></li>##在父的methods中接受一個參數</ul><p><strong></strong></p>7.3 全域共享資料<ul><li></li><li>透過Vue的原型共享資料（用this取得）</li><li>透過globalData共享資料(定義後用getapp取得)</li><li>vuex</li></ul>本地儲存<p><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Vue.prototype.baseURL="http: //www.baidu.com"</pre><div class="contentsignin">登入後複製</div></div>7.4 元件插槽#######<ul> <li>標籤其實也是資料中的一種，想實作動態的給子元件傳遞標籤，就可以使用插槽slot</li> <li>透過slot實作佔位符</li> </ul> <blockquote><p>簡單來說就是把父頁面的標籤丟到子頁面去</p></blockquote> <h2><strong>#8. 生命週期</strong></h2> <p><strong><span style="font-size: 18px;"></span></strong></p> <ul> <li> <li><strong></strong></li># #8.1 介紹<li> <strong></strong><strong></strong>uni-app框架的生命週期結合了vue和微信小程式的生命週期</li> <li>全域的APP中使用<strong>onLaunch </strong>表示應用程式啟動時</li> </ul>頁面中使用<blockquote>onLoad<p> 或</p>onShow</blockquote> 分別表示頁面載入完畢時和頁面顯示時<p><a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">元件中使用</a>mounted</p>元件掛載完畢時############本文轉載自：https://juejin.cn/post/6996561691639037983##########更多程式設計相關知識，請造訪：###程式設計入門###！ ！ ###
