написать впереди
Когда я впервые запустил интерфейс, я написал много страниц WeChat H5. Теперь сделайте запись о проблемах, возникших в процессе разработки, и о том, как я их решил. Не позволяйте себе решать проблемы, которые вы уже решили в будущем.
github:GitHub.com/QQ9694526/V…
1. Авторизация на веб-странице WeChat
Процесс авторизации веб-страницы разделен на четыре шага, здесь мы говорим только о том, что должен делать внешний интерфейс.Первый шаг — перейти на страницу авторизации, чтобы получить код. Здесь я делюсь своей логикой авторизации (ниже), которая имеет два преимущества:
- Опыт будет лучше до того, как переход авторизации будет отображаться в DOM;
- OpenId хранится локально, и интерфейсу и серверу не нужно часто взаимодействовать с сервером WeChat.
2. Авторизация WeChat jssdk
Если вы используете на своей странице такие функции, как обмен, загрузка изображений и оплата WeChat, вам необходимо сначала авторизовать js-sdk. Здесь я инкапсулировал два метода: initConfig и setShare, которые удобны для повторных вызовов при маршрутизации/переключении страниц.
//main.js
import wxsdk from './config/wxsdk.js' //该模块提供initConfig和setShare方法，具体代码太长见github
Vue.prototype.wxsdk = wxsdk;//挂载到全局
//使用
created() {
this.wxsdk.initConfig(location.href.split("#")[0], () => {
this.wxsdk.setShare(this.user.openId);
});
}
3. webpack-dev-server решает междоменные проблемы
Чтобы сказать правду, все перекрестные решения должны иметь участие сервера. Это правда, что эта проблема брошена браузером, но это действительно несправедливо, чтобы позволить передний концом решить его. Следующие две конфигурации позволят вам сказать прощание с перекрестными проблемами навсегда. WebPack-Dev-Server используется для локального развития, а Nginx используется для тестирования производственной среды.
//接口根路径http://47.105.59.***:9090/zt-wx
//以vue-cli搭建的项目config举例 config/index.js
dev: {
proxyTable: {
'/zt-wx': {
target: 'http://47.105.59.***:9090', //目标接口域名
changeOrigin: true //是否跨域
}
},
}
//实际发起请求时的url
this.http.get(`/zt-wx/api/wx/info`).then(); //http是我自己对axios的再封装
//nginx代理配置
server {
location /zt-wx {
proxy_pass http://47.105.59.***:9090;
}
}
4. При первой загрузке iso белый экран, перескакивает на белый экран
проблемное явление: Когда страница ios загружается с белым экраном в первый раз, это нормально после обновления, но когда вы переключаетесь на другую страницу, а затем возвращаетесь, экран снова будет белым.
проблема вызывает: при использовании веб-просмотра для разработки проекта Vue на компьютере с iOS go history(-1) не может уменьшить высоту тела, что делает содержимое скрытым.
Решение: HTML, тело на 100%, #app поддерживает уведомление о родительском элементе, но свиток прокрутки по умолчанию браузера не является #app, а тело, некоторые факторы, которые делают невозможным восстановление после возвращения в историю (iOS Горшок), для этого мы сделали #App абсолютно позиционироваться и снова сделали его объектом прокрутки, что решило проблему.
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Использованная литература:blog.CSDN.net/Итак, Снежинка/AR…
5. Сбой общего доступа после маршрутизации/перехода на страницу ios
проблемное явление: ios WeChat перенаправляется на другую страницу для выбора изображения, но обмен недействителен. Обновление этой страницы и обмен — это нормально.
Уже более 8 часов пытаются решить проблему, но пока безуспешно.
Использованная литература:Ууху. Call.com/question/59…
6. Ошибка при загрузке картинок: исключение обработки
Эта ошибка очень странная, потому что ни во внешнем, ни во внутреннем коде нет четырех слов «обработать исключение». Изначально я хотел свалить вину на WeChat и оставить его в покое, но потом случайно решил эту проблему, когда попытался ограничить размер загружаемых изображений.
проблема вызывает: по умолчанию серверная служба tomcat устанавливает верхний предел размера данных для отправки формы равным 2 М. Если он больше 2 М, будет сообщено об ошибке.
Решение: Внутренний бог изменил значение maxPostSize в server.xml на -1 и решил эту проблему.
Использованная литература:blog.CSDN.net/me 1875690157…
Семь, правильный формат экспорта изображения
Домашняя страница этого проекта в основном состоит из изображений, а изображение (default.png), вырезанное в начале, имеет размер от 400k до 1,3M после сжатия. Сначала я подумал, что с PSD-материалом что-то не так. Только в конце проекта я прошился назад, я вспомнил точку знания формата изображения, а сжатое изображение после экспорта в формат .jpg в основном контролируется в пределах 100K. Если вы заинтересованы в конкретных .png.jpg знаниях об этих форматах изображений, пожалуйста, проверьте это сами.
8. Синхронизированная пользовательская информация, используемая vuex
Разумные небольшие проекты не должны использовать vuex, но это действительно здорово, то есть просто и без проблем. Так как я всегда забываю название метода, я вставлю сюда код для упрощения резюме позже.
//config/store.js
const store = new Vuex.Store({
state: {
user: {}
},
mutations：{
updateUser(state, data){
state.user = data;
}
}
})
//在组件中使用
computed: {
user() {
return this.$store.state.user;
}
}
//在需要的时候更新数据
this.$store.commit("updateUser", user);
9. Плакаты, созданные с помощью html2canvas, не отображают изображения
проблема вызывает: путь к ресурсу импортированного изображения вызван междоменным.
Решение: Я сначала получил его по php-решению, которое дал официал, но я не смог его решить. Наконец, я лизнул свое лицо и попросил бэкэнд-босса переместить каталог ресурсов изображения в каталог моего веб-сервиса, чтобы решить эту проблему.
//安装
npm install --save html2canvas
//引入
import html2canvas from "html2canvas";
//使用
const myPosterWrap = document.getElementById("posterWrap");
html2canvas(myPosterWrap).then(canvas => {
this.posterSrc = canvas.toDataURL("image/png");
this.uploadPosterImg(this.posterSrc);
});
Десять, технология css black для размещения изображений заданных пропорций
Он предназначен для отображения изображения переменной ширины в соответствии с указанным соотношением и прямой загрузки кода (1: 1,25).
//html
<div class="poster-img-wrap">
<div class="poster-img-place"></div>
<img class="poster-img" :src="user.picAddress" alt="">
</div>
//less
.poster-img-wrap {
position: absolute;
top: 28%;
left: 0;
right: 0;
width: 80%;
margin: 0 auto;
.poster-img-place {
width: 100%;
padding-top: 125%;
}
.poster-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
11. Страница ios загружается не полностью и не может быть прокручена
описание проблемы: ios входит с домашней страницы, переходит на другие страницы, а затем обратно на домашнюю страницу, домашняя страница отображает только один экран содержимого и не может быть прокручена.проблема вызывает: Он заключается в уникальной логике рендеринга ядра браузера ios: он заранее найдет соответствующий элемент overflow:scroll, и если высота дочернего элемента выше, чем у родительского элемента, для достижения прокрутки будет установлен нативный scrollView . Проблема заключается в этом "pre", полученная заранее высота не является реальной высотой дочернего элемента после рендеринга.Решение: Установите минимальную высоту для p-индекса дочернего элемента под элементом #app с прокруткой: calc(100% + 1px);
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.p-index{
min-height: calc(100% + 1px);
}
На самом деле решение зависит от этого поста в блоге, поэтому я не буду здесь вдаваться в подробности.Blog.csdn.net/ Сельскохозяйственный комитет
Удивительно то, что я вижу, что вся эта статья основана на скучном приложении CSDN в метро, которое я давно не открывал, сокращено до категории внешнего интерфейса, трех слов «не прокручивать». сразу же появляется в поле зрения, когда я впервые нажимаю на него, это просто кажется правильным. Когда заморачиваешься, читай книги, древние меня честно не обманывают!
несколько советов
- Если вы можете разрабатывать небольшие программы, не разрабатывайте веб-страницы;
- Не путайте и не спекулируйте на нерешенных потребностях;
- Придерживайтесь прекрасной традиции просмотра карты;
- Читайте книги, когда вы сбиты с толку, учитесь, когда вы встревожены;