近来介入了APP内嵌H5页面的开辟,此次运用vuejs替换了jQuery,仅仅把vuejs当作一个库来运用,效力进步以外代码可读性更强,在此分享一下本身的一些开辟中总结的履历。
关于规划计划
当拿到设想师给的UI设想图,前端的首要任务就是规划和款式,置信这关于大部分前端工程师来讲已不是什么难题了。挪动端的规划相对PC较为简朴,关键在于对差别装备的适配。之前引见了一篇关于挪动端rem规划计划,这大抵是网易H5的适配计划。不过实践中发明淘宝开源的可伸缩规划计划结果更好且更轻易运用。
网易云的计划总结为:依据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相称,动态调治html的font-size大小。
淘宝的计划总结为:依据装备装备像素比设置scale的值,坚持视口device-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,然后连系媒体查询举行主要节点的掌握,如许能够满足凸起或许弱化某些字体的需求,而非团体调解。
- 众向的单元能够悉数运用px,横向的运用rem,因为挪动装备宽度有限,而高度能够无穷向下滑动。但这也有惯例,比方关于一些运动注册页面,须要在一屏幕内完整显现,没有下拉,这时刻一切众向或许横向都应当运用rem作为单元。如图:
左图的表单高度单元因为下边空距较大,运用px在差别屏幕显现越发;而右侧的运动注册页因为不能涌现滚动条,一切的众向高度、margin、padding都应当运用rem。
- border、box-shadow、border-radius等一些结果应当运用px作为单元。
基于接口返回数据的属性注入
能够人人不明白什么叫”基于接口返回数据的属性注入”,在此之前,先说一下表单数据的绑定体式格局,一个主要的点是有几份表单就离开几个表单对象举行数据绑定。
已上图公积金查询为例,因为差别都市会有差别的查询要素,能够上岸体式格局只要一种,也能够有几种。比方上图有三种上岸体式格局,在运用vue规划时,有两种计划。一是只竖立一个表单用于数据绑定,点击按钮触发推断;而是有几种上岸体式格局竖立几个表单,用一个字段标识当前显现的表单。因为运用第三方的接口,一最先也没有先举行接口返回数据结构的检察,采用了第一种毛病的体式格局,毛病一是每种上岸体式格局下面的上岸要素的数目也差别,毛病二是数据绑定在同一个表单data下,当用户在用户名上岸体式格局输入用户名暗码后,切换到客户号上岸体式格局,就会涌现数据紊乱的状况。
处理完规划题目后,我们须要依据设想图定义一些状况,比方当前上岸体式格局的切换、赞同受权状况的切换、按钮是不是能够点击的状况、是不是处于要求中的状况。固然另有一些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": "暗码",
"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字段用于绑定,这就是所谓的基于接口返回数据的属性注入。
methods: {
queryloginWays: function(channel_type, channel_code) {
var params = new URLSearchParams();
params.append('channel_type', channel_type);
params.append('channel_code', channel_code);
axios.post(this.loginParamsProxy, params)
.then(function(res) {
console.log(res);
var code = res.code || res.data.code;
var msg = res.message || res.data.message;
var loginWays = res.data.data ? res.data.data : res.data;
// 查询失利
if (code != 2005) {
alert(msg);
return;
}
// 增加input字段用于v-model绑定
loginWays.forEach(function(loginWay) {
loginWay.fields.forEach(function(field) {
field.input = '';
})
})
this.loginWays = loginWays;
this.tags.arr = loginWays.map(function(loginWay) {
return loginWay.label;
})
}.bind(this))
}
}
纵然返回的数据有我们不须要的数据也没有关联,如许保证我们不会丢失举行下一步上岸所须要的数据。
如许多个表单绑定数据题目处理了,那末怎样举行页面间数据通报?假如是app传过来,那末一般运用URL拼接的体式格局,运用window.location.search取得queryString后再举行截取;假如经由历程页面套入javaWeb中,那末直接运用”${字段名}”就可以猎取,注主要js中猎取java字段须要加双引号。
computed: {
// 实在姓名
realName: function() {
return this.getQueryVariable('name') || ''
},
// 身份证
identity: function() {
return parseInt(this.getQueryVariable('identity')) || ''
},
/*If javaWeb
realName: function() {
return this.getQueryVariable('name') || ''
},
identity: function() {
return parseInt(this.getQueryVariable('identity')) || ''
}*/
},
methods: {
getQueryVariable: function(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
}
关于前端跨域调试
在举行接口要求时,我们的页面一般是在sublime的当地服务器或许vscode当地服务器预览,所以要求接口会碰到跨域的题目。
在项目构建的时刻一般我们源代码会放在src文件夹下,然后运用gulp举行代码的紧缩、兼并、图片的优化(依据须要)等等,我们会运用gulp。这里处理跨域的题目能够用gulp-connect连系http-proxy-middleware,此时我们在gulp-connect中的当地服务器举行预览调试。
gulpfile.js以下: 开辟历程运用gulp server敕令,监听文件修改并运用livereload革新;运用gulp敕令举行打包。
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var useref = require('gulp-useref');
var connect = require('gulp-connect');
var proxyMiddleware = require('http-proxy-middleware');
// 定义环境变量,若为 dev,则代办src目次; 若为prod,则代办dist目次
var env = 'prod'
// 跨域代办 将localhost:8088/api 映射到 https://api.shujumohe.com/
gulp.task('server', ['listen'], function() {
var middleware = proxyMiddleware(['/api'], {
target: 'https://api.shujumohe.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
});
connect.server({
root: env == 'dev' ? './src' : './dist',
port: 8088,
livereload: true,
middleware: function(connect, opt) {
return [middleware]
}
});
});
gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
gulp.task('css', function() {
gulp.src('src/css/main.css')
.pipe(concat('main.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'));
gulp.src('src/css/share.css')
.pipe(concat('share.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'));
gulp.src('src/vendors/css/*.css')
.pipe(concat('vendors.min.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/vendors/css'));
return gulp
});
gulp.task('js', function() {
return gulp.src('src/vendors/js/*.js')
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/vendors/js'));
});
gulp.task('img', function() {
gulp.src('src/imgs/*')
.pipe(gulp.dest('dist/imgs'));
});
gulp.task('listen', function() {
gulp.watch('./src/css/*.css', function() {
gulp.src(['./src/css/*.css'])
.pipe(connect.reload());
});
gulp.watch('./src/js/*.js', function() {
gulp.src(['./src/js/*.js'])
.pipe(connect.reload());
});
gulp.watch('./src/*.html', function() {
gulp.src(['./src/*.html'])
.pipe(connect.reload());
});
});
gulp.task('default', ['html', 'css', 'js', 'img']);
迎接关注民众号前端新视界,把握手艺前沿资讯。