Таро, как разработчик React, имеет опыт

Taro

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

Резюме этой статьи
  1. Использование Taro, избыточная разработка отображения апплета регистрации учеников в классе
  2. *Основное использование Таро
  3. * Как разработчик React, меры предосторожности при использовании (только те, которые встречаются на практике)
  4. Обработка в фактической разработке
  5. Краткое изложение проблем, возникших при разработке апплета Taro и WeChat
  6. TODO

1. Войдите в апплет

Обзор функций: платформа регистрации на основе географического положения (широта и долгота). Кроме того, он включает в себя модуль новостей кампуса, модуль загрузки данных Word, модуль личной информации и т. д. Отсканируйте код для входа: номер учетной записи Student Experience 123456, пароль 123456.

小程序码
Исходный код нажмите здесь"""

1. Регистрация на основе широты и долготы Tencent API

2. Раздел новостей, загрузка данных слова

3. Модуль личной информации

Во-вторых, основное использование Таро.

  1. yarn global add @tarojs/cli, используйте пряжу для установки CLI
  2. taro init myAppСоздавайте проекты шаблонов (шаблоны генераторов для redux, mobx и т. д. можно создать, выполнив ряд команд по умолчанию). И тогда зависимости будут установлены по умолчанию.
  3. npm un dev:weap, войдите в инструмент разработки WeChat, чтобы просмотреть собственный апплет.
  4. Конкретные компоненты похожи на API и апплет, вы можете просмотретьДокументация ТароУзнайте сами.
  5. После этого разработка аналогична React. УведомлениеcomponentDidShow、 componentDidMountРазличные проявления жизненного цикла апплета. вкладкаcomponentDidMountПросто сходите один раз.

Примечания: Taro по умолчанию оборачивает асинхронный API апплета, который можно вызывать так же, как с помощью Promise.

// WX
wx.request({
    url: '', // 仅为示例，并非真实的接口地址
    data: {},
    header: {
      'content-type': 'application/json' // 默认值
    },
    success(res) {}
})
// Taro
Taro.request(url).then(function (res) {
    console.log(res)
})

3. Как разработчик React, меры предосторожности при использовании (в том числе только те, которые встречаются на практике)

  1. sourcemapЭто очень ххххх, если вы не можете его использовать
  2. Невозможно деконструировать передачу по значению, нужноkey valueпередается дочерним компонентам
  3. не может быть вrenderписать снаружиjsx
  4. this.propsПередаваемая функция должнаonилиdispatchначало
  5. из родительского компонентаprops, должен быть определен вstatic defaultProps, иначе не получить
  6. componentDidMount, в апплете WeChat/Baidu/ByteDance/Alipay этот метод жизненного цикла соответствуетonLaunch
  7. componentDidShowЭтот метод жизненного цикла соответствует апплету WeChat/Baidu/ByteDance/Alipay.onShow
  8. componentDidHideЭтот метод жизненного цикла соответствует апплету WeChat/Baidu/ByteDance/Alipay.onHide
  9. Одинарные кавычки должны быть написаны в коде JS, особенно в JSX, если появляются двойные кавычки, это может вызвать ошибки компиляции.
  10. переменная средыprocess.envиспользование, не используйте деструктурирование для полученияenvнастроенprocess.envПеременные среды, пожалуйста, напишите их напрямуюprocess.env.NODE_ENVиспользовать
  11. использоватьthis.$componentTypeсудить о текущемTaro.ComponentБудь то страница или компонент, возможные значенияPAGEа такжеCOMPONENT
  12. Компоненты без состояния не поддерживаются
  13. не может содержать элементы JSXmapиспользуется в циклеifвыражение
  14. нельзя использоватьArray#mapМетоды, отличные от управления массивами JSX
  15. Чтобы передать функцию из родительского компонента в дочерний, имя свойства должно начинаться сonначало Выше приведены проблемы, возникающие во время использования,Дополнительные примечания см. в официальной документации.

В-четвертых, обработка в реальном развитии

1. Псевдоним тоже можно использовать.
// config/index.js
alias: {
    '@actions': path.resolve(__dirname, '..', 'src/actions'),
    '@assets': path.resolve(__dirname, '..', 'src/assets'),
    '@components': path.resolve(__dirname, '..', 'src/components'),
    '@constants': path.resolve(__dirname, '..', 'src/constants'),
    '@reducers': path.resolve(__dirname, '..', 'src/reducers'),
    '@style': path.resolve(__dirname, '..', 'src/style'),
    '@util': path.resolve(__dirname, '..', 'src/util')
  },
2. Простая обработка taro.requset()
// feth.js
import Taro from '@tarojs/taro'

const defaultMethod = 'POST'
const successStatus = 200
const successFlag = 1
const messageToast = title => {
    Taro.showToast({
        title,
        icon: 'none',
        duration: 1000
    })
}

export default function fetch(options) {
    const { 
        url,
        method = defaultMethod,
        params,
        showErrorToast = true,
    } = options
    return Taro.request({
        url,
        method,
        data: params,
    }).then(response => {
        const { statusCode, data } = response
        // 不是200以外的
        if (statusCode != successStatus) {
            const { error } = data
            // reject出去。showToast在catch里执行。
            const errMessage = {errMsg: error || '请求接口失败'}
            return Promise.reject(errMessage)
        } else {
            // flag是不是1的判断
            const { flag, message, data: datas } = data
            if (flag == successFlag) {
                return Promise.resolve(datas)
            } else {
                const errMessage = {errMsg: message || '流程错误'}
                return Promise.reject(errMessage)
            }
        }
    }).catch(errors => {
        const { errMsg } = errors
        if (showErrorToast) {
            messageToast(errMsg || '发起请求异常')
        }
        const errMessage = errMsg || '发起请求异常'
        return Promise.reject(errMessage)
    })
}
3. Нажмите кнопку, чтобы перейти к соответствующему узлу.
toggleComments = () => {
    Taro.createSelectorQuery().select('#comments-id').boundingClientRect(function(rect){
        // 使页面滚动到响应位置
        Taro.pageScrollTo({
            scrollTop: rect.bottom
        })
    }).exec()
}

5. Обзор проблем, возникших при разработке апплета Taro и WeChat.

1. Загрузите и просмотрите документы документа

В настоящее время апплет предоставляет API wx.downloadFile, но в настоящее время поддерживает только долгосрочную загрузку и загрузку трех типов файлов: изображения, голоса и видео. Файл документа будет загружен как файл .myword по временному пути, который можно просмотреть (встроенный браузер WeChat по умолчанию на телефонах Android открыт и может быть перенаправлен на компьютер. ios tbd).

Taro.showLoading()
const params = {
    url,
    fileType: "doc",
    success(res) {
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
            const wxPath = res.tempFilePath
            Taro.openDocument({
                filePath: wxPath,
                fileType: "doc",
                success: function (ress) {
                    Taro.hideLoading()
                    console.log(ress)
                },
                fail: function (resfo) {
                    Taro.hideLoading()
                    util.showToast('打开文档失败')
                }
            })
        }
    },
    fail: function (resfd) {
        Taro.hideLoading()
        util.showToast('文件下载失败')
    },
}
Taro.downloadFile(params).then()
2. Получите географическое положение, широту и долготу для регистрации
wx.getLocation({
  type: 'gcj02', // wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
  success(res) {
    const { latitude, longitude } = res
  }
})

①, wx.getLocation, перед вызовом требуется авторизация пользователя. scope.userLocation
②, при инициировании кода сканирования и посещаемости знака, следует обеспечитьtypeтакой же.

// 用户授权，app.js中配置项
permission: {
    "scope.userLocation": {
        "desc": "获取用户的签到位置"
    }
},

3. Вы не можете долго нажимать, чтобы идентифицировать QR-код (подлежит уточнению) (кроме кода апплета)

После предварительного просмотра изображения QR-кода распознавание QR-кода не поддерживается.

getEventData(data, tag) {
    return data.currentTarget.dataset[tag];
},
previewImage = (e) => {
    const current = getEventData(e, 'src')
    Taro.previewImage({
        current: current, // 当前显示图片的http链接   
        urls: [current] // 需要预览的图片http链接列表   
    })
}

二维码

6. ЗАДАЧИ

  • В полной мере используйте преимущества нескольких концов и попробуйте пакетный выпуск других небольших программ, h5 и т. д.
  • Продолжайте следить за загрузкой документа Word и замените QR-код небольшим QR-кодом программы с параметрами (wxacode.getUnlimited)
  • Влияние openid на мультитерминал

эпилог

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

Категории