Введение
В связи с потребностями проекта я недавно разработал веб-страницу публичного аккаунта. За этот период я тоже наступил на некоторые ямы, после решения которых я готов рассмотреть проект. Запишите проблемы, решаемые проектом от разработки до запуска, и суммируйте этапы использования vue для разработки общедоступной учетной записи. Это удобно для дальнейшего использования. Надеюсь, это поможет вам
Предыстория проекта
В основном это страница h5, и задействованные функции не сложны.Основная причина в том, что публичный аккаунт давно не разрабатывался, поэтому я немного не знаком со всеми этапами разработки. К ним относятся метод вызова WeChat SDK, авторизация пользователя WeChat и доступ к SDK и т. д. В основном вокруг шагов развития, чтобы разобраться.
Начинать
Поскольку это страница h5, общий проект невелик, и тогда при выборе технологии проекта было принято решение использовать инфраструктуру vue для разработки. Используя vue для разработки h5, общее ощущение остается относительно эффективным. С точки зрения библиотеки ui выбрана библиотека vant.Компоненты в целом неплохие.Поддерживает пользовательские темы для облегчения настройки стиля и больше подходит для разработки h5.
Создайте проект с vue-cli
Установите инструменты для строительных лесов
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Создать проект
vue create water_project
Затем создайте каталог проекта
.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── api
│ ├── assets
│ ├── components
│ ├── global.less
│ ├── main.js
│ ├── mock
│ ├── router
│ ├── store
│ ├── utils
│ └── views
└── vue.config.js
Адаптация для мобильных устройств
Поскольку это мобильная веб-страница, ее необходимо адаптировать. В интернете есть много схем адаптации, которые здесь обсуждаться не будут, главное, что схема, использованная в этом проекте,amfe-flexibleкомбинироватьremЭто решение от Taobao. О блоке конструкторского проектаpxПеревести вremиспользуетpostcssизpostcss-pxtoremстроить планы. это практичноwebpackизloaderЭто также возможно сделать, и конкретный план — Baidu.
- Установить
amfe-flexibleМешок
npm i amfe-flexible -S
- Установить
postcss-pxtoremплагин
npm i postcss-pxtorem -D
- Представлено в main.js
amfe-flexible
import "amfe-flexible"
- Настройте плагин postcss в vue.config.js
Если в проекте нет файла vue.config.js, создайте его вручную — это конфигурационный файл vue cli.
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ["*"],
}),
],
},
},
На данный момент адаптация стиля завершена.Почему rootValue 37.5.Это в основном для адаптации ванта,поэтому проект дизайна основан на 375px. Если сторонняя библиотека пользовательского интерфейса не используется, черновик проекта может использовать 750 в качестве эталона, а значение rootValue в настоящее время равно 75.
используйте normalize.css
Используйте normalize.css, чтобы устранить основные различия в стилях между браузерами.
npm i normalize.css -S
существуетmain.jsвведен в
import "normalize.css"
Доступ к библиотеке вантов
vant — это библиотека пользовательского интерфейса, созданная Youzan, и, конечно, гораздо быстрее стоять на плечах гигантов. Эту стороннюю библиотеку можно использовать только как основу, а стиль следует настраивать при наличии эскиза дизайна. Для простого стиля удобнее поддерживать настройку темы.Если некоторые стили не предоставляют пользовательские темы, вы можете написать стили только для их покрытия.
- Скачайте и установите вант
npm i vant -S
- Есть 3 способа введения компонентов, их также представляет официальный сайт.Подробности смотрите на официальном сайте, и кратко опишите, как его использовать:
Способ 1. Автоматический импорт компонентов по запросу (рекомендуется)
babel-plugin-importЭто подключаемый модуль Babel, который автоматически преобразует метод импорта в метод импорта по запросу в процессе компиляции.
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
Способ 2. Вручную импортировать компоненты по мере необходимости
Без использования плагинов необходимые компоненты можно импортировать вручную.
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
Способ 3. Импорт всех компонентов
Vant поддерживает одновременный импорт всех компонентов. Импорт всех компонентов увеличит размер пакета кода, поэтому такая практика не рекомендуется.
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Советы. После импорта конфигурации по требованию нельзя напрямую импортировать все компоненты.
индивидуальная тема ванта
Шаг 1 Импорт исходного файла стиля
При настройке темы вам необходимо импортировать файл стиля Less, соответствующий компоненту, который поддерживает как импорт по запросу, так и импорт вручную.
Внедряйте стили по запросу (рекомендуется)
Настройте исходные файлы стилей импорта по запросу в babel.config.js. Обратите внимание, что babel6 не поддерживает стили импорта по запросу, пожалуйста, импортируйте стили вручную.
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`,
},
'vant',
],
],
};
Импорт стилей вручную
// 引入全部样式
import 'vant/lib/index.less';
// 引入单个组件样式
import 'vant/lib/button/style/less';
Шаг 2. Измените переменную стиля
используя МеньшеmodifyVarsПеременные могут быть изменены.Ниже приведена эталонная конфигурация веб-пакета.
// webpack.config.js
module.exports = {
rules: [
{
test: /\.less$/,
use: [
// ...其他 loader 配置
{
loader: 'less-loader',
options: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
],
},
],
};
Если проект, созданный vue-cli, можно найти вvue.config.jsв конфигурации.
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
Представляем WeChat jssdk
Есть два способа импортировать jsssdk: один — напрямую импортировать его с помощью ссылки js, которая прописана в index.html.
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
Затем вы можете использовать методы, предоставляемые SDK, вызвав window.wx.xxx там, где вы его используете.
Второй способ — использовать пакет npm.
- Установите weixin-js-sdk
npm i weixin-js-sdk -S
- использовать в main.js
import wx from "weixin-js-sdk"
// 挂在vue的原型上方便使用
Vue.prototype.$wx = wx;
После этого введения вы можете использовать this.$wx.xx для использования соответствующего метода, например:
this.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: String(res.data.timestamp), // 必填，生成签名的时间戳
nonceStr: String(res.data.nonceStr), // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList: [
"getNetworkType",
"getLocation",
], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
Вы можете использовать API только после регистрации и проверки SDK
На самом деле, важная логика регистрации находится в бэкенде, предоставляя интерфейс для получения информации о конфигурации, а фронтенд напрямую вызывает метод config sdk для регистрации. Здесь логика регистрации sdk прописана в файле app.vue
- Инкапсулировать метод для регистрации sdk
async getWxJssdkConf() {
const res = await this.$api.getSdkConfig({
url: window.location.href.split("#")[0],
});
if (res.success) {
this.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: String(res.data.timestamp), // 必填，生成签名的时间戳
nonceStr: String(res.data.nonceStr), // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList: [
"getNetworkType",
"getLocation",
], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
this.$wx.ready(() => {
this.$wx.checkJsApi({
jsApiList: ["getNetworkType", "getLocation"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function (res) {
console.log("checkJsApi", res);
},
});
});
this.$wx.error((res) => {
console.log("wx.error", res);
});
}
},
created() {
this.getWxJssdkConf();
},
вthis.$api.getSdkConfigДля того, чтобы вызывать интерфейс фона, здесь тоже монтируется апи на прототип vue, которым удобно пользоваться, не вводя апи для каждой страницы.
Vue.prototype.$api = api
После успешной регистрации в app.vue вы можете использовать API SDK.
Авторизация WeChat
Если вы хотите получить информацию о пользователе, пользователь должен быть авторизован. При авторизации используется интерфейс, предоставляемый WeChat.Нажмите здесь, чтобы узнать подробности, если вы получаете только openid пользователя, вы можете использовать только тихую авторизацию без активной авторизации пользователя. Подробности смотрите в документации, здесь для использования тихой авторизации требуется только openid следующим образом:
- Используйте его на главном входе, требующем авторизации, например на домашней странице Home, необходимо сначала вызвать интерфейс WeChat, чтобы получить код, а затем использовать код для перехода на серверную часть в обмен на openid
/**
* @description: 获取授权code
* @param {*}
* @return {*}
*/
getCode() {
// 从 window.location.href 中截取 code 并且赋值
// window.location.href.split('#')[0]
if (window.location.href.indexOf("state") !== -1) {
this.code = qs.parse(
window.location.href.split("#")[0].split("?")[1]
).code;
}
if (this.code) {
// 存在 code 直接调用接口
this.handGetUserInfo(this.code);
} else {
this.handLogin();
}
},
/**
* @description: 获取用户授权登陆
* @param {*}
* @return {*}
*/
handLogin() {
// 重定向地址重定到当前页面，在路径获取 code
const hrefUrl = window.location.href;
if (this.code === "") {
window.location.replace(`
https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX
&redirect_uri=${encodeURIComponent(hrefUrl)}
&response_type=code
&scope=snsapi_base
&state=h5#wechat_redirect`);
}
},
/**
* @description: 获取用户信息
* @param {*} code
* @return {*}
*/
handGetUserInfo(code) {
// 调用后台接口
},
Вот основная логика авторизации, и работает она в принципе без происшествий.
Запрашивать отключение
Если сеть пользователя отключена, он перейдет на страницу запроса на отключение. Метод, предоставляемый html, в основном используется для суждения, а логика суждения записывается в файле app.vue.Поскольку каждая страница будет подсказывать, она будет обрабатываться непосредственно на главном входе.
mounted() {
window.addEventListener("online", this.updateOnlineStatus);
window.addEventListener("offline", this.updateOnlineStatus);
},
methods: {
updateOnlineStatus(e) {
const { type } = e;
console.log("type==============", type);
this.onLine = type === "online";
},
}
beforeDestroy() {
window.removeEventListener("online", this.updateOnlineStatus);
window.removeEventListener("offline", this.updateOnlineStatus);
},
Это основной метод проверки сетевого подключения пользователя.
Определить, является ли веб-страница открытой WeChat
Здесь в основном используется навигационная защита vue-router.Браузер оценивается перед переходом.Если это не встроенный браузер WeChat, он сразу перейдет на ненормальную страницу подсказки.
router.beforeEach((to, from, next) => {
const ua = navigator.userAgent.toLowerCase();
if (
to.path !== "/notwx" &&
!(ua.match(/MicroMessenger/i) == "micromessenger")
) {
next("/notwx");
} else {
next();
}
});
Иногда страница перескакивает, и высота прокрутки страницы остается на высоте прокрутки предыдущей страницы, это тоже решается в навигационной защите, и она автоматически прокручивается вверх.
router.afterEach(() => {
window.scrollTo(0, 0);
});
резюме
На данный момент весь процесс разработки был просто записан, что также является своего рода саморазвитием, а также удобно для дальнейшего использования. Я надеюсь, что это будет полезно для вас, кто видит статью, личное мнение, если у вас есть какие-либо вопросы, пожалуйста, поправьте меня, если вы нашли это полезным, пожалуйста, как это, спасибо.