微信小程序 用mpvue框架开发-基础配置

接待员
1,139 阅读1分钟

1、用mpvue创建项目,命令：

vue init mpvue/mpvue-quickstart my-project

2、安装一些插件

  1. minapp-api-promise 将微信小程序所有API promise化，支持await、支持请求列队
  2. flyio  http请求库,因为小程序不支持axios，所以用这个

  3. mpvue-wxparse  富文本处理器

基础配置

用mpvue生成的框架，我把App.vue用来放全局CSS样式，main.js 用来配置全局变量和函数（相当于小程序的App.js吧）。

1、定义全局变量

//main.js
let globalData = {};//定义全局变量
Vue.prototype.globaData = globalData ;//将全局变量挂载到Vue上就可以直接用this.globalData访问了

2、引入插件(flyio,minapp-api-promise)

var Fly = require('flyio/dist/npm/wx');

var fly = new Fly

fly.config.baseUrl='服务器地址'

Vue.prototype.$http = fly;
let params = {
    Name:'LeeDogEgg'
    Age:18
}
fly.get('/text',params).then(res=>{console.log('success!')})

如果按flyio官网 用 import fly  from ‘flyio’的方法引用 可能会报错！（我是遇到了）

个别请求头配置啥的 可以直接去 官网看了 www.npmjs.com/package/fly…

import wxp from 'minapp-api-promise

Vue.prototype.$wx = wxp;

const textFunction  = function(){ console.log('Hello!') };

Vue.prototype.textFunction  = textFunction

这样就完成了 全局方法、变量的挂载了，也不用在每个页面import 引用了,直接this.$wx调用，还是蛮方便。



avatar
文章
阅读
粉丝