'用VUE做个投票的小功能'

发表于   |   分类于   |  

一个基于vue投票小功能模块上线，样式有一点渣啊，没有产品
DEMO 分组显示默认全部隐藏
DEMO 分组显示定位(?id=groupId_optionId)
DEMO 不分组显示定位（后台好像把测试数据删了）(?id=optionId)
静态html的点这

用到了

1.flex布局（比如弹框的按钮）
2.按钮手移上去在移动端不像pc是hover，实现用加样式或者用a标签的active来做（建议看看微信weui样式代码）
3.定位到哪个元素一些新的html5的新的api（querySelector,getBoundingClientRect,classList等）[资料5]
4.vue关键这个不说了吧
5.node做微信的接口不要太快(资料6)
6.rem布局进阶版(1pxbug都不用担心)
7.图片懒加载(vue-lazyload)

疑问

1.源代码不能用（那是JSP的）静态html的点这
2.还是跑不起来(用编辑器打开或者换成本地的js路径)

<script src="//cdn.bootcss.com/vue/2.2.2/vue.js"></script>

3.本地用vue未压缩控制台和vue-devtool(一个chrome插件不要太好用)会有提示

我出错的位置

  1. document.querySelectorAll(‘.select-box’)是个类数组安卓微信里没事，IOS会出错
    解决方法

    [].forEach.call(document.querySelectorAll('.select-box'),function (e) {
   e.classList.remove('on');
});

  2. 微信IOS里title不支持动态修改（安卓支持），说是3月份会发布新版本会修复
    解决方法 见资料8（改成了原生JS实现）

  3. 微信分享出去后除了自带的参数微信会额外带2个参数在调用，获取微信分享权限的url必须全路径需要注意 

    朋友圈   from=timeline&isappinstalled=0
微信群   from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0

相关资料

1.vue@2.0
2.weui
3.flex布局
4.rem布局进阶版
5.不需要jquery
6.node-wx
7.vue-lazyload
8.微信IOS文档
9.微信IOS里title修改

题外话

刀塔找到了女朋友，异地不容易啊，今年打算去北京定下来，4.6到北京，有工作请联系我357812113@qq.com.