uinapp 開發筆記

小程式

1、 全域性安裝腳手架  開啟cmd   或者vscode調出終端

npm install -g @vue/cli

 

2、建立專案，my-project為專案名 （注意選擇硬碟位置建立）

//dcloudio/uni-preset-vue 表示建立uni-app專案

//dcloudio/uni-preset-vue 表示建立uni-app專案
vue create -p dcloudio/uni-preset-vue my-project

 

3、若出現如下問題：

 

4、切換到my-project路徑

cd my-project

5、啟動專案（微信小程式）

npm run dev:mp-weixin

6、下載安裝微信開發者工具
點選專案->匯入專案->選擇剛建立的檔案

 

7、執行專案，出現如下結果則成功進行監聽了，vsCode編輯完後記得儲存，才可以實時檢視結果

 

8、樣式 和sass

小程式中的單位 rpx   750rpx=螢幕寬度

H5單位 vw/vh  100vw=螢幕寬度 100vh=螢幕高度

使用內建sass  1安裝依賴 npm install sass-loader node-sass

安裝node失敗

 

解決方案：npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

 

在vue元件中 style標籤上加如屬性lang=”scss” 如<style lang=’scss’>

注意：sass-loader的版本是否過高報錯

解決解決方案：
安裝舊版本loader
npm uninstall sass-loader（解除安裝當前版本）
npm install sass-loader@7.3.1 --save-dev

9、當出現如下這種情況時建議使用computer計算屬性

 

 

改成：

 

 

10、事件

定義事件監聽函式需要在 methods 中定義

11元件

11-1 父元件向子元件傳參

 

11-2子元件傳值給父元件

 

 

 

11-3 全域性共享資料

1. 通過vue的原型來實現

Vue.prototype.baseUrl=”www.baidu.com”

只要找到有呼叫vue的地方新增即可

如：

其他地方就可以通過 this. baseUrl 獲取值

1. getApp().globalData.text=”test”

要在App.vue中加globalData物件

 

其他地方就可以通過 getApp().globalData.text獲取值; getApp().onHide() 呼叫全域性方法

11-4 元件插槽

父元件給子元件傳遞標籤 使用插槽slot

 

12 生命週期

onLaunch 全域性app中使用 表示應用啟動時

onload 頁面中使用 表示頁面載入完畢時

onShow/onHide 頁面中使用 表示頁面顯示時/頁面隱藏時 主意不能在組建中使用

mounted 元件中使用 表示元件掛載完畢時

onLaunch 在app.vue中使用

 

 

 

 

v-if 和v-for 不時使用

1、不建議使用

<el-step

              v-show="index == item.superviseList.length - 1"

              v-for="(item1, index) in item.superviseList"

              :key="'sup' + index"

              :title="item1.finishDate"

              :description="item1.deptName + ' ' + item1.finishMan"

            ></el-step>

 

2 建議使用

<el-step

              v-for="(item1, index) in item.feedbackList.slice(

                item.feedbackList.length - 1

              )"

              :key="'supD' + index"

              :title="item1.finishDate"

              :description="item1.deptName + ' ' + item1.finishMan"

            ></el-step>