利用mpvue開發微信小程序

　　最近公司部門負責人提出需求須要開發一款微信小程序，因爲本人以前是作前端開發的，對於小程序開發一竅不通，可是不少時候咱們都是把不會作變成我會學。因而便在網上尋找小程序開發教程，相比於相生的小程序開發，本人更傾向於美團的mpvue框架，由於此框架是基於vue開發的，而偏偏我前端開發技術就是vue，甚是美哉，花了半天時間學習了一下mpvue，便開始了小程序開發之旅，固然mpvue小程序開發也有不少坑。

　　mpvue是由美團研發的一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。小程序的時間案例有美團酒旅、餐飲、到店、金融等業務接入。你們能夠直接點擊這裏去mpvue官網學習下。

　　下面我給你們先介紹如何用mpvue快速建立小程序，在建立小程序以前你們首先須要去申請一個小程序帳號，具體申請細則看這裏

　　

 1 # 全局安裝 vue-cli
 2 npm install --global vue-cli
 3 # 建立一個基於 mpvue-quickstart 模板的新項目
 4 vue init mpvue/mpvue-quickstart my-project
 5 
 6 # 安裝依賴
 7 cd my-project
 8 npm install
 9 啓動構建
10 npm run dev

View Code

　　這樣一個基於mpvue的小程序框架就已經搭建好了，接下來下載微信開發工具，點這裏，安裝好微信開發工具打開選擇小程序

　　而後新增項目，選擇項目目錄爲剛纔建立的項目目錄，打開就好

　　到這裏整個小程序項目建立完成，接下來就是小程序開發，給你們看一下mpvue建立的小程序目錄結構

　　page下面對應每一個文件夾就是一個小程序頁面，小程序的跳轉路由在app.json文件中配置 ，配置代碼以下

　　

 1 {
 2   "pages": [
 3     "pages/shopList/main"
 4   ],
 5   "window": {
 6     "backgroundTextStyle": "light",
 7     "navigationBarBackgroundColor": "#fff",
 8     "navigationBarTitleText": "中科雲溯",
 9     "navigationBarTextStyle": "black"
10   }
11 }

View Code

小程序開發用到的全部API請看這裏。學會了吧，請開始你的小程序開發之旅吧