Mpvue小程序开发项目框架，添加了云开发，mock，request, 一些常用的功能函数和引用示例。
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFor detailed explanation on how things work, checkout the guide and docs for vue-loader.
确保你的微信开发工具是最新版的 小程序云开发文档
在微信开发者工具中点击云开发， 按提示开通云开发功能
在src/config.js配置cloudEnv为你的环境ID，在数据库中新建一个集合demo， 直接在控制台添加一条记录
// `src/pages/index/index.vue`中的查询代码
import config from '@/config';
const db = wx.cloud.database({ env: config.cloudEnv });
db.collection('demo')
.get()
.then(res => {
console.log(res);
})
.catch(console.error);
云函数目录是cloud-functions, 已经建了一个示例函数user，功能是获取用户openId，在user目录运行npm i安装wx-server-sdk，然后在小程序开发工具的编辑器里的user目录上点右键选择上传并部署。
// `src/pages/index/index.vue`中的代码
wx.cloud
.callFunction({ name: 'user' })
.then(res => {
console.log(res);
})
.catch(err => console.error(err));
mock功能目录mock, 使用mockjs, 接口基础路径 /api
<
8252
pre class="notranslate">
const Mock = require('mockjs')
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next) => {
res.json(Mock.mock({
"result": "success"
}
}))
})
添加了SASS支持
http使用fly库，接口定义在src/http/api.js
const api = {
testGet: (params) => request.get(`${host}${apiVersion}/`, params),
testPost: (params) => request.post(`${host}${apiVersion}/home`, params),
testPut: (params) => request.put(`${host}${apiVersion}/home`, params),
testDel: (params) => request.delete(`${host}${apiVersion}/home` + params.id, params),
}
接口挂载到Vue.$http上，调用示例：
// Promise
this.$http.testGet().then(res => {
// console.log(res)
});
//async/await
const res = await this.$http.testGet();
在Vue的原型上挂载了一个bus
// src/main.js
const Bus = new Vue();
Vue.prototype.$bus = Bus;
// 使用
this.$emit('customEvent', {foo: bar})
this.$on('customEvent, data => {
console.log(data)
})
原生组件库如iview, vant, wux等，将dist里需要的组件拷入static目录，注意如果组件有依赖其它组件也需要一起拷入。
之后在页面的main.json里定义组件
{
"navigationBarTitleText": "title",
"usingComponents": {
"i-button": "/static/iview/button/index"
}
}
即可在页面中使用
<template>
<div>
<i-button />
</div>
</template>
│ app.json
│ App.vue
│ config.js
│ env.js
│ main.js
├─common
│ ├─assets
│ └─scss
├─components
├─http
│ api.js
│ http.js
├─pages
│ └─index
│ index.vue
│ main.js
│ main.json
├─store
│ │ index.js
│ │ mutation-types.js
│ └─modules
└─utils
index.js 常用功能函数
login.js 登录相关
request.js 原生request promise化，如果不用fly可以用这个
system.js 硬件相关
url.js url解析
wcache.js storage强化
wx-touch.js 手势操作
- 8080端口被占用情况下，mock接口自动切换新端口
- 登录授权组件