С реальной точки зрения, как решить проблему спроса на переднем конце!

Vue.js

предисловие

Приложение было запущено вечером, а в 5 часов дня был временный спрос на товары, нужно было сохранить картинку QR-кода страницы H5 в альбом мобильного телефона! Этот QR-код является QR-кодом официальной учетной записи. Цель его сохранения в альбоме — позволить пользователям распознавать QR-код в WeChat и следить за официальной учетной записью!

Чтобы получить этот спрос, требуется менее 3 часов времени на разработку, нет времени спорить или слишком много думать, просто сделайте это!

Мобильная функция длительного нажатия

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

Мобильное использованиеtouchstartа такжеtouchendдля выполнения функции длительного нажатия,preventБлокировать поведение браузера по умолчанию. Многие события браузера имеют поведение по умолчанию. Если поведение по умолчанию не заблокировано, браузер будет выполнять поведение по умолчанию. Мы используем JavaScript для обработки события, которое обычно не требует действий браузера, поэтому заблокируйте его !preventЭто модификатор в vue. Для получения дополнительной информации о модификаторах вы можете перейти сюдамодификатор события.

html

<img
    class="code"
    src="@/images/cloudStallUp/xyhd_05@3x.png"
    @touchstart.prevent="touchin"
    @touchend.prevent="cleartime"
  />

js

touchin() {
  clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
  this.Loop = setTimeout(() => {
   // 这里长按后执行的操作
  }, 1000);
},

// 这个方法主要是用来将每次手指移出之后将计时器清零
cleartime() {
  clearInterval(this.Loop);
},

Реализовать всплывающее диалоговое окно

Фреймворки пользовательского интерфейса в основном имеют свои собственные всплывающие диалоговые окна.Если в вашем проекте используется фреймворк пользовательского интерфейса, просто используйте его напрямую. Если в вашем проекте не используется UI-фреймворк, то необходимо реализовать диалоговое всплывающее окно самостоятельно.

Советы: Не во всех проектах нужно использовать UI framework.Если проект очень простой, то он вам не нужен.Простите меня за эту вечеринку с колесами.Мне нравится делать свои собственные колеса,даже если это не просто в использовании!

Используйте H5dialogВсплывающее окно записи тега.

html

<dialog ref="dialog">
  <div @click="saveImage">保存图片</div>
  <div @click="closeDialog">取消</div>
</dialog>

css

@function vw($px) {
    @return ($px / 750) * 100vw;
}

$c_dd: #dddddd;

dialog {
  border: none;
  padding: 0;

  div {
    width: vw(750);
    font-size: vw(30);
    height: vw(80);
    line-height: vw(80);

    &:last-child {
      border-top: 1px solid $c_dd;
    }
  }
}

/* 设置背景色 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

js

touchin() {
  clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
  this.Loop = setTimeout(() => {
   // 显示
   this.$refs.dialog.showModal();
  }, 1000);
},
......

Показать результаты:

dialogЕсть некоторые проблемы с совместимостью этикеток

Итак, нам нуженpolyfill

Установить

npm install dialog-polyfill

представить на странице

import dialogPolyfill from 'dialog-polyfill'

создать новыйdialog-polyfill.scss

dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}

dialog:not([open]) {
  display: none;
}

dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}

представить на странице

@import "@/style/dialog-polyfill.scss";

После установки полифиллирования фона CSS отличается от родного

/* 支持dialog */
dialog::backdrop { 
  background-color: green;
}
/* polyfill */
dialog + .backdrop { 
  background-color: green;
}

Используйте полифиллы

js

data() {
    return {
        dialog: null
    };
},
mounted() {
    this.dialog =  this.$refs.dialog;
    dialogPolyfill.registerDialog(this.dialog);
},
methods: {
    touchin() {
      clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
      this.Loop = setTimeout(() => {
       this.dialog.showModal();
      }, 1000);
    },
    ......
}

Сохранить картинку в альбом телефона

сохранить с тегом

// 首先考虑使用a标签下载
saveImage(url) {
  if (!url) {
    return new Error("图片地址不正确");
  }

  let a = document.createElement("a");
  a.href = url;
  a.download = "xxxxx";

  if (document.all) {
    a.click();
  } else {
    // 兼容 Firfox
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, true);
    a.dispatchEvent(evt);
  }
  this.closeDialog();
},

closeDialog() {
  this.dialog.close();
},

Самопроверка показала, что это полезно на ПК, но бесполезно на мобильном телефоне, от этого решения отказались.

Использование H5+ API

saveImage() {
    if (!window.plus) return;
    /* eslint-disable */
    plus.gallery.save(
      this.codeImg,
      () => {
        plus.nativeUI.alert("保存图片到相册成功");
      },
      () => {
        plus.nativeUI.alert("保存失败");
      }
    );
    /* eslint-enable */
    this.closeDialog();
},
......

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

Вызвать встроенную возможность приложения реализовать функцию сохранения

Инкапсулировать в mixin.js

// 调用app方法
// androidName->安卓方法名
// iosName->ios方法名
// androidData->传给安卓的参数
// iosData->传给ios的参数
// h5Fuc->不属于安卓和ios时调用的函数
callAPPFunction(androidName, iosName, androidData, iosData, h5Fuc) {
  switch (true) {
    case this.UTILS.isAndroid:
      window.hitumedia_android_js[androidName](androidData);
      break;
    case this.UTILS.isIOS:
      window.webkit.messageHandlers[iosName].postMessage(iosData);
      break;
    default:
      h5Fuc;
  }
},

использовать в main.js

// 导入全局混入
import Mixin from "@/utils/mixin.js";
Vue.mixin(Mixin);

использовать на странице

data() {
    return {
      codeImg: require("@/images/cloudStallUp/xyhd_05@3x.png")
    };
},
...
    saveImage() {
        const url = location.href.split("/")[2];
        // 获取到图片地址，架构原因，我们没有图片服务器，所以暂时只能使用使用项目的地址了
        const postUrl = `http://${url}/activity/${this.codeImg}`;
        this.callAPPFunction("onDownImgs", "", postUrl, "");
        this.closeDialog();
    },
...

Хорошо, требование выполнено полностью.

наконец

Написав эту функцию, пройдя самотестирование, отправьте товар на приемку, а дальше! ! ! Продукт сказал: «Кажется, QR-код редко встречается в приложении. Эта функция больше не нужна ~~~»

Эта функция не нужна~~~~~~~~~~~~~~~~

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

  • 1. После того, как вы пришли к спросу, вы должны сначала определить с продуктом, должен ли спрос быть
  • 2. Обязательно свяжитесь с менеджером проекта по поводу времени.Если предполагается, что определенный период времени не может быть выполнен, обязательно объясните это заранее
  • 3. Не переоценивайте свои способности. Если вы не можете, вы не должны говорить «да». Если можете, вы должны выделить время для переменных.
  • 4. Не принимайте временные потребности, дайте продукту связаться с менеджером проекта.
  • 5. При разработке будьте спокойны, это нормально, что определенная технология может быть полезной в ПК, но не в мобайле или в конкретном мобильном телефоне, просто смените другую технологию.
  • 6. Идея должна быть широкой.Для некоторых функций, которые не могут быть реализованы в Интернете, пусть это делает приложение, и красноречие должно быть хорошо отработано.
  • 7. Не сердись, не сердись, нормально, если функция развита, нормально, если не хочешь, не сердись, блять!
Категории