微信小程序踩坑

   <p>本次开发微信小程序第一个版本，遇到如下问题：</p>    <h2>关于小程序里引入iconfont</h2>    <p>原有H5项目中iconfont.css里@font-face 引用的ttf等文件在小程序中不支持（小程序里请求资源都是https），</p>    <p>解决方法：知乎上有篇文章建议使用工具将ttf文件转化为base64格式存储在本地； </p>    <h2>关于小程序里引入underscore</h2>    <p>直接引入underscore会报错，需要修改underscore源码；</p>    <h2>关于小程序里引用视频和图片url：</h2>    <p>由于请求数据返回的图片地址或者视频地址通常不带协议头，都是例如下面的格式：</p>    <pre>  //files.iwjw.com/housecheckpc/2016/10/20/057e7f05b3684008b2d29a5217440842.s.iwjw</pre>    <p>小程序里需要手动加入https协议头，否则无法加载图片或者视频。</p>    <p>##关于小程序在真机预览时IOS和安卓机样式差别：</p>    <p>某些样式在开发者工具、安卓真机、ios真机上，样式有差距；同样设置几行文本，在IOS和安卓机上撑起来的高度是不一致的。开发者工具，ios,安卓上使用不同的内核，因此绘制页面时，样式差异较大。常常是ios样式调整好了，在安卓上查看相差一像素，反之，在安卓上调整好了，Ios上相差一像素。</p>    <h2>关于绑定事件，取数据时target与currentTarget的区别</h2>    <p>注意event.target.dataset与event.currentTarget.dataset的区别：</p>    <p>target.dataset是取源组件上设置的数据集合，currentTarget.dataset是取当前组件上设置的数据集合。</p>    <h2>关于将视频嵌入到swiper组件</h2>    <p>这里的应用场景是：</p>    <p>第一张是视频，第二张往后是图片。要求全部能轮播。在第一张时可以点击按钮播放视频。</p>    <p>直接应用swiper组件存在的问题：IOS手机上播放视频之后就不能继续切换轮播图片。安卓手机则可以。</p>    <p>尝试了给video组件绑定事件、在video组件上添加按钮切换图片，但在小程序里都不能实现，按钮设置高的z-index甚至不能悬浮于video组件上。</p>    <p>解决：修改交互逻辑，播放视频采用dialog模式（视频垂直居中，其余是蒙层），播放完毕回到图片轮播模式。</p>    <h2>关于小程序里上拉加载</h2>    <p>列表页上拉加载几页数据后，快速向上回滚，会出现白屏；暂时未解决。</p>    <h2>关于无法获取appservice</h2>    <p>首次使用微信开发者工具时，如果打开了KX上网软件，会报错，提示无法获取用户信息，这时要先关掉KX上网软件</p>    <h2>总结小程序的那些限制：</h2>    <ul>     <li> <p>并发request请求不能超过5个；</p> </li>     <li> <p>程序本身代码资源文件大小限制在1MB 之内；</p> </li>     <li> <p>Page.prototype.setData单次设置的数据不能超过1024KB;</p> </li>     <li> <p>手机预览时，尽量将微信客户端升级到最新, 官网要求6.3.27及以上，测试安卓机微信版本6.3.31也是不能预览的；后统一升级到6.5.3版本。</p> </li>     <li> <p>绑定开发者人数、体验者人数也有限制；</p> </li>     <li> <p>请求里合法域名有个数限制；</p> </li>     <li> <p>页面内跳转不能超过5级；</p> </li>    </ul>    <p>总体而言，小程序开发上手比较简单，但是由于多数使用封装好的组件，或使用小程序提供的API，当出现bug时，不易定位，不易修改。</p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008063442</p>    <p> </p>