предисловие
Каждый раз, когда я пишу статью, я всегда чувствую, что это намного сложнее, чем писать код.Может быть, это недостаток моего выражения.Однако написание статьи может также пересмотреть мой собственный процесс разработки, что приносит мне большую пользу. Здесь я кратко описываю процесс имитации некоторых макетов и реализации функций определенной рыбы, исключительно в учебных целях.
Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов.Основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. С другой стороны, в сочетании с современными наборами инструментов и различными вспомогательными библиотеками Vue также полностью способен работать со сложными одностраничными приложениями SPA.
Стек технологий и библиотека компонентов
- vuex: Решите проблему совместного использования данных компонентов и повысьте устойчивость данных компонентов.
- vue-router: в основном реализует одностраничную разработку spa.
- axios: асинхронный запрос данных.
- easymock: поддельный интерфейс имитации данных.
- mint-ui: фреймворк для мобильной разработки.Mint UI
- стилус: препроцессор css
- Better-Scroll: мобильное решение для прокрутки
- swiper: мощный плагин эффекта скольжения
- lrz: плагин для сжатия изображений
добиться эффекта
поиск
Купить
Структура каталогов кода
●
┣━ src # 开发目录
┣━ api //axios获取假数据的统一js
┣━ data.js
┣━ assets //静态文件资源
┣━ images //图片
┣━ utils //通用js方法函数
┣━ common //通用的文件资源
┣━ stylus //stylus文件夹
┣━ component //可复用的组件
┣━...
┣━...
┣━...
┣━...
┣━...
┣━...
┣━ pages //页面（页面组件）
┣━...
┣━...
┣━...
┣━...
┣━...
┣━...
┣━ router //路由
┣━ index.js
┣━ store //vuex数据状态管理
┣━ index.js
┣━ state.js
┣━ mutations.js
┣━ actions.js
┣━ getters.js
┣━ App.vue //根组件
┗━ main.js
Реализовать несколько основных функций
-
выйти
Пользовательский интерфейс отличается в состоянии входа в систему, а не в состоянии входа в систему.Некоторые функции указаны так, чтобы они были доступны только в состоянии входа в систему, поэтому будет переключатель состояния.Мы можем хранить данные через окно .localStorage, который идет в комплекте с браузером, а также можно использовать vuex, если состояний много, рекомендуется использовать vuex
-
Функция поиска
Об этом нечего сказать, используйте метод indexOf, чтобы проверить, есть ли этот ключ в поддельных данных, и выведите его значение соответственно, если нет, переключитесь на другой UI-интерфейс, который не может быть найден.
-
Функция классификации
Это несложно, получить данные в поддельных данных для вывода в цикле, а затем использовать плагин better-scroll для достижения эффекта высоты, соответствующего прокрутке.
-
Купить
Если вы не вошли в систему, выполните маршрут Route-Link, чтобы перейти на страницу входа в систему.Если вы вошли в систему, вы попадете на страницу сведений о продукте.Нажмите Я хочу войти в чат с продавцом.Интерактивный интерфейс , где данные продавца имитируются поддельными данными, поэтому он не может быть похож на настоящего продавца. Каждый эмодзи представляет собой изображение, которое скомпилировано в коде, а затем выполняется карусель swiper, чтобы обернуть их цикл обхода.
Затем нажмите «Купить сейчас», и он перейдет на страницу оплаты. Если вы заполнили адрес и другую информацию, вы можете выбрать. Если вы не заполнили, вы будете перенаправлены на соответствующую информационную страницу, а затем нажмите покупка для успеха. В это время будут использоваться данные. vuex сохраняется на моей купленной странице на моей личной странице. Вы можете удалить заказ после подтверждения получения. -
выпускать
Точно так же вы можете войти в интерфейс публикации только после входа в систему. Публикация действует как личность продавца, и вам необходимо заполнить соответствующую информацию о деталях продукта, включая изображения, цены и т. д. Только после проверки публикация может быть успешной, vuex также используется для сохранения опубликованной информации о продукте, а затем перехода на страницу, которую я опубликовал на своей странице для вывода данных.
-
Адаптация устройства
Я реализовал его с помощью rem, также рекомендуется использовать rem для адаптивной верстки, сначала инкапсулировать адаптивный html font-size js, а затем импортировать его в main.js
/** * Created by zhaolele on 2018/7/25. */ (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 32 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //10rem -
1 пиксель на мобильном
Как мы все знаем, один пиксель на самом деле не является унифицированным пикселем на мобильном терминале из-за разрешения разных устройств, поэтому нам нужно инкапсулировать миксин стилуса, чтобы представить
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
- загрузить изображение
Вы можете использовать атрибут файла типа во входных данных, а затем использовать новый атрибут, скрытый в html5, чтобы скрыть узел, инициировать событие щелчка для входного типа = файл, щелкнув другие узлы, а затем использовать сжатие изображения lrz для красиво вывести изображение на Также на странице. Возьмите код для загрузки аватара внутрь и вставьте его.
html:
<div class="avatar" @click="addPic">
<img :src="url" alt="">
<span class="upavatar">上传帅照</span>
<input type="file" hidden accept="image/jpeg,image/jpg,image/png" capture="camera" @change="fileInput" ref="file">
</div>
js 方法：
addPic() {
this.$refs.file.click()
}, //点击触发fileInput事件
fileInput(e) {
let files = e.target.files
console.log(files)
if(!files.length) return
this.createImage(files, e)
},
createImage(files, e) {
lrz(files[0], { width: 480 }).then(rst=> {
this.url = rst.base64
}).catch(err=> {
console.log(err)
}).always(()=> {
e.tartget.value = null
})
},
Эпилог
Я хочу подробно рассказать о многих вещах, таких как ямы, на которые наступает вложенная маршрутизация.fallow-fish
Если это будет вам полезно, вы можете отметить мой проект звездочкой, чтобы немного подбодрить меня, и я надеюсь, что единомышленники присоединятся к обсуждению, и я помогу вам ответить с первого раза.