热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要介绍了详解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: '数据' })

小程序内代码:


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,提示not defined
重命名导致
将dist文件夹删除,运行wepy build,重新生成dist文件夹
微信授权多个权限问题
在真机上请求接口没反应,必须开启调试模式才行的问题
开发时开启的不校验域名配置,真机上运行除调试模式外需要域名配置
在微信开发平台配置请求域名
上传图片只能单个上传
不支持多张同时上传
循环上传
真机上本地图片不显示
写components中的组件引用图片路径的问题
图片路径要写使用这个组件的page的相对路径
使用wxParse后,使用autoprefixer打包报错
未知
将wxParse.wxss改为wxParse.scss
input多次设值不改变的问题
未知
使用bindinput事件return值重新设置
后台接受中文参数乱码
需要转码
使用encodeURI("参数")转码
checkbox设置大小
使用class设置transform: scale(0.6);
引用scss样式文件报错
标签解析出错
在中注明使用类型
input设置值之后不显示,必须获取焦点后才会显示,失焦后又会消失
设置了text-align: 'right'
在input外层包一层view,然后为view设置固定宽度,注意不能为100%

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 构建Python自助式数据查询系统
    在现代数据密集型环境中,业务团队频繁需要从数据库中提取特定信息。为了提高效率并减少IT部门的工作负担,本文探讨了一种利用Python语言实现的自助数据查询工具的设计与实现。 ... [详细]
  • Eclipse 开发环境配置指南:从下载到免安装配置
    Eclipse 是一个广泛使用的开源Java开发环境,掌握其正确的安装与配置方法对于初学者至关重要。本文将详细介绍如何下载、安装及配置Eclipse,确保您的开发环境搭建顺利。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • 本文详细探讨了在Web开发中常见的UTF-8编码问题及其解决方案,包括HTML页面、PHP脚本、MySQL数据库以及JavaScript和Flash应用中的乱码问题。 ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • 我在尝试将组合框转换为具有自动完成功能时遇到了一个问题,即页面上的列表框也被转换成了自动完成下拉框,而不是保持原有的多选列表框形式。 ... [详细]
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • 如何安装FARO Scene 2018?详尽的永久授权指南
    FARO Scene 2018 是一款专为专业用户设计的3D点云处理与管理软件。该软件支持从高精度3D激光扫描设备获取的大规模3D扫描数据的查看、管理和处理。本文将详细介绍如何安装及激活FARO Scene 2018的永久许可。 ... [详细]
  • 本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ... [详细]
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
author-avatar
杨兰波欣
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有