使用mpvue開發微信小程序

時間 2019-11-16

標籤使用 mpvue 開發微信程序简体版

原文原文鏈接

嘗試使用markdown寫一篇文章，只關注內容，排版交給工具。

這篇文章主要熟悉markdown快捷鍵和介紹mpvue開發小程序。

開發了一款簡單的原生的微信小程序以後，以爲使用美團開源的mpvue來開發小程序，這使得不熟悉小程序語法的程序員不用花過多精力去熟悉小程序官方文檔，使用vue語法來進行開發。css

mpvue簡介

mpvue 是一個使用 Vue.js 開發小程序的前端框架（美團的開源項目）。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。html

demo地址

gitup地址前端

博客地址vue

step1: 查看文檔快速構建simple mpvue project

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

這裏我取消了vuex(狀態管理)和ESlint(代碼檢查)，由於我的不喜歡檢測空格和;的規範，你能夠根據你的需求配置。ios

step2:修改代碼，微信開發者工具打開dist目錄，查看是否發生改變。

step3:封裝api和http請求（這裏使用的是flyio，除了請求取消，其餘功能基本類似axios,大小隻有4kb,是axios的三分之一）

package.json加入依賴或者npm install flyiogit

1 var Fly=require("../lib/wx") //wx.js爲您下載的源碼文件
 2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式
 3 var fly=new Fly(); //建立fly實例
 4 
 5 //添加攔截器
 6 fly.interceptors.request.use((config,promise)=>{
 7     //給全部請求添加自定義header
 8     config.headers["X-Tag"]="flyio";
 9     return config;
10 })
11 //配置請求基地址
12 fly.config.baseURL="https://wendux.github.io/"
13 ...
14 
15 Page({
16   //事件處理函數
17   bindViewTap: function() {
18     //調用
19     fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
20       //輸出請求數據
21       console.log(d.data)
22       //輸出響應頭
23       console.log(d.header)
24     }).catch(err=>{
25       console.log(err.status,err.message)
26     })
27     ...
28   })
29 })
複製代碼

step4: 將flyio封裝的請求和項目api做爲組件庫掛載在原型對象上，這樣不用每一個vue單頁面都import 封裝的js,直接使用this.$http調用方法。(flyio官方文檔)

httpUtil.js程序員

點擊展開代碼

var Fly=require("../lib/wx") //wx.js爲您下載的源碼文件
 2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式
 3 var fly=new Fly(); //建立fly實例
 4 
 5 //添加攔截器
 6 fly.interceptors.request.use((config,promise)=>{
 7     //給全部請求添加自定義header
 8     config.headers["X-Tag"]="flyio";
 9     return config;
10 })
11 //配置請求基地址
12 fly.config.baseURL="https://wendux.github.io/"
13 ...
14 
15 Page({
16   //事件處理函數
17   bindViewTap: function() {
18     //調用
19     fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
20       //輸出請求數據
21       console.log(d.data)
22       //輸出響應頭
23       console.log(d.header)
24     }).catch(err=>{
25       console.log(err.status,err.message)
26     })
27     ...
28   })
29 })
複製代碼

apiUtil.jsgithub

點擊展開代碼

1 /**
 2  * Created by yuchen on 2018/4/2.
 3  */
 4 //封裝httpApi
 5 import request from './httpUtil'
 6 const host = "https://XXX.cn"
 7 const api = {
 8   // test地址
 9   authorList:() => request.get(`${host}/index/list_author_recommend.html`)
10 }
11 
12 // export default api
13 export default { //做爲組件庫(install)
14   install: function(Vue,name="$http") {//自定義名字(vue-resource也使用$http)
15     Object.defineProperty(Vue.prototype, name, { value: api });//將組件庫掛載在原型對象上
16   }
17 }
複製代碼