Willdark

每一个不曾起舞的日子,都是对生命的辜负

你是华广的吃货吗<问答类H5的制作>

近些年来对于问答类的H5大众都比较喜闻乐见,对于像之前的“你是最了解我的人吗?”,“你看的出我在撒谎吗?”,诸如此类等等,在占据了大半个朋友圈,可见这类的H5还是备受欢迎,也正是因为这样,所以尝试做了一个关于校美食的H5问答。——前言

关于开发过程:
1.开发这个页面的时候,因为没有设计师,界面的图标都是在网上找的然后在拼起来,界面可能有点丑请原谅。Ծ‸Ծ

2.用到的有HTML,CSS,JQuery,Json数组,Swiper.js方面的知识,css布局难点主要在于自适应方面的布局,因为要适应不同的手机型号,其次JQ方面方的多是节点的操作和页面一些的动态加载,swiper.js用了其里面比较好的一些动画属性。

3.开发过程中也了解到了H5里面的一直很好用的自适应属性,如:
rem,只要给根元素设定font-size的px字号,则可以来算出元素的宽高。
vw,viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh,viewpoint height,视窗高度,1vh等于视窗高度的1%。

4.前期开发的时候没有用到后台的数据交互,包括图片、问题、答案在是在前台页面存储(因为数据量比较少),后期更新是打算打所有数据存到数据库里面,然后在前台的数据用的是json数组的形式在前端页面定义的,如这样:

var data = {
“img”:[
“__PUBLIC__/img/food/1.jpg”,
….
“__PUBLIC__/img/food/21.jpg”
],
// 问题
“que”:[{
// 标题
“tt”:”哪个饭堂没有麻辣烫”,
// 选项
“ans”:[
“一饭”,
“二饭”,
“三饭”,
“四饭”
],
// 正确答案
“trueAns”:”t1-1″
},

5.编写的时候有用到swiper.js的插件,里面封装一些很好用的动画效果,直接可以调来属性就用,比如说进场动画:swiper-animate-effect=”rotateInUpLeft”便可以实现一些较为复杂的逻辑。 一款很强大的移动端滑动插件,可以查阅官方的API文档,插件在使用时要初始化一些参数,如:

// swiper.js 插件对象
var mySwiper = new Swiper(‘.swiper-container’,{
//动画初始化
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
});

6.在加载内容时主要用到的是JQ里面的动态加载,如:

$(‘.swiper-wrapper’).append(…code);//swiper-wrapper为父容器。

7.随机题目的生成,采用的是在json数组中随机生成10道题加载到页面中,贴代码,随机数生成函数:

//记录随机数的数组
var array = new Array();
//生成随机数函数
// 循环N次生成随机数
for(var i = 0 ; ; i++){
// 只生成10个随机数
if(array.length<10){
generateRandom();
}else{
break;
}
}
// 生成随机数的方法
function generateRandom(){
var rand = parseInt(Math.random()*data.que.length);
for(var i = 0 ; i < array.length; i++){
if(array[i] == rand){
return false;
}
}
array.push(rand);
}

8.题目正误的统计:
//定义记录错题的数组
var falesArr=[0,0,0,0,0,0,0,0,0,0];
当用户答对的时候把对于下标的题目置为1,最后循环统计1的数量(即为正确的题目数)
关于界面
界面放上去排版不太对,可戳下面的访问链接观看↓↓↓。

具体的图就不多放啦,这个项目也用了ThinkPHP框架打包放到了服务器上,作了一下手机入口的判断。
H5访问戳链接浏览:http://www.willxiaoda.com/QA
本次的项目也开源放到了github上,欢迎各位大佬指正。
github项目源码戳链接:https://github.com/Willxiaoda/QA
有须有的再补充

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注