最近参与了APP内嵌H5页面的开发，这次使用vuejs而不是jQuery，只使用vuejs作为库，代码除了提高效率外更具可读性，这里分享一下看看自己在一些开发中总结的一些经验。关于布局方案拿到设计师给的UI设计图后，前端的首要任务就是布局和样式。相信这对大多数前端工程师来说都不是问题。移动端的布局比PC简单，关键在于对不同设备的适配。之前介绍过一篇关于移动端rem布局方案的文章，大致是网易H5的适配方案。但是在实践中发现淘宝开源的可伸缩布局方案效果更好，也更容易上手。网易云的解决方案总结如下：根据屏幕大小/750=请求字体/参考字体大小的比例动态调整html的font-size。淘宝的解决方案总结如下：根据设备像素比例设置scale值，保持viewportdevice-width始终等于设备物理像素，然后根据屏幕尺寸动态计算根字体大小，具体分屏分成10等份，每份a，1rem等于10a。通常我们会得到一个750宽的设计稿，它是基于iPhone6的物理分辨率。有的设计师可能比较懒，设计图上没有标注。如果边开发边测尺寸，效率无疑是比较低的。要么让设计师标注，要么自己做。如果设计师实在没时间，建议使用markman进行标注。免费版阉割了部分功能（比如不能保存到本地），但基本能满足我们的需求。注解完成后，我们开始写我们的样式。使用淘宝的lib-flexible库后，我们的根字体基准值为750/100*10=75px。这时候如果一个标签距离图中100px，那么在css中应该设置为100/75=1.333333rem。所以为了提高开发效率，可以使用px转rem插件。如果你使用sublimeText，你可以使用rem-unit。如果你使用vscode编辑器，cssrem推荐使用rem单元。注意以下几点：在所有单位中，font-size建议使用px，然后使用mediaquery来控制重要节点。这可以满足突出或弱化某些字体的需要，而不是整体调整。公共方向的所有单位可以使用px，水平单位可以使用rem，因为移动设备的宽度是有限的，高度可以无限向下滑动。但也有特殊情况。比如一些活动报名页面，需要一屏完整展示，没有下拉。此时，rem应该作为所有公共或水平方向的单位。如图：左侧窗体的高度单位底部间距更大，使用px在不同屏幕上显示更方便；而右边的活动报名页面不能有滚动条，所有的公共高度、外边距、内边距都应该使用rem。border、box-shadow、border-radius等一些效果要以px为单位。基于接口返回数据的属性注入，大家可能不是很理解。在此之前，先说一下表单数据的绑定方法。重要的一点是有几种形式要分开。表单对象是数据绑定的。以上图公积金查询为例。由于不同城市查询要素不同，登录方式可能只有一种，也可能有多种。比如上图中有三种登录方式，使用vue布局时有两种选择。一种是只创建一个表单进行数据绑定，点击按钮触发判断；相反，有几种登录方法可以创建多个表单，并使用一个字段来标识当前显示的表单。由于使用了第三方接口，一开始没有检查接口返回的数据结构，采用了第一种错误的方法。第一个错误是每个登录方式下的登录元素个数也不一样。第二个错误是数据绑定。同一个表单数据下，当用户在用户名登录方式下输入用户名和密码，切换到客户号登录方式时，会出现数据混乱。解决布局问题后，我们需要根据设计图定义一些状态，比如当前登录方式的切换，授权状态的切换，按钮是否可以点击，是否处于请求状态.当然还有一些通过app传递的数据，这里先忽略。data:{tags:{arr:[''],activeIndex:0},isAgreeProxy:true,isLoading:false}然后查看接口返回的数据。推荐使用chrome插件postman。例如呼和浩特的登录元素如下：{"code":2005,"data":[{"name":"login_type","label":"身份证号","fields":[{"name":"user_name","label":"身份证号码","type":"text"},{"name":"user_pass","label":"password","type":"password"}],"value":"1"},{"name":"login_type","label":"公积金账户","fields":[{"name":"user_name","label":"公积金账户","type":"text"},{"name":"user_pass","label":"密码","type":"password"}],"value":"0"}],"message":"请求登录元素成功"}可以看到呼和浩特有两种授权登录方式，我们定义一个data中的loginWays，一开始是一个空数组，然后在methods中定义了一个请求接口的函数，根据返回的数据向上面的fields对象中注入一个input字段进行绑定。这就是所谓的基于接口返回数据的属性注入方法：{queryloginWays:function(channel_type,channel_code){varparams=newURLSearchParams();params.append('channel_type',channel_type);params.append('channel_code',channel_code);axios.post(this.loginParamsProxy,params).then(function(res){console.log(res);varcode=res.code||res.data.code;varmsg=res.message||res.data.message;varloginWays=res.data.data?res.data.data:res.data;//查询失败if(code!=2005){alert(msg);return;}//添加输入字符段使用于v-模型绑定loginWays.forEach(function(loginWay){loginWay.fields.forEach(function(field){field.input='';})})this.loginWays=loginWays;this.tags.arr=loginWays.map(function(loginWay){returnloginWay.label;})}.bind(this))}}即使返回的数据中包含我们不需要的数据也没关系，这样我们就不会losealltheinformationfornextlogin需要的数据多表单绑定数据的问题解决了，那么如何在页面之间传递数据呢？如果是从app传来的，一般是使用url拼接，使用window.location.search获取queryString然后拦截；如果通过页面插入到javaWeb中，可以直接使用"${fieldname}"获取，注意js中获取java字段需要加双引号。computed:{//真实姓名realName:function(){returnthis.getQueryVariable('name')||''},//身份证明identity:function(){returnparseInt(this.getQueryVariable('identity'))||''},/*IfjavaWebrealName:function(){returnthis.getQueryVariable('name')||''},identity:function(){returnparseInt(this.getQueryVariable('identity'))||''}*/},方法：{getQueryVariable:function(variable){varquery=window.location.search.substring(1);varvars=query.split('&');for(vari=0;i
