微信小程序踩过的一些坑
前言
迄今为止,正儿八经的上线了真正意义上的程序,但是这个小程序却着实不小。
之所以不小,是因为这个类似于社区的小程序,已经做了大部分都有的功能了
举例说明,具体的一些功能点:
- 1、帖子列表页面:会有的功能:滚动加载,下拉刷新等
- 2、发帖页面:图文发表,视频上传
- 3、评论页面,图文评论
- 4、帖子详情页:富文本解析,点赞,回复帖子,回复评论,关注,收藏,朋友圈分享,分享
- 5、任务中心,积分获取,兑换。
- 6、小程序提现到零钱(即将上线)
细数以下几个坑(上)
1、富文本
这个说来就有非常坑,作为一个帖子,自己创建的还好,如果是导入的富文本,对于小程序的体验真的是苦不堪言,寻求了多种方法以后,其中甚至有自己过滤标签,不过表现 形态不是很好,最终选择了 wxParse
社区里也专门有人对这个开源项目,设计出来了小程序插件,不过建议最好还是用这个项目引入,毕竟有些代码改起来方便,不是每个解析富文本的需求都刚好满足,可以 适当的调整下源代码。
相关截图
出自于 wxParse
值得注意的是,在某些搜索结果页面,可能也需要用到富文本解析进去搜索结果标红,因为前端去一个个匹配,还是太为繁琐,这个时候就要用到 wxParse多数据循环使用方法
例子上举例的是数组模式,实际上键值对的对象也是可以,只要经过一些处理便可,也不是很麻烦 。
2、图片上传
参考问题来源chooseImage当sizeType为compressed时怎么获取压缩图片
关于图片上传有两个小问题
1、真机上的时候,不论怎么打印压缩后的结果都会发现没有压缩。
这个时候……不要奇怪,因为开发者工具上确实无法看到真实压缩后的结果,要放在真机上联调的时候,才能打印出来具体压缩后的大小 ,虽然不是很难的问题 ,但却着实苦恼了一阵。
2、上传过后,显示预览图的速度比较慢。
这个是自己作死遇到的,为了图方便,直接拿了七牛云上面的链接地址渲染img,但实际体验比想象中的要差的多,最好改善的方案,还是拿choose后的本地图片渲染,速度快很多。
3、video始终处于最高级
当初在做弹框的时候,无论怎么设计弹窗,都无法逾越video这座大山,最后发现不管使用什么标签,设置啥层级都没有啥用。
选择的办法,设计一个假装视频暂停的画面(黑屏),把真实的video移走,等弹窗消息的时候,再重新移回来。
这个方案至今觉得还是挺low的,有好的方案的可以建议下 。
4、textarea获取焦点时,页面没有上推
对,这是个已知问题,不用再去各种搜索,坐标2018-9-3,还没有修复…………各种怨念。(一部分手机是支持上推的)
细数以下几个坑(下)
5、小程序海报二维码的绘制
只要小程序在功能都开始完善的差不多的时候,无可避免的都会遇到这个小程序海报二维码的问题,这个时候就是各种神笔马良绘制的时候。
这个时候,就会遇到如何隐藏当前canvas的问题,有很多种方案,最后选择的时候,把canvas移出屏幕之外,跟之前video用的是差不多的方法。
至于二维码的绘制,需求量大的,推荐文档的中的B方案。
还有一点比较坑的是,识别二维码一定要是已经发布的小程序,假如小程序从来没有发布过,无论你怎么神通广大都是调试不成功。
6、小程序分享
已经发出公告取消成功回调了
详细见 小程序、网页及App分享功能调整
未完……不知道是否待续
长时间没有写博客了,这段时间都一直浸淫在小程序当中,有愿意讨论的童鞋欢迎,目前小程序已稳定上线2个多月,社区类的小程序。
转载请注明原文地址 https://www.cnblogs.com/star-wind/p/9581055.html:谢谢
我的github,欢迎拍砖
微信小程序踩过的一些坑的更多相关文章
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- 微信小程序踩坑之前端问题处理篇
近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在 ...
- 微信小程序踩坑
微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示
- 微信小程序踩坑记
1:微信小程序之去掉横向滑动滚动条 /** 去除横向滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 2: ...
- 微信小程序踩坑- tabBar.list[3].selectedIconPath 大小超过 40kb
重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐 ...
- 微信小程序踩坑日记1——调用微信授权窗口
0. 引言 微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口.需要用户主动点击按钮,触发授权窗口. 那么,在我实践过程中,出现了以下问题. . 无法弹出授权窗口 . 希望在用户已经授权 ...
- 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑
公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...
- 微信小程序那些令人眼泪汪汪的坑儿
前言 最近做了一个麻雀虽小,五脏俱全的微信小程序项目.一看就会,一用就废的小程序.有些坑真的坑的你两眼泪汪汪.我就爱干前人栽树后人乘凉的事儿,看到文章的你,也许是同道中人,相视一笑:亦或是小程序外围人 ...
随机推荐
- 使用js做LeetCode
概述 无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...
- HoloLens开发手记 - 手势输入 Gesture input
手势是HoloLens三个首要输入形式之一.一旦你使用凝视定位了一个全息图像,手势允许你与它交互.手势输入允许你使用手或者点击器原生地与全息图像交互. 手势之外,你也可以在应用中使用语音输入来交互. ...
- Tensflow的targmax函数
一.函数: argmax( input, axis=None, name=None, dimension=None, output_type=tf.int64 ) 简单的说,tf.argmax就是返回 ...
- MySQL笔记(7)---事务
1.前言 前面具体讲了MySQL中的锁实现的方式,解释了是如何保证数据在并发情况下的可靠性,并提到了事务REPETABLE READ和READ COMMITTED,解释了一下这两种事务的不同.本章讲具 ...
- Django--cookie操作
day74 会话跟踪技术 什么是会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而 ...
- Eclipse 项目导入 Android Studio 导致的乱码问题
最近有一个 Eclipse 项目导入 Android Studio 1.4 时出现乱码,Build 提示 Error:(38, 5) 閿欒: 缂栫爜UTF-8鐨勪笉鍙槧灏勫瓧绗?. 源代码是 GB ...
- Python基础之带你快速掌握列表的常用方法
append 前面说过列表是一种 内容可改变的 对象. append方法就会改变列表的内容,在后面添加一个元素 比如 a = [1, 2, 3.14, 'hello'] # append 之后,a就变 ...
- 从零开始学 Web 之 ES6(六)ES6基础语法四
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 120分钟React快速扫盲教程
在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...
- springboot+cloud 学习(六)Docker
注:由于本人用的是window10系统,docker的版本是Docker Community Edition(Docker CE ). 什么是Docker 按官网的话说,Docker是一个世界领先的容 ...