Taro + Mini Program Практика облачной разработки

внешний интерфейс сервер JavaScript Апплет WeChat

предисловие

Мини-программы открывают возможности облачной разработки, предоставляя разработчикам возможность быстро создавать серверные сервисы для Мини-программ.Как фронтенд, недовольный новыми технологиями, он тоже в этом очень заинтересован;

Taro — это многотерминальное решение для разработки, запущенное Bump Labs на основе спецификации синтаксиса React.По сравнению с mpvue или wepy, в нем больше ям из-за его молодости, но оно очень подходит для таких людей, как я, склонных к разработке с React ( конкретное сравнение можно найти в разделе «Технический анализ и выбор среды разработки апплета»).

Я совместил два, очистил с помощью Cheerio и суперагента.использовать case.jp, разработал«Японский помощник по вариантам использования», Так как я только тренирую свою руку, то пишу относительно грубо, и я все еще беззастенчиво надеюсь попросить звезду 🤟

Начиная

Статьи по облачной разработке

  • Строительство окружающей среды

Облачная разработка может быть создана двумя способами:

  1. Создайте проект с быстрым запуском (шаблон быстрого запуска облачной разработки)

    Таким образом, в каталоге одновременно будут созданы базовый шаблон минипрограммы с именем miniprogram с примером вызова облачной разработки и каталог с именем cloudfuntions для хранения облачных функций, чтобы можно было начать новый проект;

  2. Используйте облачную разработку на основе существующего апплета

    Создайте папку в каталоге апплета в качестве каталога облачных функций, а затем добавьте новое поле «cloudfunctionRoot»: «ваш каталог облачных функций» в файле project.config.json, вы можете увидеть его в инструментах разработчика WeChat Значок каталог становится облаком, и вы можете создать облачную функцию в этом каталоге;

  • Написание облачных функций

Когда облачная функция создается в каталоге облачных функций с помощью инструментов разработчика WeChat, каталог будет создан в соответствии с именем, и этот каталог содержит index.js и package.json.

Используйте следующие методы для вызова облачных функций в апплете.

wx.cloud.callFunction({
    name: '云函数名称',
    data: {
      key1: 'value1',
      key2: 'value2'
    }
}).then((res) => {
    console.log(res);
}).catch((e) => {
    console.log(e);
});

Функция входа index.js выглядит следующим образом:

//云函数入口函数
exports.main = async (event, context) => {
    // 参数获取在event 中获取，如使用上面的调用函数后，获取data使用 event.key1、event.key2即可
    const { key1, key2 } = event;
    return { query: { key1, key2 } }
}

Каждую облачную функцию можно рассматривать как отдельный сервис.Если вам нужно установить сторонние зависимости, вам просто нужно щелкнуть правой кнопкой мыши каталог и выбрать在终端中打开, а такжеnpm installпросто зависеть от

Следует отметить, что каждая облачная функция независима, и необходимые зависимости должны выполняться в соответствующем каталоге.npm install, но это сделало бы проект очень большим и неэлегантным. Итак, далее я представляю tcb-router

  • Управление маршрутами с помощью tcb-router

tcb-routerОн разработан командой Tencent Cloud и представляет собой облегченную библиотеку маршрутизации классов для облачных функций, основанную на разработке апплет-облако в стиле koa.Он в основном используется для оптимизации логики обработки серверных функций.

Способ использования tcb-router прост

const TcbRouter = require('tcb-router');
exports.main = (event, context) => {
    const app = new TcbRouter({ event });
    app.router('路由名称', async (ctx) => {
        //原有的event需要通过ctx._req.event 获取
        const { param1, param2 } = ctx._req.event;
        ctx.body = { key1: value1 };
    });
})

В это время метод вызова апплета также необходимо изменить на:

wx.cloud.callFunction({
    name: '云函数名称',
    data: {
      $url: '路由名称',
      // 其他数据
      param1: 'test1',
      param2: 'test2'
    },
    success: res => {},
    fail: err => {
      console.error(`[云函数] [${action}] 调用失败`, err)
    }
})

Таро

  • Строительство окружающей среды
npm install -g @tarojs/cli
taro init myApp
  • яма столкнулась
  1. Недостаточная поддержка API

Поскольку Taro не поддерживает, например, некоторые новые API WeChat, его необходимо использовать при использовании облачной разработки.wx.cloud, Таро не поддерживает, но можно использовать про тест напрямуюwxпеременная, но это напомнит eslint, выглядит очень неприятно, можно.eslintrcДобавьте следующий код в файл;

"globals": {
  "wx": true
},

  1. Массивами JSX нельзя управлять с помощью методов, отличных от Array#map.

  2. Передача элементов JSX в параметрах JSX (props) запрещена (taro/no-jsx-in-props)

Рептилии

superagent — это очень практичный модуль HTTP-запросов. Он очень полезен для сканирования веб-страниц и очень прост в использовании. Ниже приведено то, что я сканирую.yourei.jpКод используется, когда:

// const superagent = require('superagent');
// ...
function crawler(url, cb) {
  return new Promise((resolve, reject) => {
    superagent.get(url).set({
      'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36'
    }).end(function (err, res) {
      if (err) {
        reject(err);
        return;
      }
      resolve(res);
    });
  });
}

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

В использованииsuperagentПосле сканирования содержимого веб-страницы вы можете использовать следующие методы для анализа кода страницы.

    // const cheerio = require('cheerio');
    // ...
    const result = crawler(apiUrl).then((res) => {
      // 使用load 之后，$ 即可同jquery 一样使用选择器来选择元素了
      const $ = cheerio.load(res.text);
      const categories = [];
      $('[data-toggle]').each((i, ele) => {
        // 可以使用.text()、.html() 等方式获取元素的内容
        categories.push($(ele).attr('href'));
      });
      return {
        list: categories,
      };
    });

Суммировать

  • Taro

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

  • облачная разработка

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

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

Ссылаться на

Документация по разработке мини-программы в облаке

справочная документация по tcb-маршрутизатору

Многотерминальная унифицированная среда разработки Taro

Категории