mpvue 接入方式

mpvue 框架文档请查看：http://mpvue.com/mpvue/quickstart/

1. 安装

把 Painter 核心代码放在 mpvue 框架的 static 目录下

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git static/painter

2. 引入组件

在需要使用 Painter 的页面的 main.js 中加入 'painter': '/static/painter/painter'

import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
export default {
 config: {
   navigationBarTitleText: 'demo',
   usingComponents: {
     'painter': '/static/painter/painter'
   }
 }
}

3. 使用组件

在页面的 index.vue 中

<painter :customStyle="customStyle" :imgOK="onImgOk" :palette="template" />

4. 绘制

以 palette/card.js 为例子导入 painter，demo 代码如下

<template>
   <div>
       <painter :customStyle="customStyle" @imgOK="onImgOk" :palette="template" />
       <button style="margin-top:40rpx" @click="save">保存</button>
   </div>
</template>

<script>
import Card from '../../palette/card'

export default {
 data () {
   return {
     customStyle: 'margin-left:40rpx',
     template: new Card().palette()
   }
 },
 methods: {
   save () {
     console.log('on save click')
   },
   onImgOK (e) {
     console.log(e)
   }
 }
}
</script>

Q&A

• SyntaxError: Unexpected token export/import？

es5用的是jsCommon，不支持import语法。开启项目设置的es6转es5即可。

• 预览模式的真机在请求图片时网络错误？

原因是预览模式下会校验域名。如果需要查看真机的效果，请使用远程调试模式，或者把图片的地址设为自己的安全域名下的地址。

demo地址：https://github.com/Kujiale-Mobile/Mpvue-Painter-Demo.git