mpvue微信小程序开发总结（一）--- 创建及配置项目

一、熟悉结构

官网地址：http://mpvue.com/mpvue/

二、创建项目

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

三、下载微信开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

四、启动mpvue项目

第五步：创建页面

1. 目录结构
   

pages文件夹下面的每个子文件夹是一个页面，创建新页面时，需要复制pages下面其中一个子文件夹，改文件夹名
在src下的app.json文件，新增字段，这就是这个页面的路由
重启项目
每次新增页面都需要重启项目

配置less/less-loader

所需插件: less less-loader

npm install less less-loader --save-dev 

需配置webpack.base.conf.js,该文件在build文件夹下面

在module->rules中加入 { test: /.less$/, loader: “style-loader!css-loader!less-loader”, },

module:{
	rules:[
		{
			test: /.less$/,
			loader: "style-loader!css-loader!less-loader"
		}
	]
}

配置mpvue安装less/sass出现问题： Module build failed: TypeError: loaderContext.getResolve is not a function原因：

由于mpvue的webpack版本低，less/sass,sass-loader/less-loader安装的版本过高，在【package.json】中，可查看到安装的版本

解决办法：卸载安装的高版本的less,less-loader，降低版本

npm uninstall less less-loader --save-dev
npm install less@3.9.0 less-loader@5.0.0 --save-dev

配置云开发

1. 点击开发者工具的云开发，按照提示操作，开通云开发控制台
2. 配置云开发参数

// app.json
	"cloud": true

// project.config.json
    "cloudfunctionTemplateRoot": "cloudfunctionTemplate",

// 全局main.js
//   env 参数：
//   小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
//   此处请填入环境 ID, 环境 ID 可打开云控制台查看 如不填则使用默认环境（第一个创建的环境）
    wx.cloud.init({
     env: '云环境开发id',
     traceUser: true
   })

//页面使用
	const db = wx.cloud.database()  // 数据库
    const todos = db.collection('article')  // 获取数据库集合
    console.log(111, todos)
    todos.get().then(res => {
      console.log(222, res.data)
    })

结果如下：

使用并配置axios

通过webpack别名（alias）将axios指向axios/dist/axios，在build —> webpack.base.conf.js —> baseWebpackConfig —> resolve — > alias添加'axios':'axios/dist/axios'

alias: {
   'vue': 'mpvue',
   'axios':'axios/dist/axios',
   '@': resolve('src')
 }

axios.defaults.adapter = function (config) {
    return new Promise((resolve, reject) => {
        console.log(config)
         // TODO wx.request(...)
         let data = config.method === 'get' ?  config.params : config.data
         wx.request({
	      url: baseUrl + config.url,
	      method: config.method,
	      data: data ,
	      header: config.headers, // 必传
	      success: (res) => {
	        wx.hideLoading()
	        return resolve(res)
	      },
	      fail: (err) => {
	        wx.hideLoading()
	        return reject(err)
	      },
	      complete: () => {
	        wx.hideLoading()
	      }
	    })
    })
}

配置下拉刷新

全局配置：

// app.json
  windows: {
	"enablePullDownRefresh": true
  }

局部配置：

// main.json
{
  "enablePullDownRefresh": true
}

配置完成后，在.vue文件中与methods同级添加两个方法onPullDownRefresh 和 onReachBottom

methods: {

},
// 下拉刷新
onPullDownRefresh () {
	// wx.hideNavigationBarLoading() // 完成停止加载
	// 停止下拉刷新
    // wx.stopPullDownRefresh()
    // to doing 
    console.log('下拉刷新')
 },
 // 上拉加载
 onReachBottom () {
   // to doing
    console.log('上拉加载')
 },

持续更新中。。。