mpvue创建包含fly, vuex, echarts,日历组件的初始化小程序工程

原创 守候你的季节 随笔 JavaScript 346阅读 2018-07-18 16:08:25 举报

小程序mpvue初始化工程地址

在mpvue中使用flyio发起网络请求

  1. 安装

    npm install flyio -S

  2. 配置fly
    导入fly

配置请求基地址以及拦截器

挂载到Vue原型

实例

配置vuex

安装

npm install vuex -S

src目录下创建store目录
目录结构

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

src目录main.js中导入并挂载到Vue原型

将vuex中的数据持久化到本地 (使用vuex-persistedstate)

  • 安装vuex-persistedstate

npm install vuex-persistedstate -S

  • 在store目录下的index.js中配置插件

配置echarts

下载 echarts-for-weixin
把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。
ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-canvas。
修改 ready 为异步获取数据。

为 init 添加接收 options 传参

创建 pages/bar 页面,目录如下:

在 main.js 中引入微信小程序的自定义组件

在 app.vue 中添加 options、template 等相关配置

适配mpvue平台的的微信小程序日历组件(mpvue-calendar)

安装

npm i mpvue-calendar -S

使用

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

示例

图片
日历组件

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复