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

2023-08-23 04:51:04 72

H5内嵌富文本编辑器

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

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

$npminstallvue-quill-editorelement-ui--save


.quill-editor{
.ql-container{
min-height:50vh;
}
}
.ql-editorimg{
width:100%;
height:200px;
}



.editor{
width:100%;
height:100vh;
.flex{
display:flex;
}
.flex-1{
flex:1;
}
.btn_box{
position:fixed;
bottom:0;
left:0;
width:100%;
height:50px;
line-height:50px;
z-index:999;
background:#FAFAFA;
box-shadow:0px1px0px0pxrgba(217,217,217,0.5);
border-top:1pxsolid#D9D9D9;
text-align:center;
button{
font-size:16px;
line-height:50px;
margin:0;
padding:0;
border:1pxsolid#D9D9D9;//自定义边框
outline:none;
}
.save_draft{
color:#B3B3B3;
border-right:1pxsolid#D9D9D9;
}
.save_release{
color:#fff;
border:1pxsolid#00DBD2;
background:#00DBD2
}
}
}

使用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来实现。

问题原因解决办法描述子组件接收不到参数错误：正确：修改完布局后不刷新，必须要重新build 将component写到了page文件夹下导致将component写到components文件夹下使用flexbox，设置不换行显示失效必须加上新的属性加上white-space:nowrap; 很不解，white-space:nowrap;是设置文字不换行显示的异步更新数据，不刷新 1.没有使用this.$apply();2.传入子组件时需要:prop.sync="data" 1.没有使用this.$apply();2.传入子组件时需要:prop.sync="data" 无法多次引用同一个组件同一个组件多次引用需要在components中声明不同的id 不使用组件，完全靠数据来管理状态完全靠数据来驱动的话，不知道对性能会不会有很大影响，待测试给data中声明的属性赋值，如果该属性将传入子组件中，提示内存溢出在子组件中申明的props的属性名与传入时的属性名不一致将传入时的属性名和子组件中接收的属性名保持一致新建page或component，提示notdefined 重命名导致将dist文件夹删除，运行wepybuild，重新生成dist文件夹微信授权多个权限问题在真机上请求接口没反应，必须开启调试模式才行的问题开发时开启的不校验域名配置，真机上运行除调试模式外需要域名配置在微信开发平台配置请求域名上传图片只能单个上传不支持多张同时上传循环上传真机上本地图片不显示写components中的组件引用图片路径的问题图片路径要写使用这个组件的page的相对路径使用wxParse后，使用autoprefixer打包报错未知将wxParse.wxss改为wxParse.scss input多次设值不改变的问题未知使用bindinput事件return值重新设置后台接受中文参数乱码需要转码使用encodeURI("参数")转码 checkbox设置大小使用class设置transform:scale(0.6); 引用scss样式文件报错