详解wepy开发小程序踩过的坑(小结)

H5内嵌富文本编辑器

创新互联-专业网站定制、快速模板网站建设、高性价比平桥网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式平桥网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖平桥地区。费用合理售后完善，10年实体公司更值得信赖。

微信小程序没有支持的原生富文本组件，可以通过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: '数据' })

小程序内代码：

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

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