wepy开发小程序踩过的坑

H5内嵌富文本编辑器

微信小程序没有支持的原生富文本组件，可以通过web-view内嵌H5实现富文本编辑功能，起初使用的是wangEditor富文本编辑器，因为项目使用的是七牛云存储，wangEditor在pc端上传是没有问题的，但在在移动端调用不了本地图片，于是换了个功能强大二次开发较强的富文本编辑器vue-quill-editor,更多请参考官方文档， 基于此对上传图片进行二次开发。

七牛云 + elementUi + vue-quill-editor上传图片和富文本

$ npm install vue-quill-editor element-ui --save
复制代码

复制代码

复制代码

使用web-view组件传递数据的问题

小程序内嵌网页向小程序回传数据时，尽量不要使用路由传参，比如富文本内容会自动截取掉src等号之后的字符串，应使用wx.miniProgram.postMessage()方法向小程序发送数据

注意：官方描述--网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息

也就是说只有在小程序后退、组件销毁、分享时才会触发，若无效可以调换下顺序就可以了

内嵌的网页代码：

wx.miniProgram.navigateBack({delta: 1})
wx.miniProgram.postMessage({ data: '数据' })
复制代码

小程序内代码：

<web-view src="{{url}}" bindmessage="handleGetmsg">web-view>
复制代码

methods = {
    handleGetmsg (ev) {
      this.data = ev.detail.data[0]
      this.$apply()
    }
}
复制代码

总结一下：wepy开发最多的问题就是数据缓存，组件双向绑定最好使用twoWay: true来实现。