作者 | End_less_，責(zé)編 | 夕顏

來源 | CSDN博客

頭圖 | CSDN 下載自視覺中國

出品 | CSDN（ID：CSDNnews）

前言

今天，我們來學(xué)習(xí)一下如何使用vue進(jìn)行微信小程序的搭建，感受一下使用Vue做小程序的魔力。

生命周期

1. Vue的生命周期

什么是Vue生命周期？簡單來說，Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。Vue生命周期的作用，在于它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯。

2. 微信小程序頁面生命周期

3. uni-app生命周期

1. 應(yīng)用生命周期

當(dāng)使用uni-app進(jìn)行項(xiàng)目的創(chuàng)建的時(shí)候，會(huì)在入口文件App.vue中自動(dòng)生成應(yīng)用生命周期的大致結(jié)構(gòu)：

2. 頁面生命周期

具體內(nèi)容可看官網(wǎng)文檔 ：uni-app 生命周期（https://uniapp.dcloud.io/frame?id=生命周期）

項(xiàng)目搭建

項(xiàng)目使用的編輯器：VSCode,微信開發(fā)者工具，node環(huán)境，vue環(huán)境…

1. 創(chuàng)建項(xiàng)目

使用命令行：

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

其中 projectName是項(xiàng)目名稱，可自定義。

由于使用的是scss樣式，需要安裝sass-loader插件

命令行：npm i sass-loader node-sass，如果一直下載不成功，建議使用淘寶鏡像。

2. 在微信小程序開發(fā)工具導(dǎo)入項(xiàng)目

首先使用命令行：npm run dev:mp-weixin，運(yùn)行項(xiàng)目

3. 使用VSCode進(jìn)行項(xiàng)目編寫

當(dāng)?shù)诙酵瓿芍螅瑢㈨?xiàng)目文件夾在VSCode中打開，即可進(jìn)行項(xiàng)目的編寫。

項(xiàng)目結(jié)構(gòu)

關(guān)于Vue知識(shí)，你需要了解哪些？

具體可看博客 –> Vue Knowledge（https://blog.csdn.net/Ms_yjk/article/details/104748084）

關(guān)于此項(xiàng)目微信小程序開發(fā)，你必須知道的知識(shí)

1. 如何將數(shù)據(jù)掛載在全局？

1.使用Vue原型進(jìn)行數(shù)據(jù)掛載

例如:

Vue.prototype.testData = \"test\"//輸出onLoad{console.log(this.testData) //\"test\"}

2.getApp.globalData

var app = getApp;console.log(app.globalData.helloFromApp); // 調(diào)用全局變量app.test; // 調(diào)用全局方法

2. image中的mode屬性

在實(shí)現(xiàn)微信小程序時(shí)，肯定會(huì)處理圖片的一些事件，縮略圖，原圖，顯示樣式等等都是需要考慮的。

3. 如何模擬觸屏事件？

大致思路:

1. 給容器綁定兩個(gè)觸屏事件 touchstart 和 touchend

2. 用戶按下屏幕事件

   a. 記錄用戶按下屏幕的時(shí)間 Date.now 時(shí)間戳 返回 1970 -1-1 到現(xiàn)在的毫秒數(shù)

   b. 記錄用戶按下屏幕的坐標(biāo) x 和 y

3. 用戶離開屏幕事件

1. 記錄用戶離開屏幕的時(shí)間 Date.noew

2. 記錄用戶離開屏幕的坐標(biāo) x 和 y

3. 根據(jù)兩個(gè)時(shí)間 運(yùn)算 判斷 用戶按下屏幕時(shí)長是否合法

4. 根據(jù)兩對(duì)坐標(biāo) 判斷距離是否合法 判斷 滑動(dòng)的方向

4. 微信小程序輪播圖如何實(shí)現(xiàn)？

一些基礎(chǔ)知識(shí)：

1. 自動(dòng)輪播 autoplay

2. 指示器 indicator-dots

3. 銜接輪播 circular

4. swiper標(biāo)簽 默認(rèn)的高度是150px

5. image標(biāo)簽?zāi)J(rèn)的寬度320px => 基本樣式中重置了100%

默認(rèn)的高度240px

6. 要計(jì)算圖片的寬度和高度的比例 圖片的寬度/高度

7. 把圖片的比例也寫到swiper標(biāo)簽樣式中去

8. swiper-item 默認(rèn)寬高是繼承父元素的100%

更多相關(guān)知識(shí)可以在官方文檔中進(jìn)行查看 scroll-view 微信開放文檔

5. 如何在微信小程序中實(shí)現(xiàn)Promise請(qǐng)求？

眾所周知，在微信小程序中，其原生語言是不支持promise請(qǐng)求的。同時(shí)，uni-app的請(qǐng)求不能夠方便的添加 “請(qǐng)求中” 效果，并且其返回值是一個(gè)數(shù)組。

封裝思路

1.基于原生的promise進(jìn)行封裝

創(chuàng)建request.js文件：

//ES6export default (params) => {

// 加載中 uni.showLoading({ title: \"Loading...\" })

return new Promise((resolve, reject) => { wx.request({ ...params, success (res) { resolve(res.data); }, fail (err) { reject(err) }, complete { uni.hideLoading } }) })}

2.將其掛載在Vue的原型上

3.通過this.request的方式進(jìn)行請(qǐng)求

每次進(jìn)行獲取頁面數(shù)據(jù)請(qǐng)求中，直接使用this.request進(jìn)行請(qǐng)求數(shù)據(jù)，例如：

6. 如何下載文件到本地?

1.函數(shù)介紹

1. uni.downloadFile(OBJECT)

下載文件資源到本地，客戶端直接發(fā)起一個(gè) HTTP GET 請(qǐng)求，返回文件的本地臨時(shí)路徑。

在各個(gè)小程序平臺(tái)運(yùn)行時(shí)，網(wǎng)絡(luò)相關(guān)的 API 在使用前需要配置域名白名單。

OBJECT 參數(shù)說明

注：文件的臨時(shí)路徑，在應(yīng)用本次啟動(dòng)期間可以正常使用，如需持久保存，需在主動(dòng)調(diào)用uni.saveFile，才能在應(yīng)用下次啟動(dòng)時(shí)訪問得到。

success 返回參數(shù)說明

注意：網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間可以統(tǒng)一在 manifest.json 中配置 networkTimeout。

2. uni.saveImageToPhotosAlbum(OBJECT)

保存圖片到系統(tǒng)相冊(cè)。

平臺(tái)差異說明

OBJECT 參數(shù)說明

success 返回參數(shù)說明

注意

1. 可以通過用戶授權(quán)API來判斷用戶是否給應(yīng)用授予相冊(cè)的訪問權(quán)限https://uniapp.dcloud.io/api/other/authorize

2. H5沒有API可觸發(fā)保存到相冊(cè)行為，下載圖片時(shí)瀏覽器會(huì)詢問圖片存放地址。

具體的一些屬性和方法可閱讀官方文檔 uni-app

2.如何實(shí)現(xiàn)？

項(xiàng)目實(shí)現(xiàn)中，本人遇到的bug和一些注意問題

頁面不顯示

查看pages.json是否添加了相關(guān)的頁面以及配置。

關(guān)于flex布局，圖片顯示的問題

論壇發(fā)布過這個(gè)問題：uni-app創(chuàng)建微信小程序 flex布局問題（https://bbs.csdn.net/topics/396522643）

moment.js 中英文轉(zhuǎn)換

報(bào)錯(cuò)信息：

但是在node_modules中可以找到文件：

解決方法

1.

import moment from \'moment\'moment.locale(\'zh-cn\')

2.

import moment from \'moment\'import \'moment/locale/zh-cn\'

3.

moment.locale(\'zh-cn\', { months: \'一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\'.split(\'_\'), monthsShort: \'1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\'.split(\'_\'), weekdays: \'星期日_星期一_星期二_星期三_星期四_星期五_星期六\'.split(\'_\'), weekdaysShort: \'周日_周一_周二_周三_周四_周五_周六\'.split(\'_\'), weekdaysMin: \'日_一_二_三_四_五_六\'.split(\'_\'), longDateFormat: { LT: \'Ah點(diǎn)mm分\', LTS: \'Ah點(diǎn)m分s秒\', L: \'YYYY-MM-DD\', LL: \'YYYY年MMMD日\', LLL: \'YYYY年MMMD日Ah點(diǎn)mm分\', LLLL: \'YYYY年MMMD日ddddAh點(diǎn)mm分\', l: \'YYYY-MM-DD\', ll: \'YYYY年MMMD日\', lll: \'YYYY年MMMD日Ah點(diǎn)mm分\', llll: \'YYYY年MMMD日ddddAh點(diǎn)mm分\' }, meridiemParse: /凌晨|早上|上午|中午|下午|晚上/, meridiemHour: function (h, meridiem) { let hour = h; if (hour === 12) { hour = 0; } if (meridiem === \'凌晨\' || meridiem === \'早上\' || meridiem === \'上午\') { return hour; } else if (meridiem === \'下午\' || meridiem === \'晚上\') { return hour 12; } else { // \'中午\' return hour >= 11 ? hour : hour 12; } }, meridiem: function (hour, minute, isLower) { const hm = hour * 100 minute; if (hm < 600) { return \'凌晨\'; } else if (hm < 900) { return \'早上\'; } else if (hm < 1130) { return \'上午\'; } else if (hm < 1230) { return \'中午\'; } else if (hm < 1800) { return \'下午\'; } else { return \'晚上\'; } }, calendar: { sameDay: function { return this.minutes === 0 ? \'[今天]Ah[點(diǎn)整]\' : \'[今天]LT\'; }, nextDay: function { return this.minutes === 0 ? \'[明天]Ah[點(diǎn)整]\' : \'[明天]LT\'; }, lastDay: function { return this.minutes === 0 ? \'[昨天]Ah[點(diǎn)整]\' : \'[昨天]LT\'; }, nextWeek: function { let startOfWeek, prefix; startOfWeek = moment.startOf(\'week\'); prefix = this.diff(startOfWeek, \'days\') >= 7 ? \'[下]\' : \'[本]\'; return this.minutes === 0 ? prefix \'dddAh點(diǎn)整\' : prefix \'dddAh點(diǎn)mm\'; }, lastWeek: function { let startOfWeek, prefix; startOfWeek = moment.startOf(\'week\'); prefix = this.unix < startOfWeek.unix ? \'[上]\' : \'[本]\'; return this.minutes === 0 ? prefix \'dddAh點(diǎn)整\' : prefix \'dddAh點(diǎn)mm\'; }, sameElse: \'LL\' }, ordinalParse: /d{1,2}(日|月|周)/, ordinal: function (number, period) { switch (period) { case \'d\': case \'D\': case \'DDD\': return number \'日\'; case \'M\': return number \'月\'; case \'w\': case \'W\': return number \'周\'; default: return number; } }, relativeTime: { future: \'%s內(nèi)\', past: \'%s前\', s: \'幾秒\', m: \'1 分鐘\', mm: \'%d 分鐘\', h: \'1 小時(shí)\', hh: \'%d 小時(shí)\', d: \'1 天\', dd: \'%d 天\', M: \'1 個(gè)月\', MM: \'%d 個(gè)月\', y: \'1 年\', yy: \'%d 年\' }, week: { // GB/T 7408-1994《數(shù)據(jù)元和交換格式·信息交換·日期和時(shí)間表示法》與ISO 8601:1988等效 dow: 1, // Monday is the first day of the week. doy: 4 // The week that contains Jan 4th is the first week of the year. } });

4. 更新moment.js版本

npm add moment@2.24.0

親測第三種，第四種方法有效。

總結(jié)

使用vue進(jìn)行微信小程序的編寫，寫法也類似Vue框架開發(fā)Web網(wǎng)頁一樣，使用組件，mpvue會(huì)自動(dòng)轉(zhuǎn)化成源生代碼適應(yīng)于小程序。

優(yōu)點(diǎn)：組件化，易于維護(hù)，可以重復(fù)使用，節(jié)省開發(fā)成本。

數(shù)據(jù)綁定，事件處理，Scoped局部樣式，使用HTML標(biāo)簽構(gòu)建頁面。

這樣最大化的保持和網(wǎng)頁應(yīng)用開發(fā)一致，減少了前端人員切換到小程序的學(xué)習(xí)理解成本，也為原先使用Vue開發(fā)的網(wǎng)頁應(yīng)用移植到小程序平臺(tái)提供了降低遷移成本的可能。

數(shù)據(jù)方面更新更為簡易，不需要使用原生的SetData方法。還有WebPack自動(dòng)構(gòu)建，熟悉Vue的人易于上手。

優(yōu)化了很多小程序的不足點(diǎn)（不能使用npm，不能使用css預(yù)處理器，原生是callback語法等等）

缺點(diǎn)：slot問題

原文鏈接：

https://blog.csdn.net/ms_yjk/article/details/105921002

?一文濃縮 60 年，程序員不可不知的開源秘史！

?CSDN總部落戶長沙，共建中國開發(fā)者產(chǎn)業(yè)中心城市！

?AI 修復(fù) 100 年前晚清影像喜提熱搜，有穿越內(nèi)味兒了！

?CycleGan人臉轉(zhuǎn)為漫畫臉，牛掰的知識(shí)又增加了！| 附代碼

?觸發(fā)死鎖怎么辦？MySQL 的死鎖系列：鎖的類型以及加鎖原理了解一下！

?帶血的戰(zhàn)士| 吳忌寒傳