菠菜平台出租与mpvue创建

在mpvue中使用flyio发起网络请求
安装菠菜平台出租 [企俄：2152876294] 网址diguaym.com

npm install flyio -S

配置fly
导入fly

let Fly = require('flyio/dist/npm/wx')
let fly = new Fly()
1
2
配置请求基地址以及拦截器

// 配置请求基地址
fly.config.baseURL = '/wechat'

// 添加请求拦截器
fly.interceptors.request.use((request) => {
console.log(request)
return request
})

// 添加响应拦截器
fly.interceptors.response.use(
(response) => {
console.log(response)
return response
},
(err) => {
return Promise.reject(err)
}
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
挂载到Vue原型

Vue.prototype.$http = fly // 将fly实例挂在vue原型上,在每个vue文件中可以通过this.$http来进行访问
1
实例

export default {
created () {
// 调用API从本地缓存中获取数据
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

console.log('app created and cache logs by setStorageSync')

},
mounted () {
this.$http.get('/test').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
配置vuex
安装

npm install vuex -S

store目录中index.js主要代码(与vue工程一致)

import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)

const state = {
test: 0,
userInfo: {}
}

export default new Vuex.Store({
state,
getters,
actions,
mutations
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
src目录main.js中导入并挂载到Vue原型

import store from './store'
Vue.prototype.$store = store // 将store挂载在Vue的原型上,这样可以在vue文件中访问this.$store
1
2
将vuex中的数据持久化到本地（使用vuex-persistedstate）

安装vuex-persistedstate

npm install vuex-persistedstate -S

在store目录下的index.js中配置插件
import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'

import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)

const state = {
test: 0,
userInfo: {}
}

export default new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: [
createPersistedState({
storage: {
getItem: key => wx.getStorageSync(key),
setItem: (key, value) => wx.setStorageSync(key, value),
removeItem: key => wx.clearStorage()
}
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
配置echarts
下载 echarts-for-weixin
把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。
对 ec-canvas/ec-canvas.js 进行小调整，考虑提 pr 到 ec-canvas。
修改 ready 为异步获取数据。

ready: function () {
// 异步获取,将原有代码放入setTimeout中
setTimeout(() => {
if (!this.data.ec) {
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '

'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
return;
}

if (!this.data.ec.lazyLoad) {
this.init();
}
}, 10)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
为 init 添加接收 options 传参

var query = wx.createSelectorQuery().in(this);
query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') {
this.chart = callback(canvas, res.width, res.height);
}
else if (this.data.ec && this.data.ec.onInit) {
this.chart = this.data.ec.onInit(canvas, res.width, res.height);
}
else if (this.data.ec && this.data.ec.options) {
// 添加接收 options 传参,将最后这个else if添加到原有代码后面
const ec = this.data.ec

      function initChart(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        chart.setOption(ec.options);
        return chart;
      }
      this.chart = initChart(canvas, res.width, res.height);
    }
  }).exec();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
创建 pages/bar 页面，目录如下：

.
└── pages
└── bar
├── index.vue
└── main.js
1
2
3
4
5
在 main.js 中引入微信小程序的自定义组件

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

// 添加 config json
export default {
config: {
// 这儿添加要用的小程序组件
usingComponents: {
'ec-canvas': '../../../static/ec-canvas/ec-canvas'
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在 app.vue 中添加 options、template 等相关配置

export default {
data () {
return {
ec: {
// 传 options
options: options,
}
}
}
}

</script>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
适配mpvue平台的的微信小程序日历组件(mpvue-calendar)
安装

npm i mpvue-calendar -S

使用

import Calendar from 'mpvue-calendar' 引入组件
components中注册组件Calendar
template中使用组件 <Calendar />

示例

:value="value"
@next="next"
template>
:months="months"
:value="value"
@next="next"
@prev="prev"lunar
clean
@select="select"
br/>:events="events"
lunar
clean
@select="select"
ref="calendar"br/>@selectMonth="selectMonth"
@selectYear="selectYear"
:arrowLeft="arrowLeft"
/>
<button @click="setToday">返回今日</button>
</div>
</template>

export default {
data () {
return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
disabledarr: ['2018-6-27','2018-6-25'],
value: [2018,6,7],
begin:[2016,1,1],
end:[2020,1,1],
events: {'2018-6-7':'今日备注', '2018-6-8':'一条很长的明日备注'},
arrowLeft: arrowLeft
}
},
components: {
Calendar
},
methods: {
selectMonth(month,year){
console.log(year,month)
},
prev(month){
console.log(month)
},
next(month){
console.log(month)
},
selectYear(year){
console.log(year)
},
setToday(val,val1,val2) {
this.$refs.calendar.setToday();
},
select(val, val2) {
console.log(val)
console.log(val2)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
图片
日历组件

菠菜平台出租与mpvue创建

猜你喜欢