微信小程序踩坑

编辑：宝哥软件园来源：互联网时间：2021-12-17

新天龙八部

评分

笔者为该网站会员yuqy开发了第一版微信小程序，遇到了以下问题：

关于小程序里引入iconfont

小程序不支持原始H5项目中@font-face在iconfont.css中引用的ttf和其他文件(小程序中请求的所有资源都是https)。解决方案：知乎上有一篇文章建议用工具把ttf文件转换成base64格式，存储在本地；详情请参考https://zhuanlan.zhihu.com/p/。

关于小程序里引入underscore

直接引入下划线会报错，需要修改下划线源代码；在下划线源代码中，外层的形式如下：

//console . log(this)(function(){//在浏览器中建立根对象，` window '，或者在服务器上建立` exports '。var root=this}.调用(this))但是在applet中，打印这个的结果是未定义的。您可以修改下划线源代码：

(function() { //在浏览器中建立根对象，` window '，或者在服务器上建立` exports '。var root={ }；})(这个)这样就可以在js中引入下划线了。

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

由于请求数据返回的图片地址或视频地址通常没有协议头，因此采用以下格式，例如：

//files . iwjw . com/home eck PC/2016/10/20/057 e7f 05b 3684008 b2d 29 a 5217440842 . s . iwjw小程序需要手动添加https协议头，否则无法加载图片或视频。## #关于ios和安卓风格在实机预览小程序时的区别：有些风格在开发者工具、安卓实机和IOS实机中是不一样的；同样一组文本行，IOS和安卓上支持的高度不一致。开发者，ios和安卓使用不同的内核，所以在绘制页面的时候，风格也是大相径庭。通常，ios风格会进行调整，在安卓系统上观看时，差异为一个像素。相反，是在Android上调整的，和Ios上差一个像素。

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

注意event.target.dataset和event.currentTarget.dataset之间的区别：target.dataset是源组件上设置的数据集，currentTarget.dataset是当前组件上设置的数据集。

关于将视频嵌入到swiper组件

这里的应用场景是：第一个是视频，第二个是图片。所有需求都可以轮换。点击按钮播放第一个视频。直接应用swiper组件的问题：在IOS手机上播放视频后，无法继续切换轮播图片。安卓手机可以。尝试将事件绑定到视频组件，并在视频组件上添加按钮切换图片，但在小程序中无法实现，按钮设置较高的z-index甚至无法在视频组件上浮动。解决方法：修改交互逻辑，以对话框模式播放视频(视频垂直居中，其余部分屏蔽)，播放完毕返回图片轮播模式。

关于小程序使用地图

这是使用场景：

微信小程序踩坑记(图1)

两种方法：一种是使用map组件。第二，可以使用wx.openLocation的方法。使用方法的时候遇到了一个坑：1。页面底部有一条暂停的页脚显示消息。当结果通过地图组件时，它将被地图组件覆盖。尝试降低地图组件z索引失败。2.重新渲染2.map组件时出现问题。地图组件前面的两个模块异步加载。当异步加载数据以打开容器的高度时，地图组件将在没有成功重新定位的情况下浮动。如果使用方法二，则需要打开一个新页面。