2019-08-02 移动端开发H5总结

1、项目搭建与框架选择

        使用vue.js，用vue-cli搭建项目，webpack打包部署，搭建的时候可能会带有一些影响项目体验的插件，在后期的测试阶段会发现，踩坑里面会写。

2、踩坑

        （1）打包上线之后图片一直出不来但是图片的文档里是存在的，用img标签不行换成div的背景图片就可以了。怀疑是png透明图片导致。

        （2）移动端多出一屏幕的滚动条，想的太复杂了，直接在每个页面的最外层div，写上overflow:scroll即可，一直还在想着找插件什么的，简单的项目根本不用，不对滚动条做特殊的要求，能滚就行。

        （3）表单的提交很简单 直接使用移动端UI库，样式可以自己随意改，vux的获取焦点和删除已输入的内容时不行，在点击输入框时候反应很慢（使用者），然后以为是框架的问题换了框架也不行，就换了原生的input还是不行，结果是移动端为了防止点击过快会缩放屏幕，在建项目的时候自动装了一个fastClick的组件，300ms内不允许再次点击，mian.js里面去掉就可以了。一直以为是组件问题耗费时间很长。

        （4）同步请求一个方法，为了让微信去授权新的微信号，得到用户的信息。window.location.replace("https://www.oalur.com/api/auth/wxclient？invitationCode="+this.$route.query.invitationCode);打开一个页面即可，就是替换当前页面。为了刷新请求同步接口。

        （5）最大的坑，微信的分享签名，需要请求一个微信的接口，用当前页面的url作为参数，安卓设备没有问题，ios的设备默认拿到各个路由的路径都是进入项目的默认路由，导致我分享的页面url和给微信的url不一样，然后就签名失败，分享的页面设置的配置不能显示。解决方法搜了一大推，最后是在window上挂载一个originUrl来记录url，在index.html就开始记录，每次进入不同的页面先把路由给它，在掉取微信接口的时候用originUrl就可以了。

        （6）二次分享的失败，原因是在第一次分享结束后微信会在分享的链接后面默认加上一些参数，而这些参数在第二次签名的时候微信的接口不识别，需要对第二次分享进行接口的格式化encodeURIComponent即可。

3、总结

        第一次自己做移动端的项目，适配经验几乎为零，我事先预料到的坑，没有耗费多长时间应该说还挺顺利，但是上述一些大坑真没有心理准备，开发时间也很紧张，导致心理压力很大，有些简单的问题都不能很理性的去解决，代码写的很乱。再有类似的项目应该会顺利一些。