«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"
Я только соприкоснулся с разработкой мобильных терминалов в 2016 году и поначалу был в замешательстве, каждый раз, сталкиваясь с проблемой, задавал вопросы в сообществе или учился на опыте предшественников. Эта статья сочетает в себе ранее написанные статьи и опыт разработки, которыми мы с вами поделимся, в надежде помочь новичкам, которые только начали заниматься разработкой мобильных терминалов. Один из следующих начнется сСтраница резервного фондаПроект разработки используется в качестве примера для представления некоторых мобильных терминалов.Общая проблемаи сделатьМногостраничная разработка с Vuejs в качестве библиотекиопыт в.
Мобильная адаптивная верстка
Наиболее часто используемая схема адаптивной верстки для мобильных терминалов в проектах — это flexbox в сочетании с rem. Стандартный тип столбца использует flexbox, а большинство других нерегулярных представлений используют rem.Наиболее распространенным решением для rem является Taobao с открытым исходным кодом.Масштабируемая схема компоновки.
Установите значение масштаба в соответствии с соотношением пикселей устройства (масштаб = 1 / deviceRatio), которое можетДержите ширину устройства области просмотра всегда равной физическим пикселям устройства, а затем динамически вычислить размер корневого шрифта в соответствии с размером экрана. В частности, экран разделен на 100 равных частей, каждая часть равна a, а 1rem равен 10a.
вызывать
Обычно мы получаем эскиз дизайна шириной 750, который основан на физическом разрешении iPhone 6. Некоторые дизайнеры могут быть ленивы, и на чертеже нет этикетки, если мы измеряем размер при разработке, эффективность, несомненно, будет относительно низкой. Либо пусть это отметит дизайнер, либо сделайте сами.
Если у дизайнера совсем нет времени, рекомендуется использоватьmarkmanОтметим, что бесплатная версия кастрировала некоторые функции (например, невозможность сохранения локального), но в основном удовлетворяла наши потребности.
Позже я нашел лучший инструмент для аннотаций, чем markmanPxCook, инструмент может отображатьPSD дизайнКод стиля слоя в , очень удобен для внешнего интерфейса.
После того, как аннотация завершена, мы начинаем писать наш стиль, используя Taobao.lib-flexibleПосле библиотеки базовое значение нашего корневого шрифта составляет 750/100*10 = 75px. На этом этапе, если метка находится на расстоянии 100 пикселей от рисунка, то в CSS она должна быть установлена на 100/75 = 1,333333rem. Таким образом, чтобы повысить эффективность разработки, вы можете использовать плагин px to rem. Ниже приведен плагин преобразования для sublimeText и Vscode:
px to rem плагин
- Плагин возвышенного текста:rem-unit
- Плагин VScode:cssrem
Небольшое резюме использования rem
- Во всех единицах рекомендуется использовать px для размера шрифта, а затем комбинировать медиа-запросы для управления важными узлами, которые могут удовлетворитьподчеркнуть или ослабитьПотребности определенных шрифтов, а не общая настройка.
- Все ориентированные единицы могут использовать px, а горизонтальные — rem., потому что мобильные устройства имеют ограниченную ширину, а высота может бесконечно уменьшаться. Но он также имеетособый случайНапример, для некоторых страниц регистрации событий он должен полностью отображаться на одном экране без выпадающего списка.В настоящее время все общедоступные или горизонтальные ориентации должны использовать rem в качестве единицы измерения. Как показано на рисунке:
Единица высоты формы на левом рисунке более заметна на разных экранах с использованием px из-за большего пространства под ней; в то время как страница регистрации активности справа не может иметь полосы прокрутки, поэтому все разнонаправленные высоты, поля и отступы должны использовать рем.
- граница, тень окна, радиус границыи т. д. некоторые эффекты должны использовать px как единицу измерения.
Влияние строки состояния мобильного телефона и панели навигации браузера
В ранее опубликованной статье есть вопрос, поднятый фронтенд-партнером SF: В статье автор подчеркивает, что макет полностью покрыт, что отличается от решения со многими пробелами ниже.Я столкнулся с этой ситуацией в своей работе.Ширина эскиза дизайнера составляет 750x1334, но фактическая высота отображения Их не так много, потому что сверху есть панель навигации, а также отображение собственной строки состояния мобильного телефона, поэтому общая высота не может достигать 750, но проект дизайнера разработан строго по 750. В этом случае, rem используется,строго по конструктору При восстановлении размера на экране появится полоса прокрутки.Как вы справились с этой ситуацией? Является ли он стандартизированным из проектного проекта или имеет соответствующие меры из разработки?
Все еще возьмем мой интерфейс обмена в качестве примера: Разная высота отображения обычно встречается в WeChat и браузерах, потому что в первом нет адресной строки и панели инструментов, поэтому высота отображения обычно соответствует представлению, разработанному дизайнером. Затем, если вы будете следовать чистому отступу, даже если все поля используют rem, они все равно будут превышать высоту одного экрана на стороне браузера, а это не то, что мы хотим видеть для общих страниц. Пришло время сделать выбор, я правАбсолютное позиционирование основной области, так что хотя зазор выше небольшой, его все же можно отобразить на высоте экрана. Если в настройке используется заполнение полей, полосы прокрутки уже должны отображаться. Конечно, эта предпосылка зависит от дизайнерского чертежа.Обычно дизайнер оставляет определенный зазор для ощущения пространства и не устанавливает слишком большую высоту основного объекта, иначе он будет выглядеть не очень хорошо, если он будет слишком полным. , Это не находится в пределах определенного предела, и его неизбежное превышение.Однако наш интерфейс обмена обычно предназначен для обмена друзьями через WeChat, и полоса прокрутки, отображаемая через эффект просмотра, открытый браузером, на самом деле не влияет на это, не не так ли? Ниже приведены изображения WeChat и браузера:
Терминал WeChat:
Сторона браузера:
Vuejs как библиотека для разработки мобильных страниц
Почему бы не использовать режим SPA
Как правило, мобильный терминал использует vue для страниц с частым взаимодействием с данными и быстрой разработкой.Есть несколько причин, по которым режим одностраничной разработки SPA не используется.
- Для быстрой разработки, быстрого запуска
- Другие участники проекта не знакомы ни со SPA, ни с webpack
- При участии в проекте проект был разработан многостраничным и не может быть рефакторинг в короткие сроки
Помимо использования одностраничной архитектуры, при разработке многостраничного приложения логика взаимодействия одной страницы соответствует одному экземпляру Vue.
Внедрение свойства на основе возвращаемых данных интерфейса
«Внедрение свойства на основе данных, возвращаемых интерфейсом» — это термин, созданный отдельными людьми.Помимо этого понятия, давайте поговорим о методе привязки данных формы.
привязка данных формы
Важным моментом являетсяЕсли форм несколько, выделить несколько объектов формы для привязки данных.
В качестве примера возьмем запрос резервного фонда на рисунке выше.Поскольку в разных городах будут разные элементы запроса, может быть только один метод входа в систему, а может быть и несколько. Например, на картинке выше есть три способа входа в систему, а при использовании макета vue — два.
- 1. Создайте только форму для привязки данных, нажмите кнопку, чтобы вызвать суждение
- 2. Существует несколько способов входа в систему для создания нескольких форм и использования поля для идентификации отображаемой в данный момент формы.
Из-за использования стороннего интерфейса мы не проверили сначала структуру данных, возвращаемую интерфейсом, и выбрали первый неправильный метод.Первая ошибка заключается в том, что количество элементов входа в каждый метод входа также отличается, и вторая ошибка - привязка данных.В тех же данных формы, когда пользователь вводит имя пользователя и пароль в методе входа в систему с именем пользователя и переключается на метод входа в систему с номером клиента, будет путаница данных.
После решения проблемы макета нам необходимо определить некоторые состояния в соответствии с диаграммой проекта, такие как переключение текущего метода входа в систему, переключение состояния авторизации, можно ли нажать кнопку и находится ли она в состоянии запроса. . Конечно, есть также некоторые данные, через которые проходит приложение, которые здесь игнорируются.
data: {
tags: {
arr: [''],
activeIndex: 0
},
isAgreeProxy: true,
isLoading: false
}
Затем просмотрите данные, возвращаемые интерфейсом.Рекомендуется использовать почтальон для Chrome.Например,элементы входа в Hohhot выглядят следующим образом:
{
"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": "登录要素请求成功"
}
Видно, что у Hohhot есть два авторизованных метода входа в систему.Мы определяем loginWays в данных, которые изначально являются пустым массивом, а затем определяем функцию для запроса интерфейса в методах, которые основаны на возвращаемых данных. Объект fields вводится с входными данными. Поля используются для привязки, которая называется внедрением свойств на основе данных, возвращаемых интерфейсом.
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))
}
}
Неважно, есть ли в возвращенных данных данные, которые нам не нужны, чтобы гарантировать, что мы не потеряем данные, необходимые для следующего входа в систему.
Таким образом, проблема привязки данных к нескольким формам решена, так как же передавать данные между страницами? Если он передается из приложения, он обычно использует объединение URL-адресов и использует window.location.search для получения строки запроса, а затем перехватывает ее; если он встроен в javaWeb через страницу, его можно получить напрямую, используя "$ {название поля}", обратите внимание Чтобы получить поле java в js, необходимо добавить двойные кавычки.
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);
}
}
О интерфейсной междоменной отладке
При выполнении запросов интерфейса наши страницы обычно предварительно просматриваются на локальном сервере возвышенного или локальном сервере vscode, поэтому интерфейс запроса столкнется с междоменными проблемами.Если вы используете Gulp для упаковки, вы можете использовать плагин http-proxy-middleware или использовать нгинкс.
Использование глотка
Когда проект собран, наш исходный код обычно помещается в папку src, а затем используется gulp для сжатия кода, слияния, оптимизации изображения (по мере необходимости) и т. д. Мы будем использовать gulp.
Для решения междоменных проблем вы можете использоватьgulp-connectкомбинироватьhttp-proxy-middleware, в это время мы просматриваем и отлаживаем на локальном сервере в gulp-connect.
gulpfile.js выглядит следующим образом: Использование во время разработкиgulp server:devкоманду, слушайте изменения файлов и обновляйте с помощью livereload и проксируйте каталог src; используйтеgulpкоманда для упаковки; используйтеgulp server:distПроизводственный каталог дистрибутива прокси.
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');
// 开发跨域代理 将localhost:8088/api 映射到 https://api.xxxxx.com/
gulp.task('server:dev', ['listen'], function() {
var middleware = proxyMiddleware(['/api'], {
target: 'https://api.xxxxx.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
});
connect.server({
root: env == 'dev' ? './src' : './dist',
port: 8088,
livereload: true,
middleware: function(connect, opt) {
return [middleware]
}
});
});
// 打包后跨域代理
gulp.task('server:dist', ['listen'], function() {
var middleware = proxyMiddleware(['/api'], {
target: 'https://api.xxxxx.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
});
connect.server({
root: './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']);
использовать nginx
Используйте proxy_pass в конфигурации nginx, нужно обратить внимание на один момент: Если после proxy_pass к URL-адресу добавляется /, это означает абсолютный корневой путь; если нет /, это означает относительный путь, и соответствующая часть пути также отправляется на прокси.
server {
listen 80;
server_name localhost;
root [Your project root];
index index.html index.htm default.html default.htm;
location ^~/api {
proxy_pass https://api.xxxxx.com/;
}
}
Отладка официальной страницы аккаунта
Если вы разрабатываете H5 на основе WeChat jsSDK, вы должны связаться с авторизованным доменным именем WeChat, WeChat отправит данные авторизации на страницу обратного вызова, а страница обратного вызова должна находиться под настроенным вами доменным именем (включая поддомены). Например, мы получаем операцию openid пользователя. И WeChat настраивает доменное имя, чтобы вернуться в корневой каталог доменного имени, чтобы обнаружить его.xxx_verify_xxx.txtфайл, чтобы убедиться, что доменное имя принадлежит вам.
Следовательно, чтобы получить openid в инструменте разработки и отладки WeChat, нам нужно использовать инструмент, называемый проникновением во внутреннюю сеть. Вот два инструмента, которые я использую чаще всего:
ngrok
ngrok выполнить команду
ngrok -config ngrok.cfg start web
Требуется файл конфигурации в каталоге ngrok.exengrok.cfgВот пример конфигурации:
server_addr: "tunnel.cn:4443"
trust_host_root_certs: false
tunnels:
web:
subdomain: "xxx"
proto:
http: 8086
https: 8086
После запуска xxx.tunnel.cn:4443 будет указывать на ваш локальный порт 8086,xxx_verify_xxx.txtФайл помещается в корневой каталог порта 8086 для успешной настройки авторизованного доменного имени.
Скорлупа арахиса
Бесплатная версия Peanut Shell стоит всего 6 юаней за персональную активацию, и тогда она будет давать вам 1G трафика в месяц.Бесплатная версия не поддерживает порт 80, но поддерживает до двух доменных имен.Вам нужно скачать рабочий стол клиент.
Добавление сопоставления доменных имен очень просто.Бесплатная версия не может настроить собственное доменное имя, которое автоматически генерируется арахисовой скорлупой.После успешной настройки запустите клиент для просмотра текущего состояния.
PS: Для получения дополнительной информации о внешнем интерфейсе и технической галантереи, пожалуйста, обратите внимание на публичный аккаунт "Новый горизонт переднего плана"