mpvue微信小程序动画_mpvue微信小程序系列
項目空閑時間，來做一波溫故知新。
當前時期的需求是做一個拼團的小程序。
在這之前在做一個微信公眾號H5項目，技術棧是Vue全家桶(vue+router+vuex+vant...)。在新的小程序項目中有很多組件類似于之前項目的組件，所以決定使用mpvue作為基礎來搭建項目。
mpvue框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。
簡而言之，就是可以用類似vue的語法來開發小程序，通過mpvue配置好的各種loader來將vue文件轉換為小程序需要的wxml,wxss等
站在巨人的肩膀上，別人的分享為我提供了很多的方便。下面介紹項目的第一步，搭建環境。
從第一步搭建環境開始記錄。建議使用cnpm，開發過程中會需要填寫appid等信息，不過要是練手的話也可以不用填
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
# 啟動構建
$ npm run dev
上面流程走完，項目中會多出一個dist文件夾，這就是生成的微信小程序項目。OK，然后打開微信開發者工具，選擇小程序----體驗模式(沒有appid時)，將項目目錄指向剛剛生成的dist文件夾。好了，頁面出來了。
這就完了？
當然
沒有
需要知道的地方：
1.最重要的當然是看文檔，mpvue的文檔相當的簡單，是我輩開發者的最愛。
2.自己的代碼在/src里面，每個頁面一個文件夾，包含這三個文件
image.png
index.vue 這是頁面主頁文件，完全和vue的語法相同，可以放心食用
main.js 這個是將vue實例化的一個文件，建議不要修改，即每個頁面文件夾都是這樣
image.png
main.json 看過小程序文檔的都知道，這個文件可以用來配置小程序頂部tab的標題和顏色之類的東西
image.png
3.在/build/utils.js文件夾里，有一堆配置，初學者可以不用管它三七二十一的。不過需要修改一下px2rpxLoader的屬性，這里的意思是將css代碼中的px轉換成小程序的rpx(小程序標配的尺寸，自適應效果很好)原本基礎配置是2比1，意思是將2px轉換成1rpx。我們將它改成1比1，這樣就可以直接按照標注圖上的px單位來敲代碼了。
var px2rpxLoader = {
loader: 'px2rpx-loader',
options: {
baseDpr: 1,
rpxUnit: 1
}
}
4.配置環境變量
為了統一并且方便，我們通常都會配置一個環境變量來保持dev和product的代碼統一。
/config/dev.env.jsdev版本
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
//服務器域名，這里展示測試服的服務器地址
API_ROOT:'"http://beta.baidu.com"'
})
/config/prod.env.jsproduct版本
module.exports = {
NODE_ENV: '"production"',
// 服務器域名
API_ROOT:'"http://baidu.com"'
}
取值：這樣就能在代碼一致的情況下，配置不同的地址(其他更多不同的地方)。
const url = process.env.API_ROOT;
我所使用到的環境搭建以及基本配置就已經完成了。
mpvue項目中需要注意的點
獲取服務端數據需要在mounted中請求
盡量不使用小程序的生命周期，主要使用vue的生命周期
一些常用的API
在這個項目中沒有使用到vuex，我們使用小程序原生的方法儲存數據
微信小程序詳細API看這里，我只總結一些常用的方法
// 同步儲存數據
wx.setStorageSync('phone', 18244242739);
// 普通跳轉頁面
wx.navigateTo({
url: 'test?id=1'
})
// 重定向，在路由棧中刪除當前頁面
!!!微信頁面棧最多5層，遵循棧的先進后出，只是這里超出5層就刪除第一層
wx.redirectTo({
url: 'test?id=1'
})
// 取緩存中的值
const value = wx.getStorageSync('key值')
// 微信小程序登陸
wx.login({
success(res){
// 登陸成功的回調
}
})
// 獲取當前頁面的地址(url后的參數)
function getCurrentPageUrl(){
var pages = getCurrentPages() //獲取加載的頁面
var currentPage = pages[pages.length-1] //獲取當前頁面的對象
// url后的參數：url.options.參數名
var url = currentPage.route //當前頁面url
return url
}
選擇圖片并上傳
// 上傳
wx.chooseImage({
count: 4, // 可以同時選擇多少張
sourceType: ["album", "camera"], // 圖片來源：相冊選圖 相機拍照
sizeType: ["original", "compressed"], // 圖片質量：原圖 壓縮圖
success(res) {
// res為選取的圖片數據
// 上傳多張
for (let i = 0; i < res.tempFilePaths.length; i++) {
uploadImg(res, i);
}
}
});
// 上傳到自己的服務器上
function uploadImg(res, index) {
// 驗證文件大小
if (res.tempFiles[index].size > 3 * 1024 * 1024) {
this.$tip("圖片大小不能超過3M");
return;
}
wx.uploadFile({
url: "自己服務器的接口地址",
// 獲取文件
filePath: res.tempFilePaths[index],
// 字段名
name: "image",
//wx此方法的content-type默認為multipart/form-data
header: {
"user-token": "xxxxxxxxxx",
},
success(resData) {
// 成功的回調
// ......
}
});
}
真機調試和預覽
image.png
代碼完工之后的發布流程
image.png
1.在微信小程序管理中心配置你的微信號為主要開發者后，這里會出現一個上傳按鈕，點擊上傳就好
2.管理中心點擊確定發布
3.等待審核(第一次2-3天，然后等待時間可能比較長了...)
4.審核通過，完成上線。
總結
以上是生活随笔為你收集整理的mpvue微信小程序动画_mpvue微信小程序系列的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： moment获取几小时前_momentj
- 下一篇： 外贸常用术语_外贸干货！做外贸常用的贸易