移动app的一些心得

Posted 2020-08-15

　　周末的时候闲着没事，看到了个开源的红旅动漫的APP，于是自己就拿下来写了下，整个网站作者也解析成了接口，所以就可以写成app了，作者写的是用mui开发的，可以通过hbuilder软件打开，进行查看源代码，但是我没有用hbuilder，没有用mui框架，就自己简单的纯手写了下。

　　下面来说下开始的准备把，这些接口数据都是来自红旅的，所以里面的图片啊链接什么的都是从网上直接过来的，所以一开始建项目文件夹的时候图片文件夹就不需要.顶部栏的话没什么好说的，下面的其他数据都是通过接口实现的，也就是得通过ajax来异步获取到数据，所以需要用到模板引擎，模板引擎的话我用的是github里腾讯的artTemplate,感觉还不错吧，渲染的也还挺快，感觉原生语法更像编程一点，可能更好理解一些吧。首先github上下载好模板引擎后直接导入到项目文件夹内，然后引用到需要使用模板引擎的地方就可以了，定义好模板后，就可以编写ajax。这是在移动端，为了能更简便更高效一点，使用了类似于jQuery的zepto库，用法和jQuery没什么区别的，稍微注意点不一样的地方就可以了，也和模板引擎一样导入到相应文件夹并引用就行。

　　首页的轮播图获取到的数据里只有两张图，轮播图的实现有很多种方式，我是采用了在前面后面各加了一张，这样比较好做一点，你放的图越多，写的js代码就可以简便一点，图越少，就需要通过js来克隆图片，会相对复杂一点。这里我是克隆了两张图在收尾，这样就四张图了，轮播起来。再下面的内容是通过ajax获取，通过$.ajax({.....}),里面有个属性叫cache，缓存的意思，一开始也没有写这个属性，无意中添加了下，cache:false。发现好像有了缓存的问题。所以查了下，发现cache只有在get方式时可以使用，值为true的时候，会读取缓存，假如上次访问的one.html，这次再访问的话，会从上次的one.html读缓存，而不是再到服务器上读取。如果把值设置成false的话，会在url后面加一个时间后缀，让他跑到服务器获取结果。获取到数据后，接下去需要考虑的就是样式的问题了，我感觉，真的，有时候样式这个东西比js代码更难写，因为js代码错了会报错，可以通过浏览器调试工具进行调试，但是样式写那里有时候真的很难找，只得去试，然后慢慢调，li和里面包含的img，p，div之间的关系。调的时候，由于这是移动app，现在的手机屏幕有大有小，虽然差异不是很大，但是每款手机的屏幕也是不一样尺寸的，就是要不停的调试不一样的屏幕，可以先在浏览器调试工具中采用手机端模式，然后再真机调试。左边点击菜单栏的实现，下载下来的是用mui框架实现的，但是我没有用框架，所以就自己结合css3实现了类似的功能，大概就是点击菜单，左侧侧滑出一个页面，是菜单栏，本来主页的内容整体右移，并且被左侧的遮罩层遮住，使得不能的点击。实现的过程是给侧滑出来的菜单栏一个定位，在屏幕左侧隐藏，宽度设为70%左右，点击后移出来，为了有滑动的效果，则添加了transition：all -.4s，左侧侧滑出来的同时，原来的主页也右滑同样的距离，这样就感觉有左边移出来的东西把原来的页面 挤掉了，同时要有一个遮罩层，其实可以把背景设置成透明的，这样就有遮罩层的感觉，也可以加个层级，防止点击到下面的。其他也就没什么感觉麻烦的地方了。

　　总结下，个人认为比较麻烦的地方就是获取到的内容写样式，适配不同的屏幕调试；由于没有用mui框架，轮播图的实现得自己写；同样没有用框架，左侧菜单栏的侧滑效果一开始没有想到，但是稍微想了一下，还是很简单的，实现起来也很快；还有就是ajax获取的时候缓存的问题。