lanbos'blog

微信公众号开发问题总结(一)

近期连续开发了几个微信公众号的项目并且和甲方配合很难,趟坑无数。罗列如下:

前端技术栈选择(非技术同学可以忽略不看)

没有使用单纯的SPA开发方式,是多页面和单页面混合开发方式。~webpack对于多页面项目并不友好~,而且由于之前的项目使用了构建工具fis3,也对其比较了解,所以总体项目构建方式为fis3+vue+less的平滑过渡方案,并自己魔改了一个网上的脚手架,涉及到npm脚本直接写了简单的bash或者python,这套脚手架方案不推荐复用了,随后会弄一个webpack多页面的解决方案,但总体思想是模块化和组件化,js模块、vue组件和less文件还是可以在今后的项目中复用。脚手架地址如下:
https://gitee.com/lanbos_document/vue_fis3_ts_less/tree/vuex/
vue的ui框架使用了cube-ui(滴滴的ui组件库)

注:最新项目使用了webpack完成了对多页面项目的搭建

vue+better-scroll(非技术同学可以忽略不看)

为保证更好的滑动体验,使用了cube-ui scroll模块。首先需要引入对应的样式文件,并且

  1. 需要给父级一个很大的固定高度(window.innerHeight)
  2. 设置css:
    1
    2
    3
    .cube-scroll-wrapper{
    height: 100%;
    }

android手机当字体小于12px时会导致文字整体偏上 (设计同学敲黑板)

(http://imweb.io/topic/5848d0fc9be501ba17b10a94):

1
<div class="container"><span class="content">testtesttesttesttest</span></div>

1
.container { display: table; }.content { background-color: gray; font-size: 10px; display: table-cell; vertical-align: middle; }

内嵌一层,并用table-cell来解决(不好使,测试了各种方式无法解决,尽量不要使用12px以下的文字)

微信jssdk版本 (非技术同学可以忽略不看)

把jssdk更新到1.3.1版本,微信官方文档上的1.1版本很多功能不完善,并没有提供新版本的更新说明,尝试找到了1.3.1版本,更新后满足了很多Android上之前没有的功能。

1
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.1.js"></script>

解决IOS微信webview后退不执行JS的问题(非技术同学可以忽略不看)

1
2
3
4
5
6
      //解决IOS微信webview后退不执行JS的问题
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};

动画

我们可以满足甲方提出的大多数动画效果,但是要明白复杂的动画需要使用逐帧动画技术,即需要设计同学做出动画的每一帧,我们使用css3动画技术进行播放。为保证动画流畅一秒大约为8~12帧,需要设计同学大量的工作,并且要与前端开发的配合调试。动画越复杂需要图片数量越多,会导致网页加载等待时间长,耗费用户大量流量等问题。

声音和震动

除了动画,甲方提出了在页面中加入声音和震动的需求。但是这些会涉及到各种手机的兼容性问题。(1代表支持,0代表不支持)

安卓机 苹果机
声音播放 1 1
震动 1 0
声音自动播放 1 0
声音叠加 1 0

(注意:iPhone上声音自动播放的问题可以借助微信jssdk在wx.ready的回调函数中实现)
iphone只支持一次播放一个声音,不允许同时播放多个声音。总之iphone上对多媒体交互限制性比较严格,

具体有文献如下:
https://www.ibm.com/developerworks/cn/web/wa-ioshtml5/index.html。

对此我们采用优雅兼容的方式,判断出用户的手机类型,对应使用不同的处理方式,只能尽量保证体验一致。

x5内核对用户http协议的代理问题,无法获取Android用户位置问题

当前越来越多的网站使用了更安全的https协议,如果没有使用https协议的话微信(腾讯x5浏览器内核)会私自代理你的网络请求,导致无法获取用户位置等问题。(微信浏览器内核(QQ浏览器X5内核)在用户不知情情况下代理访问http页面)。而且下一步微信可能会效仿苹果(也是国际上的趋势)必须要求在其内使用https协议,否则网页会被列为不安全网页,甚至不允许访问。

设计时对文案长短和数字长短的考虑

这是前端和设计师长久以来一直面对的问题了,在开发和设计时要对大数字和很长的文案有预估。较长的文案有折行和用省略号表示的情况出现,要有心理预期。对于非常大的数字,随后会写个模块封装一下万,千万,和亿的显示(关于阿拉伯数字和中文数字表达是一个很有趣的算法题)。

新型手机18:9比例的适配

越来越多的手机使用18:9所谓的全面屏设计,导致在活动页面这种需要全屏铺满的页面中适配比较麻烦,当前使用了淘宝的amfe-flexible和构建阶段的插件px2rem.自动将px适配到相对单位rem,并能适应各种尺寸的设计图。具体如下:
自适应布局:
淘宝js包:

1
2
npm installl amfe-flexible
npm install fis3-preprocessor-px2rem -g

1
2
3
4
5
6
7
8
//fis-conf
fis.match('test.css', {
preprocessor: fis.plugin('px2rem',{
designWidth: 640
})
})
//index.js
import flexible from 'amfe-flexible';

webpack 中使用 https://www.npmjs.com/package/px2rem-loader

微信授权和分享相关的接口调试

这方面需要后台支持,基本思路就是用中转页面,或者接口重定向到