vuejs开辟H5页面总结

近来介入了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
《vuejs开辟H5页面总结》
假如你用vscode编辑器,引荐 cssrem
《vuejs开辟H5页面总结》

运用rem单元注重以下几点:

  1. 在一切的单元中,font-size引荐运用px,然后连系媒体查询举行主要节点的掌握,如许能够满足凸起或许弱化某些字体的需求,而非团体调解。
  2. 众向的单元能够悉数运用px,横向的运用rem,因为挪动装备宽度有限,而高度能够无穷向下滑动。但这也有惯例,比方关于一些运动注册页面,须要在一屏幕内完整显现,没有下拉,这时刻一切众向或许横向都应当运用rem作为单元。如图:

《vuejs开辟H5页面总结》
左图的表单高度单元因为下边空距较大,运用px在差别屏幕显现越发;而右侧的运动注册页因为不能涌现滚动条,一切的众向高度、margin、padding都应当运用rem。

  1. 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']);

迎接关注民众号前端新视界,把握手艺前沿资讯。

    原文作者:hzrWeb
    原文地址: https://segmentfault.com/a/1190000010030848
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞