Полный кадр: свадебное приглашение, запись своими руками

внешний интерфейс
Полный кадр: свадебное приглашение, запись своими руками

Эта статья была впервые опубликована на Nuggets. Пожалуйста, указывайте источник для перепечатки, сохраняйте исходную ссылку и информацию об авторе.

предисловие

Эта статья не совсем техническая, вы можете прийти и посмотреть, как я, жених, усложняю брак.

Буквально в прошлом месяце я сыграл свадьбу и дал обет на всю жизнь с любимой девушкой.

Готовясь к свадьбе, мы решили сделать все возможное, чтобы не выйти за рамки нормы, и сделать все возможное, чтобы родственники и друзья, которые присутствовали на свадьбе, почувствовали, что мы тщательно спланировали каждую деталь. В качестве важной части электронное приглашение, конечно же, не может быть сделано.

Электронные приглашения на свадьбу в наши дни стали обычным явлением. Этот тип приглашения обычно представляет собой страницу H5, созданную свадебным приложением, на которой показаны свадебные фотографии, а также время и место свадьбы.За последние два года были добавлены такие функции, как вручение подарков и благословение. Я полагаю, что вы часто будете видеть приглашения, которыми делятся друзья в кругу друзей.

Я человек, который любит бросать, и мне нравится использовать то, чему я научился, для решения жизненных проблем. Эти общие шаблоны меня явно не удовлетворяют. Так совпало, что я фронтенд-разработчик, и из-за профессионализма и гиковского духа я решил сделать это приглашение сам.

Придумать не сложно: получить облачный сервер, просто создать сайт, написать свои странички, закинуть их на сервер и жить вместе. Вот видите, это совсем не сложно!

Странный.

Предварительная подготовка

Шаблон пользовательского интерфейса

В начале это был мощный удар, но первый удар пришелся по железной пластине — я не умею делать UI-дизайн. Смотрел на себя в зеркало: фотошоп нерешителен, подбор цветов на моем личном сайте интервьюер назвал горячим, а похвалили за хороший рисунок только в детском саду... У меня тусклый квалификацию, и теперь я начинаю улучшать свою эстетику и изучать графический дизайн. Я тороплюсь, я злюсь, я дергаю себя за волосы прядь за прядью...

Подождите, что я здесь? Программист, какие у меня навыки ведения домашнего хозяйства? Программирование для поисковых систем! Так как я не могу произвести его сам, я должен практиковать доктрину заимствования. Поэтому я погуглил и нашел множество шаблонов для электронных приглашений (ключевое слово: RSVP). Почему Google? Предотвращение конфликтов с широко используемыми шаблонами в Китае. После неоднократных обсуждений с невестой мы остановились на наборе шаблонов, которые нам больше всего понравились.

Наконец-то можно приготовить рис.

сервер

Я выбрал облачный сервер ECS от Alibaba Cloud. Поскольку он используется только для размещения статических страниц, он не требует роскошной конфигурации, он прост и освежает (низкая стоимость):

服务器配置

Поскольку мы фронтенд-инженеры, мы просто используем Node.js для создания веб-сервисов. Обратитесь к Alibaba Cloudофициальная документация, я установил среду Node в CentOS. Для рамки я выбралExpress, как это работает у меня (такой новичок). На самом деле, для такого простого приложения, как электронное приглашение, рамка не является необходимостью, но это возможность испытать что-то новое, не так ли? Поэтому я создал простой сервис с помощью Express:

let http = require('http');
let express = require('express');

let app = express();

app.use(express.static('html'));
http.createServer(app).listen(80);

Регистрация и регистрация доменного имени

Теперь я могу получить доступ к веб-странице на своем сервере, но ссылка в таком примитивном виде:http://127.127.127.127:80. Для приглашения на свадьбу это тоже слишком сильно влияет на темперамент. Я отправляю эту ссылку своим родным и друзьям, но они все равно не думают, что я взламываю?

Нет нет нет.

Нефритовый Император сказал: Должно быть доменное имя. Итак, доменное имя было зарегистрировано. После парсинга на сервер вы можете получить доступ к собственной странице через доменное имя.

Кроме того, сайт должен вестиподача ПМСиз. Вам нужно будет заполнить несколько форм, и поставщик услуг доменных имен (у меня это Alibaba Cloud) отправит вам большую синюю завесу для документов, позволяющую делать фотографии и загружать их перед завесой. Это программа не слишком сложная, но необходимая, не веселая, но почему-то кажется мне божественной. В конце концов, вы получите ряд рекордных номеров (например, Пекинский сертификат ICP № 030173).

https

В прошлом году я предпринял небольшую попытку повесить QR-код группы WeChat на стену, чтобы соседи могли отсканировать код и присоединиться к группе. Но групповые QR-коды чувствительны ко времени, и регулярная печать новых QR-кодов — пустая трата бумаги. В то время у меня был собственный веб-сайт, поэтому я придумал решение: распечатать QR-код URL-адреса на бумаге, и URL-адрес указывает на изображение на моем веб-сайте — QR-код группы WeChat, чтобы я нужно только регулярно загружать его. Достаточно QR-кода новой группы. Однако в ходе проверки было установлено, что WeChat будет перехватывать внешнюю цепочку http-протокола, и пользователю необходимо подтвердить, что посетитель может войти на страницу (сейчас он больше не перехватывается). На тот момент у меня не было сил продолжать изучать https, поэтому пришлось сдаться. (Если подумать об этом сейчас, то можно использовать ссылку на стороннее изображение.)

Итак, https — это территория, которую я не завоевал, и на этот раз я должен ее уничтожить.

Чтобы не добавлять лишнюю работу (fèi) (yòng), я выбрал бесплатный SSL-сертификат:

免费的 SSL

Оплата одной рукой и доставка одной рукой, а затем пройти процесс:

申请 SSL 流程

Когда процесс переходит к последнему шагу — загрузке сертификата, вы не видите сертификат, специфичный для сервера Node.js:

SSL 证书下载

К счастью, я нашел старшегостатья, подскажите скачать Nginx. При поддержке старших и поясница не болит, и ноги не болят, и легко закончить https на одном дыхании:

let http = require('http');
let express = require('express');
let fs = require('fs');
let https = require('https');

//读取证书文件
let options = {
    key: fs.readFileSync('./0000000_域名.key'),
    cert: fs.readFileSync('./0000000_域名.pem'),
};

let app = express();

app.use(express.static('html'));
http.createServer(app).listen(80);
https.createServer(options,app).listen(443);

Теперь вы можете использовать доменное имя протокола https для доступа к приглашениям!

Инструмент развертывания

  • Для удаленного подключения к серверу:XShell
  • Файл загружен:XFTP
  • Инструменты управления процессами:PM2

PM2 может помочь вам автоматически перезапустить службу после обновления кода, что намного проще.

После всех работ бэкенд поддержка в основном готова, и можно приступать к открытию (волшебству) отправке (модификации) страницы.

разработка страницы

Компактный шаблон

Во-первых, пожалуйста, оцените эстетический уровень нашей пары:Это наш выбранный шаблон. Стиль свежий и живой, передающий теплый и сладкий эмоциональный посыл.

На странице есть некоторые модули контента, которые к нам не применимы:

  • «Избранные люди»: здесь показаны портреты и информация о шафере и подружках невесты, но мы еще не определились с кандидатами.
  • «Реестр подарков»: здесь показан логотип магазина подарка новичка за предварительный заказ — это не очень обосновано.
  • "RSVP": Эта часть представляет собой форму, используемую для подтверждения присутствия приглашенных. Поскольку форма формы негибкая и не способствует управлению, мы намерены использовать WeChat и телефонные звонки для подтверждения посещаемости.
  • «Настройки цвета темы»: вращающаяся шестерня, прикрепленная к левой стороне интерфейса. Готовый продукт, который мы хотим сделать, не должен обеспечивать функцию скиннинга.

Хорошо, отрежьте эти бесполезные части, а затем замените картинки и скопируйте в шаблон нашу собственную информацию, и электронное приглашение, которое принадлежит нам, начало обретать форму.

Но этого недостаточно, вам нужно немного почистить код.

сжатие шрифта

Первая проблема — это шрифт.

В исходном шаблоне используется шрифт Oswald:

Oswald 字体

Этот шрифт тонкий, высокий и без засечек, эффект элегантный и приятный для глаз, но он не поддерживает китайский язык. Соответствующие шрифты могут улучшить взаимодействие с пользователем.Если стиль китайских шрифтов не соответствует Освальду, общий вид будет значительно снижен. Мне нужен китайский шрифт с похожим стилем.

я здесьслово заПосле неоднократных поисков и сравнений я наконец нашел сокровище——Основатель Джун Хей, серияФан Чжэнцзюнь black_fiberа такжеОснователь красивый черный _ толстыйВесь шарм оригинального шаблонного шрифта:

方正俊黑_纤

方正俊黑_粗

Эти два шрифта имеют бесплатную лицензию для некоммерческого использования, поэтому я могу использовать их с уверенностью.

字体免费授权

На официальном сайте Founder, если вы хотите загружать шрифты, вы должны быть дизайнером (см. тег за названием шрифта на картинке выше). Но что интересно, пока вы проверяете свою личность как дизайнера при регистрации учетной записи, официальный представитель довольно любезен. (С сегодняшнего дня я сертифицированный дизайнер Founder Font Library)

В CSS установите шрифт Fangzheng Junhe, и эффект страницы будет таким, как я хочу.

но! Всем известно, что размер файлов китайских шрифтов просто пять больших и три толстых.

В содержимом пригласительного билета не так много слов, и если использовать полный пакет шрифтов онлайн, это неизбежно замедлит скорость загрузки. Когда я рассылаю такие приглашения своим родственникам и друзьям, они все равно не считают меня придурком?

Небольшой поиск в Baidu обнаружит, что есть немало разработчиков, столкнувшихся с проблемой такого рода, но большинство справочных постов в Интернете не нашли решения, которое меня удовлетворило бы. Поворочавшись, я нашелслово паук+, этот инструмент может помочь нам автоматически анализировать и сжимать файлы шрифтов по требованию. Просто напишите путь к локальному коду или онлайн-ссылку в файл конфигурации и запуститеfsp runзавершить. На следующем рисунке показан эффект после анализа и сжатия шрифта:

字体文件压缩后

Такой эффект сжатия действительно освежает~~~ (Что касаетсяFZJunHJW_Cu.TTFПочему не поменялся, пусть сначала продам)

Параллаксная прокрутка (Параллакс)

Параллаксная прокрутка, этот эффект должен быть знаком всем, верно? когда выстраница шаблонаКогда вы двигаете страницу вверх и вниз, вы обнаружите, что фоновые изображения и содержимое некоторых разделов не являются относительно статичными.Этот эффект значительно увеличивает ощущение движения (bī) страницы (gé), а именно этого эффекта я и хочу. подать заявку на приглашения в любом случае. .

У нас есть только один способ отправить приглашения — это чат WeChat. Будь то пожилой человек, который любит хватать красные конверты на мобильном телефоне, или друг того же возраста, который привык висеть в WeChat на компьютере на работе, WeChat, безусловно, является наиболее эффективным способом общения.

Поэтому мне нужно протестировать свои приглашения в WeChat на десктопе (ПК, Mac) и мобильных телефонах.

На десктопе работает нормально, а на мобильной версии эффект прокрутки параллакса не работает.

Мы знаем, что самый простой способ добиться прокрутки параллакса — это использоватьbackground-attachment: fixed;, и практика страницы шаблона заключается в добавлении динамической модификации на этой основеbackground-position, чтобы фоновое изображение отображалось медленнее при прокрутке (а не фиксировалось на месте). Теперь он недействителен на мобильной стороне, предположительно, это проблема совместимости. пойдемcaniuse.comПроверьте это:

Can I use background-attachment?

Разумеется, встроенное ядро ​​браузера QQ X5 WeChat не поддерживает эту функцию CSS. Есть поговорка, что этот эффект повлияет на производительность мобильных браузеров и повлияет на работу, поэтому эта функция просто не поддерживается.

Если пригласительный билет, открытый в мобильном телефоне WeChat, не имеет динамического эффекта, он будет выглядеть так посредственно.

После поиска всех технических сообщений в древнем и современном Китае и за границей, но безрезультатно, я решил использовать JavaScript для его реализации, так как так называемое использование насилия для контроля над насилием и одна сила для победы над десятью ассоциациями...

Идея такова:

  • Сначала поместите фоновое изображение с<img />Он загружается на страницу как метка и скрывается над областью просмотра;
  • Следите за прокруткой страницы, когда раздел, требующий специальных эффектов, прокручивается в окне просмотра, вытягивайте соответствующее изображение в окно просмотра для исполнения на сцене;
  • Когда элемент прокручивается за пределы области просмотра, соответствующее изображение выходит и возвращается в верхнюю часть области просмотра.

Чувствуете себя немного сбитым с толку? Посмотри на мой рот, я тупой, как талия хлопчатобумажных штанов, покажи код и ты поймешь:

<!-- 背景图片 -->
<img src='img.png' />

<!-- 应用特效的 section -->
<section id='section'>All eyes on me.</section>

img {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
}

$(document).scroll(function () {
    var windowScrlTop = $(window).scrollTop();
    var windowH = $(window).height();
    if (
        ($('#section').offset().top - windowScrlTop) <= windowH 
        && ($('#section').offset().top - windowScrlTop) >-$('#section').height()
    ){
        // 当 section 位于视口中时：
        $('img').css('transform', 'translateY(0)');
    } else {
        // 当 section 位于视口以外时：
        $('img').css('transform', 'translateY(-100%)');
    }
});

Благодаря такому управлению эффект параллаксной прокрутки можно реализовать во встроенном браузере WeChat. Нет способа проверить этоbackground-attachment: fixed;Производительность лучше, но при тестировании на реальной машине скольжение вверх и вниз происходит плавно, без задержек.

Я отправил невесте приглашение с красивыми страницами и эффектным эффектом, готовое к потоку комплиментов и поцелуев: «Почему у нас нет карты в наших приглашениях? Я думаю, что они есть у всех остальных?»

😳О, новый спрос правильный, хорошо, я понял.

Карты и навигация

Цель добавления карты в приглашение — уточнить информацию о местоположении места проведения свадьбы, чтобы родственники и друзья могли легко добраться. Это требует:

  1. Отметьте местоположение на видном месте на карте;
  2. Щелкните карту, чтобы перейти на страницу навигации по маршруту.

Поскольку он в основном используется в WeChat, я не задумываясь выбрал Tencent Maps. существуетСлужбы определения местоположения TencentПосле регистрации учетной записи, подтверждения личности и подачи заявки на ключ разработки вы можете приступить к разработке. Здесь я используюAPI карт JavaScript.

Сначала загрузите службу API на странице приглашения:

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
//“YOUR_KEY” 即为你自己的开发密钥

Затем установите элемент контейнера и укажите указанные ширину и высоту:

<div id="map" style="width:500px; height:300px"></div>

Далее вам нужно инициализировать:

var centerLatlng = new qq.maps.LatLng(39.908551, 116.397743);//地图的中心点的经纬度。
var myOptions = {
    zoom: 15,
    center: centerLatlng,
    mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("map"), myOptions);//地图实例

На этом цель отображения карты достигнута. Но для того, чтобы улучшить интерактивный опыт, необходимо проделать некоторую работу:

  1. Отметьте место свадьбы.

    //在地图上添加标注：
var anchor = new qq.maps.Point(10, 10),//相对于标记点的位置
    size = new qq.maps.Size(24, 24),//显示尺寸
    origin = new qq.maps.Point(0, 0),//相对于图片左上角的相对像素坐标
    icon = new qq.maps.MarkerImage('./img/center.gif', size, origin, anchor);//用于标记的图片的路径

var marker = new qq.maps.Marker({
    icon,
    position: centerLatlng,
    map,
});

  2. Сообщите пользователю текстом, что точка маркера кликабельна:

    var label = new qq.maps.Label({
    position: centerLatlng,
    map,
    content: '点击红点查看导航',
    style: {
        margin: '-18px -10px 0px 10px'
    }
});

  3. Реализовать функцию открытия навигации по приложению (мобильный терминал) или страницы подробной карты (настольный терминал) после нажатия. Если это настольное устройство, вы можете открыть карту по центру места свадьбы на новой веб-странице; если это мобильный терминал, это немного более громоздко: используйте встроенный картографический сервис WeChat, чтобы позвонить третьему. приложение карты партии (карта Baidu, карта AutoNavi и т. д.), чтобы показать маршрут навигации --- Если вы хотите вытащить эту редьку, вам придется вытащить много грязи.

    Поздравляю себя, разблокированы побочные квесты.

    Затем следующие шаги:

    • Зарегистрируйте общедоступную учетную запись WeChat.

    • Настроить в [Настройки - Настройки официальной учетной записи - Настройки функций] официальной учетной записиИмя домена безопасности интерфейса JS.

    • Получатьaccess_token:

      //服务端 Node.js 代码：
const request = require('request');
request.get({
        uri: 'https://api.weixin.qq.com/cgi-bin/token',
        json: true,
        qs: {
            grant_type: 'client_credential',
            appid: YOUR_APPID, 
            secret: YOUR_APPSECRET
        }
    }, (err, res, body) => {
        if (err) {
            console.log(err)
            return
        }
        
        if (body.errcode) {
            return
        }
        console.log('返回值：',res);// {"access_token":"艾克赛斯_套肯","expires_in":7200}
    }
);

    • Получатьjsapi_ticket:

      //服务端 Node.js 代码：
const request = require('request');
request.get({
        uri: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
        json: true,
        qs: {
            access_token: access_token,
            type: 'jsapi'
        }
    }, (err, res, body) => {
        if (err) {
            console.log(err)
            return
        }
        
        if (body.errcode) {
            return
        }
        console.log('返回值：',res);
        /* 返回值示例：
        {
          "errcode":0,
          "errmsg":"ok",
          "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
          "expires_in":7200
        } */
    }
);

    • согласно сАлгоритм подписиСоздать подпись:

      // 服务端 Node.js 代码：
const crypto = require('crypto');

// sha1加密
function sha1(str) {
    let shasum = crypto.createHash("sha1")
    shasum.update(str)
    str = shasum.digest("hex")
    return str
}

// 生成时间戳
function createTimestamp() {
    return parseInt(new Date().getTime() / 1000) + ''
}

// 生成随机串
function createNonceStr() {
    return Math.random().toString(36).substr(2, 15)
}

// 字典排序
function raw(args) {
    var keys = Object.keys(args)
    keys = keys.sort()
    var newArgs = {}
    keys.forEach(function (key) {
        newArgs[key.toLowerCase()] = args[key]
    })

    var string = ''
    for (var k in newArgs) {
        string += '&' + k + '=' + newArgs[k]
    }
    string = string.substr(1)
    return string
}

var ret = {
        jsapi_ticket: ticket,//上个步骤中获取到的 jsapi_ticket。
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url:'www.url.com',//当前网页的URL。
    };
    
var string = raw(ret);
const signature = sha1(string);//这就是我们需要的签名。

    • Вставьте файл JS на страницу:

      <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

    • Проверка разрешений (необходимые параметры должны быть запрошены у бэкенда):

      //前端 JavaScript 代码：
wx.config({
  debug: true, // 开启调试模式。
  appId: '', // 必填，APPID
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，上个步骤中生成的签名
  jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，此处为地理位置接口 openLocation。
});

    • Прослушивание событий кликов:

          qq.maps.event.addListener(marker, 'click', function () {
        //判断运行设备是移动设备还是桌面设备
        if ((navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                ))) {
            //移动设备中调用 JSSDK 接口：
            wx.openLocation({
                latitude: 39.908551,
                longitude: 116.397743,
                name: '天安门',
                address: '北京市东城区东长安街',
                scale: 15, // 地图缩放级别,范围为从1~28。
            });
        } else {
            //桌面设备中打开新网页展示地图：
            window.open('https://j.map.baidu.com/26/BK');
        }
    });

После того, как весь этот набор завершен, функция навигации по карте наконец реализована.

Имя можно настроить

Может быть, читатели так же устали, как и я после прочтения этого - неужели стоит делать общую статичную страницу?

Конечно больше.

Когда идея электронного приглашения своими руками только родилась, я решил сделать это приглашение изюминкой: имя гостя можно настроить.

Подумайте о групповых текстовых сообщениях, которые вы получили во время китайского Нового года, более вежливых, но менее искренних. Вы знаете, что текстовое наполнение копируется и вставляется другой стороной, поэтому строки новогоднего поздравления с теплой атмосферой вы вообще не прочтете.

И что я хочу сделать, так это позволить каждому гостю увидеть свое имя в приглашении, чтобы гости поняли: это приглашение эксклюзивно для вас и отличается от других.

Это мой способ выразить любовь семье и друзьям, которых я пригласил, и я изо всех сил стараюсь, чтобы моя свадьба была как можно более официальной.

Я разделил имя на три части:

  1. Приставка, необязательная: уважаемый, уважаемый.
  2. Имя или относительный адрес, вводимый вручную, например: Ван Дачуй/дядя и т. д.
  3. Суффикс, необязательный: Mr., Ms., Ms. (Если вторая часть является приветствием родства, опустите третью часть)

Идея реализации следующая:

  • Добавьте имя гостя в качестве параметра запроса в конец URL-адреса, например:

    https://www.a.com?prefix=尊敬的&name=王大锤&suffix=先生

  • Параметры получаются с помощью JavaScript на странице и динамически вставляются в соответствующую позицию.

    const info = window.location.search;
if (info.length) {
	const arr = info.replace(/\?/, '').split('&');
	const prefix = (arr[0].split('='))[1];
	const name = (arr[1].split('='))[1];
	const suffix = (arr[2].split('='))[1];
	
	$('#prefix').html(decodeURI(prefix))
	$('#name').html(decodeURI(name))
	$('#suffix').html(decodeURI(suffix))
}

Таким образом, если соответствующий заголовок написан после ссылки и отправлен гостю, то, что другая сторона увидит, открыв ее, будет пригласительным билетом с эксклюзивным содержанием.

В предыдущем разделе о сжатии шрифтов я упомянул, что сжатия нет.FZJunHJW_Cu.TTFэтот файл шрифта. Прочитав это, вы должны узнать причину — китайские иероглифы, используемые в пользовательском приветствии, не определены, поэтому можно загрузить только полный пакет шрифтов.

Однако, если вы вручную вводите ссылку при отправке приглашений каждому гостю, это будет неэффективно и подвержено ошибкам. Если это правда, меня, вероятно, уволят из индустрии.

Don't repeat yourself.

Инструменты для решения этой задачи несложны: ввод — это изменяемый текст, а вывод — URL-адрес. Чтобы довести лень до крайности, я также добавил функцию копирования одним щелчком мыши и генерацию короткого URL-адреса. Реализация страницы очень проста — быстрая доставка VUE + ElementUI:

请柬网址生成器

Из двух-трех бесплатных сервисов сокращения URL-адресов, которые я пробовал в то время, толькоКороткий URL-адрес BaiduПоддержка создания коротких URL-адресов https, что более безопасно. В июле короткий URL-адрес Baidu все еще был бесплатным, а теперь он стал платной моделью, но скорость генерации коротких URL-адресов значительно улучшилась.

Здесь полностью подключен весь пригласительный билет, после несложного тестирования и оптимизации его можно пускать в работу.

Запрет микроконвертов и апелляция

Солнечным утром со свадьбы я настроюсь и зайду в WeChat, открою список гостей, введу имя, сгенерирую сайт, отправлю приглашения, наслаждаюсь похвалой и благословением друзей и близких, чувствую, что я плохой.

Внезапный!

Я был ошеломлен.

Очевидно, что это статическая страница, безвредная для людей и животных, так почему же она классифицируется как флуд и зверь?

успойкойся. Даже если внешний вид возмутителен, за ним должна быть логическая причина. Не значит ли это, что на нашей странице есть то и это?Начнем сначала с этого направления. Я нашел плагин Chrome, который может обнаруживать нарушения страниц:

Просто откройте страницу, которую необходимо обнаружить, а затем щелкните логотип 🚫 в правом верхнем углу Chrome, плагин отобразит подозрительные слова, появляющиеся на странице, во всплывающем окне и отметит соответствующую позицию ярко-желтым фоном. . Взяв в качестве примера домашнюю страницу Nuggets, эффект выглядит следующим образом:

Так какие же деликатные слова на моей странице приглашения?

Я могу пойти к тебе.

Я думаю, что тезаурус текстового обзора, используемый WeChat, не совсем совпадает с тезаурусом плагина, но должны быть совпадения Я проверил текст и код невооруженным глазом и не нашел подозрительных слов.

Я предполагаю, что это было из-за того, что я часто отправлял ссылки нескольким пользователям за короткий промежуток времени (и ссылки также имели параметры), которые запускали защитный механизм WeChat и расценивали мое поведение как ненормальное действие, такое как преследование.Приглашения блокируются.

Так обидели и так обидели. Другого пути нет, я нажимаю на блок WeChat внизу страницы申请恢复访问, заполните соответствующую информацию и отправьте ее, и начнется процесс ожидания, полный беспокойства и разочарования.

Не прошло и получаса...

Я тороплюсь, я злюсь, я дергаю себя за волосы прядь за прядью...

И от моегоСпецификация управления контентом внешних ссылок WeChatЯ нашла почтовый ящик для обращения, искренне написала книгу кровью и слезами и отправила. Другая сторона быстро ответила мне, что она была разблокирована, я проверил ее, и к ней действительно можно получить доступ в обычном режиме. После того, как дождь, наконец, прошел, я решил съесть еще несколько тарелок в полдень, чтобы выразить свою радость.

Я узнал об этом после еды, и меня снова забанили... Это просто напоминает мне о страхе оказаться под контролем апплета WeChat, который не проходит проверку.

Короче говоря, после того, как меня снова и снова блокировали — разблокировали, снова заблокировали — и снова разблокировали, мои приглашения, наконец, больше не считаются контентом с запретом на 18 лет. В эти два дня моя жизнь была похожа на американские горки со взлетами и падениями, прыжками вверх и вниз, и после благополучного приземления мое сердце забилось.

Эпилог

Ну и все зрители и друзья перед экранами разного размера, вот и весь процесс моих электронных пригласительных своими руками. Техническое содержание невелико, но повороты тривиальны, и, конечно же, удовольствие и чувство достижения также пропорциональны вкладу.

По словам так много, что я больше всего хочу поделиться с тобой,Удивительно уметь писать код.

от неумело выбитогоHello, worldВначале мы изучаем синтаксис языка, изучаем различные библиотеки и фреймворки, вникаем в алгоритмы... Мы зайдем очень далеко, мы устремимся на передовую.

Может быть, мы все устали от работы целыми днями, и самая искренняя любовь и тяга к программированию поначалу постепенно угасала.

Но не забывайте, что программирование — это волшебство, оно может решить проблемы на работе, а также добавить красок в вашу жизнь. Может быть, просто немного знать HTML, и вы можете делать приглашения, которые хотите.

Мы все верим, что программирование может принести нам бесконечное удовольствие, поэтому вы и читаете эту статью.

Спасибо за терпение в чтении.Если вы можете дать мне несколько советов по техническим моментам в статье, я буду очень благодарен, также я приглашаю друзей, которые столкнулись с той же проблемой, чтобы обсудить со мной.

В заключение желаю вам удачи с вашими близкими.

Категории