小程序踩坑记录

记录自己在开发微信小程序上遇到的一些坑

也是刚刚接触微信小程序没多久,觉得有必要记录下自己在工作中遇到的各种问题,以方便后续的回顾,古人语:温故而知新,虽然我不怎么看好小程序的发展,除非它能走出自己的那个封闭开发环境。

swiper 轮播组件

今天遇到一个场景,需要竖向的轮播显示信息,可是在官方的开发文档上来回看了几遍,也没有看到如何让swiper组件竖向滚动
小程序踩坑记录
其实swiper是支持竖向滚动的,只要添加属性’vertical=”true“‘就可以了,但不知道为什么官方没有写到文档中,可能有些小BUG吧。

modal标签

在前面版本的官方文档中,我们可以在组件中找到modal这个组件,是一个非常方便的自定义内容的模态弹窗,但在后续的版本更新中使用wx.showModal()这个API取代了modal组件,导致了在实际开发中会遇到这种情况在代码中使用modal组件作为弹窗,在微信web开发者工具中,该组件是可以正常使用的,不会影响到交互,但在真机测试时会发现该组件无法正常工作,因此在后续的开发中应当使用wx.showModal()取代modal组件
小程序踩坑记录

真机调试的小问题

在真机进行调试的时候会有无法获取数据的问题,但是如果打开调试模式发现又能正常的获取数据,造成这一点的原因是因为在调试模式下是不会对服务器地址以及lts版本进行检测,在非调式模式下则会检测这些数据,因此在真机调试的时候尽量将相关需要的服务器配置到微信小程序开发者服务器中

真机样式不统一

在开发工具上的效果并不能代表实际在真机上的效果,建议完成一块的时候就在真机上预览一下,避免后续的麻烦

文本溢出

这个是常见的额需求,就是文字超出显示省略号的需求

1
2
3
4
5
6
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;

模板消息相关

开发工具上无法测试获取formId,在开发工具上获取到的是模拟数据字符串,无法使用
在IOS真机上获取到是一串字符串:如2688a323b892ef59a37191aa0a879825
在安卓机上获取到的是当前触发时间的时间戳:如1492511423760

background-image

背景图属性无法使用本地资源,可以使用网络资源,或这将图片转为base64使用

第三方开发工具的使用小Tips

个人对于微信的web开发工具不怎么感冒,习惯了黑色风格的界面,看到那一片白白的真心难受,所以在网上找了些第三方编译工具,也更加符合自己的编码习惯,在使用第三方构建工具时遇到了个这样的问题,使用第三方的编译工具对代码进行ugly时,会造成form组件的bindsubmit事件无法正常响应。对于处理这个问题的加单粗暴的额方法就是把wxml文件不通过第三方工具进行ugly而是通过微信的开发工具在上传代码时进行ugly

支付流程

相对来说小程序中关于支付这块,前台需要做的就是调用 wx.requestPayment()接口而已,主要的工作都是在后台那边完成的,通常的套路是:用户发起支付前,前台吧需要支付的内容和金额发送给后台,后台在微信的服务器请求支付接口,获取到必要的参数后,返回到前台,前台调用小程序支付接口完成支付。

ssl证书

ssl证书对于网络请求有一定的影响,这一点在ios中十分明显,如果ssl证书的颁发方不在ios的信任列表内,则会造成无法进行网络请求,’wx.request()’会执行’fail()’。所以为了不比必要的问题,证书就尽量采用付费的,或者使用腾讯云或阿里云颁发的免费证书。

小程序重新拉起授权功能

微信基础库 1.1.0 开始支持改功能
‘wx.openSetting()’ 调用该接口会查看到之前对用户发起的授权设置信息,通过引导用户修改这里的授权设置,可以在不删除小程序的情况下重新拉起某些权限的获取

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 记录自己在开发微信小程序上遇到的一些坑
  2. 2. swiper 轮播组件
  3. 3. modal标签
  4. 4. 真机调试的小问题
  5. 5. 真机样式不统一
  6. 6. 文本溢出
  7. 7. 模板消息相关
  8. 8. background-image
  9. 9. 第三方开发工具的使用小Tips
  10. 10. 支付流程
  11. 11. ssl证书
  12. 12. 小程序重新拉起授权功能