喲，2020 年了，用 Vue 做一個自己的小程序吧！- 原力計劃（vue制作小程序）
作者 | End_less_，責編 | 夕顏
來源 | CSDN博客
頭圖 | CSDN 下載自視覺中國
出品 | CSDN（ID：CSDNnews）
前言
今天，我們來學習一下如何使用vue進行微信小程序的搭建，感受一下使用Vue做小程序的魔力。
生命周期
1. Vue的生命周期
什么是Vue生命周期？簡單來說，Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。Vue生命周期的作用，在于它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
2. 微信小程序頁面生命周期
3. uni-app生命周期
1. 應用生命周期
當使用uni-app進行項目的創(chuàng)建的時候，會在入口文件App.vue中自動生成應用生命周期的大致結構：
2. 頁面生命周期
具體內(nèi)容可看官網(wǎng)文檔 ：uni-app 生命周期（https://uniapp.dcloud.io/frame?id=生命周期）
項目搭建
項目使用的編輯器：VSCode,微信開發(fā)者工具，node環(huán)境，vue環(huán)境…
1. 創(chuàng)建項目
使用命令行：
vue create -p dcloudio/uni-preset-vue projectName
其中 projectName是項目名稱，可自定義。
由于使用的是scss樣式，需要安裝sass-loader插件
命令行：npm i sass-loader node-sass，如果一直下載不成功，建議使用淘寶鏡像。
2. 在微信小程序開發(fā)工具導入項目
首先使用命令行：npm run dev:mp-weixin，運行項目
3. 使用VSCode進行項目編寫
當?shù)诙酵瓿芍?，將項目文件夾在VSCode中打開，即可進行項目的編寫。
項目結構
關于Vue知識，你需要了解哪些？
具體可看博客 –> Vue Knowledge（https://blog.csdn.net/Ms_yjk/article/details/104748084）
關于此項目微信小程序開發(fā)，你必須知道的知識
1. 如何將數(shù)據(jù)掛載在全局？
1.使用Vue原型進行數(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屬性
在實現(xiàn)微信小程序時，肯定會處理圖片的一些事件，縮略圖，原圖，顯示樣式等等都是需要考慮的。
3. 如何模擬觸屏事件？
大致思路:
-
給容器綁定兩個觸屏事件 touchstart 和 touchend
用戶按下屏幕事件
a. 記錄用戶按下屏幕的時間 Date.now 時間戳 返回 1970 -1-1 到現(xiàn)在的毫秒數(shù)
b. 記錄用戶按下屏幕的坐標 x 和 y
用戶離開屏幕事件
記錄用戶離開屏幕的時間 Date.noew
記錄用戶離開屏幕的坐標 x 和 y
根據(jù)兩個時間 運算 判斷 用戶按下屏幕時長是否合法
根據(jù)兩對坐標 判斷距離是否合法 判斷 滑動的方向
4. 微信小程序輪播圖如何實現(xiàn)？
一些基礎知識：
1. 自動輪播 autoplay
2. 指示器 indicator-dots
3. 銜接輪播 circular
4. swiper標簽 默認的高度是150px
5. image標簽默認的寬度320px => 基本樣式中重置了100%
默認的高度240px
6. 要計算圖片的寬度和高度的比例 圖片的寬度/高度
7. 把圖片的比例也寫到swiper標簽樣式中去
8. swiper-item 默認寬高是繼承父元素的100%
更多相關知識可以在官方文檔中進行查看 scroll-view 微信開放文檔
5. 如何在微信小程序中實現(xiàn)Promise請求？
眾所周知，在微信小程序中，其原生語言是不支持promise請求的。同時，uni-app的請求不能夠方便的添加 “請求中” 效果，并且其返回值是一個數(shù)組。
封裝思路
1.基于原生的promise進行封裝
創(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的方式進行請求
每次進行獲取頁面數(shù)據(jù)請求中，直接使用this.request進行請求數(shù)據(jù)，例如：
6. 如何下載文件到本地?
1.函數(shù)介紹
1. uni.downloadFile(OBJECT)
下載文件資源到本地，客戶端直接發(fā)起一個 HTTP GET 請求，返回文件的本地臨時路徑。
在各個小程序平臺運行時，網(wǎng)絡相關的 API 在使用前需要配置域名白名單。
OBJECT 參數(shù)說明
注：文件的臨時路徑，在應用本次啟動期間可以正常使用，如需持久保存，需在主動調(diào)用uni.saveFile，才能在應用下次啟動時訪問得到。
success 返回參數(shù)說明
注意：網(wǎng)絡請求的超時時間可以統(tǒng)一在 manifest.json 中配置 networkTimeout。
2. uni.saveImageToPhotosAlbum(OBJECT)
保存圖片到系統(tǒng)相冊。
平臺差異說明
OBJECT 參數(shù)說明
success 返回參數(shù)說明
注意
-
可以通過用戶授權API來判斷用戶是否給應用授予相冊的訪問權限https://uniapp.dcloud.io/api/other/authorize
H5沒有API可觸發(fā)保存到相冊行為，下載圖片時瀏覽器會詢問圖片存放地址。
具體的一些屬性和方法可閱讀官方文檔 uni-app
2.如何實現(xiàn)？
項目實現(xiàn)中，本人遇到的bug和一些注意問題
頁面不顯示
查看pages.json是否添加了相關的頁面以及配置。
關于flex布局，圖片顯示的問題
論壇發(fā)布過這個問題：uni-app創(chuàng)建微信小程序 flex布局問題（https://bbs.csdn.net/topics/396522643）
moment.js 中英文轉(zhuǎn)換
報錯信息：
但是在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點mm分', LTS: 'Ah點m分s秒', L: 'YYYY-MM-DD', LL: 'YYYY年MMMD日', LLL: 'YYYY年MMMD日Ah點mm分', LLLL: 'YYYY年MMMD日ddddAh點mm分', l: 'YYYY-MM-DD', ll: 'YYYY年MMMD日', lll: 'YYYY年MMMD日Ah點mm分', llll: 'YYYY年MMMD日ddddAh點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[點整]' : '[今天]LT'; }, nextDay: function { return this.minutes === 0 ? '[明天]Ah[點整]' : '[明天]LT'; }, lastDay: function { return this.minutes === 0 ? '[昨天]Ah[點整]' : '[昨天]LT'; }, nextWeek: function { let startOfWeek, prefix; startOfWeek = moment.startOf('week'); prefix = this.diff(startOfWeek, 'days') >= 7 ? '[下]' : '[本]'; return this.minutes === 0 ? prefix 'dddAh點整' : prefix 'dddAh點mm'; }, lastWeek: function { let startOfWeek, prefix; startOfWeek = moment.startOf('week'); prefix = this.unix < startOfWeek.unix ? '[上]' : '[本]'; return this.minutes === 0 ? prefix 'dddAh點整' : prefix 'dddAh點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 小時', hh: '%d 小時', d: '1 天', dd: '%d 天', M: '1 個月', MM: '%d 個月', y: '1 年', yy: '%d 年' }, week: { // GB/T 7408-1994《數(shù)據(jù)元和交換格式·信息交換·日期和時間表示法》與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
親測第三種，第四種方法有效。
總結
使用vue進行微信小程序的編寫，寫法也類似Vue框架開發(fā)Web網(wǎng)頁一樣，使用組件，mpvue會自動轉(zhuǎn)化成源生代碼適應于小程序。
優(yōu)點：組件化，易于維護，可以重復使用，節(jié)省開發(fā)成本。
數(shù)據(jù)綁定，事件處理，Scoped局部樣式，使用HTML標簽構建頁面。
這樣最大化的保持和網(wǎng)頁應用開發(fā)一致，減少了前端人員切換到小程序的學習理解成本，也為原先使用Vue開發(fā)的網(wǎng)頁應用移植到小程序平臺提供了降低遷移成本的可能。
數(shù)據(jù)方面更新更為簡易，不需要使用原生的SetData方法。還有WebPack自動構建，熟悉Vue的人易于上手。
優(yōu)化了很多小程序的不足點（不能使用npm，不能使用css預處理器，原生是callback語法等等）
缺點：slot問題
原文鏈接：
https://blog.csdn.net/ms_yjk/article/details/105921002
?一文濃縮 60 年，程序員不可不知的開源秘史！
?CSDN總部落戶長沙，共建中國開發(fā)者產(chǎn)業(yè)中心城市！
?AI 修復 100 年前晚清影像喜提熱搜，有穿越內(nèi)味兒了！
?CycleGan人臉轉(zhuǎn)為漫畫臉，牛掰的知識又增加了！| 附代碼
?觸發(fā)死鎖怎么辦？MySQL 的死鎖系列：鎖的類型以及加鎖原理了解一下！
?帶血的戰(zhàn)士| 吳忌寒傳
