微信小程序踩坑

发布时间:2019-06-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序踩坑脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本次开发微信小程序第一个版本,遇到如下问题:

关于小程序里引入iconfont

原有H5项目中iconfont.css里@font-face 引用的ttf等文件在小程序中不支持(小程序里请求资都是https),
解决方法:知乎上有篇文章建议使用工具将ttf文件转化为base64格式存储在本地; 具体可参考https://zhuanlan.zhihu.com/p/...

关于小程序里引入underscore

直接引入underscore会报错,需要修改underscore源码;
underscore源码里,外层形式如下:

//console.LOG(this)
(function() {
    // Establish the root object, `window` in the browser, or `exports` on the server.
    VAR root = this;
}.call(this))

但是在小程序里,打印this结果是undefined.
可以修改underscore源码:

(function() {
    // Establish the root object, `window` in the browser, or `exports` on the server.
    var root ={}; 
})(this)

这样就可以在js里引入underscore了。

关于小程序里引用视频和图片url:

由于请求数据返回的图片地址或者视频地址通常不带协议头,都是例如下面的格式:

//files.iwjw.COM/housecheckpc/2016/10/20/057e7f05b3684008b2d29a5217440842.s.iwjw

小程序里需要手动加入https协议头,否则无法加载图片或者视频。

关于小程序在真机预览时IOS和安卓机样式差别:

某些样式在开发者工具、安卓真机、ios真机上,样式有差距;同样设置几行文本,在IOS和安卓机上撑起来的高度是不一致的。开发者工具,ios,安卓上使用不同的内核,因此绘制页面时,样式差异较大。常常是ios样式调整好了,在安卓上查看相差一像素,反之,在安卓上调整好了,Ios上相差一像素。

关于绑定事件,取数据时target与currentTarget的区别

注意event.target.dataset与event.currentTarget.dataset的区别:

  • target.dataset是取源组件上设置的数据集合(触发了事件的组件)
  • currentTarget.dataset是取当前组件上设置的数据集合(绑定事件的组件)。

关于将视频嵌入到swiPEr组件

这里的应用场景是:
第一张是视频,第二张往后是图片。要求全部能轮播。在第一张时可以点击按钮播放视频。
直接应用swiper组件存在的问题:IOS手机上播放视频之后就不能继续切换轮播图片。安卓手机则可以。
尝试了给video组件绑定事件、在video组件上添加按钮切换图片,但在小程序里都不能实现,按钮设置高的z-index甚至不能悬浮于video组件上。
解决:修改交互逻辑,播放视频采用dialog模式(视频垂直居中,其余是蒙层),播放完毕回到图片轮播模式。

关于小程序使用地图

这是使用场景:

@H_695_126@微信小程序踩坑

两种方法:一是使用Map组件。二是可以使用wx.openLocation的方法。
在使用方法一时遇到了坑:
1.页面底部放置了悬浮的footer显示信息。结果在划过地图map组件时,会被map组件盖住。尝试降低map组件z-index,失败。
2.map组件重新渲染时容易有问题。map组件前面有两个模块是异步加载的。当异步加载数据撑开容器高度时,地图组件会飘出去,没有重新定位成功。
如果使用方法二,需要新开一个page。

2018.2.28更新:map, canvas,video, textarea 是由客户端创建的原生组件,原生组件的层级是最高的。所以无法覆盖。

关于小程序里上拉加载

列表页上拉加载几页数据后,快速向上回滚,会出现白屏;暂时未解决。

关于无法获取appservice

首次使用微信开发者工具时,如果打开了翻墙软件,会报错,提示无法获取用户信息,这时要先关掉翻墙软件

总结小程序的那些限制:

  • 并发request请求不能超过5个,更新为10个
  • 程序本身代码资源文件大小限制在1MB之内,更新为2MB;
  • Page.PRototype.setData单次设置的数据不能超过1024KB;
  • 手机预览时,尽量将微信客户端升级到最新, 官网要求6.3.27及以上,测试安卓机微信版本6.3.31也是不能预览的;后统一升级到6.5.3版本。
  • 绑定开发者人数、体验者人数也有限制;
  • 请求里合法域名有个数限制;
  • 页面内跳转不能超过5级;

关于微信小程序与H5区别可以参看:
https://zhuanlan.zhihu.com/p/...

总体而言,小程序开发上手比较简单,但是由于多数使用封装好的组件,或使用小程序提供的API,当出现bug时,不易定位,不易修改。

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序踩坑全部内容,希望文章能够帮你解决微信小程序踩坑所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。