Несколько советов по разработке апплетов Wechat, которые очень рекомендуются, просты и практичны

JavaScript Апплет WeChat
Несколько советов по разработке апплетов Wechat, которые очень рекомендуются, просты и практичны

Некоторое время назад я разработал апплет WeChat.В процессе разработки я обобщил некоторые советы, которые я считаю полезными для меня, и извлек их, что эквивалентно сводному обзору, и я надеюсь, что это может помочь всем. Если это действительно полезно для вас, не забудьте поставить лайк 🌟 ～

  1. Версия инструментов разработчика WeChat:1.03.2006090(2020-06-19)
  2. Базовая версия библиотеки:v2.12.1 (2020-08-04)

1. Возможные подводные камни и подсказки, с которыми можно столкнуться при разработке

Я изначально хотел написать небольшую хитрость, но в итоге я обобщил кучу подводных камней.До того, как я начал, я не мог представить, насколько плохим и плохим был опыт разработки WeChat Mini Programs, от инструментов разработчика WeChat до так- под названием «новый язык», есть сильное пятерное зрение полуфабрикатов, что действительно заставляет меня эммм... Кроме того, я обнаружил, что большинство небольших программных статей в Интернете являются практическими статьями о том, как используйте и избегайте ям, а не технических статей.Он также отражает подводные камни небольших программ со стороны.

Во время нативной разработки мини-программ WeChat я постоянно задавал вопрос: «Почему Tencent, у которой так много технических талантов, запускает такое ладжи?» Сообщество поднимало много умственно отсталых и античеловеческих вещей два или два года назад. три года назад, а в официальном ответе Сообщалось, что его ремонтируют, но спустя несколько лет новостей до сих пор нет.

  1. Инструменты разработчика Wechat часто не работают горячее обновление или даже пустой экран, и не работает перекомпиляция, можно только принудительно выйти и открыть заново;
  2. Аналогично предыдущему, иногда ошибка в стиле, весь превью пустой, а отладчик ничего не говорит о проблеме, выдаст лечение без отображения, а перекомпиляция проблему не решит .Вы можете только принудительно выйти и снова открыть его.
  3. Как и в предыдущем случае, ошибки, сообщаемые в отладчике, часто бесполезны, и найти проблему сложно;
  4. Когда пользовательская панель вкладок на стороне Android вытягивается для обновления, она также перемещается вниз вместе с экраном, и это ошибка, которую нельзя обойти.После написания пользовательского стиля панели вкладок я изменил его на встроенный в Таббаре!
  5. importПуть не поддерживает абсолютные пути, такие как вы хотите сослатьсяutils/fetch.js, независимо от того, насколько глубоко внутри компонента вы должны медленно../указать на корневой каталог, то же самое.wxssдокумент@importПри импорте файлов можно использовать только относительные пути, поэтому он будет отображаться../../../../../../utils/fetch.jsтакого рода вещи;
  6. Путь к статическому ресурсу не может содержать китайские иероглифы, а если китайские иероглифы есть, он не может быть загружен;
  7. .wxsФайл не поддерживает ES6 и может использовать только плохую запись ES5;
  8. .wxmlможно импортировать только в.wxsфайл не может быть импортирован.jsдокумент? ? ?
  9. шаблон{{}}Даже методы не могут быть выполнены и могут обрабатывать только простые операции, такие как+ - * /, если вы столкнетесь с потребностью в данныхfilterсценарии, вам нужно.jsФайл предварительно форматируется, а затем по одномуsetData, как часто пишут[2,3,4].includes(type), даже не бежать!
  10. .wxsФайл недоступенDateобъект, поэтому не можетnew Date(), используйте только дряннойgetDateметод, то же самое справедливо и для регуляров.Чтобы сгенерировать регулярные объекты, вам нужно использоватьgetRegExpфункцияgetRegExp(pattern[, flags]);
  11. .wxsможет позвонить другим.wxsфайл и может требовать только вызовы.wxsфайл, импортированный файл должен использовать относительный путь;
  12. setDataДаже слияние объектов делать лень, еслиdata: {a: {b: 1, c: 1}},ТакsetData({a: {b: 2}})будет потерянa.cЕго ценность действительно раздражает.setData({['a.b': 2]})Вот и все;
  13. на iOSDateОбъект получает произвольные параметры времени, такие какgetDay,getTimeОба являются NaN, потому что конструктор даты IOS не поддерживает2018-04-26Даты в этом формате должны быть преобразованы в2018/04/26Этот формат будет отображаться нормально;
  14. Версия апплета для разработки иногда по какой-то причине не отправляет запросы. Три точки в правом верхнем углу позволяют отладчику открыть «Разработка и отладка», а затем запрос может быть отправлен необъяснимым образом. Это имеет место на многих мобильных устройствах. телефоны, и правда неизвестна.

2. WECHAT просьба обещание

2.1 Использование библиотеки по полке

Установите библиотеку обещанийwx-promise-pro, не забудьте принести-sили--production, иначе сборка завершится ошибкой.

npm i -S wx-promise-pro

затем вapp.jsсередина:

import { promisifyAll } from 'wx-promise-pro'

promisifyAll()  // promisify all wx api

App({ ... })

Затем вы можете использовать его как обычно:

wx.pro.showLoading({
    title: '加载中',
    mask: true
})
  .then(() => console.log('in promise ~'))

2.2 Реализовать самостоятельно

На самом деле такую ​​библиотеку мы можем реализовать сами, принцип очень прост.wx.requestНапример:

// 原生 API 使用方式
wx.request({
    url: '',     // 请求的 url
    data: {},    // 参数
    method: '',  // post、get
    success: res => {
        // 请求成功回调函数，res为回调参数
    },
    fail: res => {
        // 请求失败回调函数，res为回调参数
    }
})

Если мы сделаем его Promise, он должен называться так:

// Promise 化后的期望使用方式
wx.pro.request({
    url: '',     // 请求的 url
    data: {},    // 参数
    method: ''   // post、get
})
  .then(res => {
      // 请求成功回调函数，res为回调参数
  })
  .catch(res => {
      // 请求失败回调函数，res为回调参数
  })

а такжеthenФункция возвращает объект Promise, чтобы эту функцию можно было непрерывно вызывать в цепочке, поэтому сначала вам нужноnewВыйдите с объектом Promise:

function request(opt) {
    return new Promise((resolve, reject) => {
        wx.request({
            ...opt,
            success: res => { resolve(res)},
            fail: res => {reject(res)}
        })
    })
}

Этот код мы можем улучшить, благодаряsuccess,failПередаваемые здесь параметры являются толькоresolve,rejectМетод выполняется, поэтому его можно передать напрямуюresolve,rejectметод.

Кроме того, поскольку собственный формат API других апплетов такой же, мы можем использоватькарри, для обработки других API, которые должны быть обещаны:

function promisify(api) {
    return (opt = {}) => {
        return new Promise((resolve, reject) => {
            api({
                ...opt,
                fail: reject,
                success: resolve
            })
        })
    }
}

Затем смонтируйте результат выполнения каррированного метода как новый Promise API дляwx.proНа объекте:

// 将指定 API 进行 Promise 化
wx.pro.request = promisify(wx.request)

// 使用
wx.pro.request({...})
    .then(...)

Затем, чтобы облегчить нам использование других методов, мы можем зациклитьwxМетоды для объектов, которые могут быть обещаны, такие какrequest,scanCode,showToast,getUserInfoПодождите, пока один за другим смонтируетсяwx.proНа объекте вы можете использовать его напрямуюwx.pro.xx, так как выполнение этого метода возвращает объект Promise, его можно использовать как другие объекты Promise.

На самом деле, прежде чем мы это узнаем, мы делаем это самиwx-promise-proИсходный код библиотеки, основной код этой библиотеки это строки выше 🥳

2.3 Использование в проекте

С помощью вышеуказанного инструмента мы можем использовать его в проекте, чтобы не распространяться по всему проекту.wx.requestилиwx.pro.requestЗдесь вы можете просто инкапсулировать и создать два новых файла следующим образом:

// utils/api/fetch.js 封装请求方法、请求拦截器

const app = getApp()

const BaseUrl = 'http://172.0.0.1:7300/mock'

const TokenWhiteList = [
    '/app/user/get-by-code'     // 不需要鉴权的api手动添加到这里
]

/**
 * 设置请求拦截器
 * @param params 请求参数
 */
const fetch = (params = {}) => {
    // 拦截器逻辑
    if (!TokenWhiteList.includes(params.url)) {
        params.header = {
            'content-type': 'application/json',             // 默认值
            'token': app.globalData.token || ''
        }
    }

    if (params.url.startsWith('/')) {    // 拼接完整URL
        params.url = BaseUrl + params.url
    }

    // 返回promise
    return wx.pro.request({ ...params })
      .then(({ data: { code, message, data } }) => {
          // ... 各种异常情况的逻辑处理
          // 与后端约定 code 20000 时正常返回
          if (code === 20000) return Promise.resolve(data)
          return Promise.reject(message)
      })
}

export { fetch }

Затем инкапсулируйте все API в отдельные файлы для централизованного управления:

// utils/api/apis.js 封装所有请求 API

import { fetch } from './fetch'

/* 根据微信code获取用户信息 */
const appUserGetByCode = ({ code } = {}) => fetch({
    url: '/app/user/get-by-code',
    data: { code }
})

/* 扫码登录 */
const appUserQrLogin = ({ qrCode } = {}) => fetch({
    method: 'POST',
    url: '/app/user/qr-login',
    data: { qrCode }
})

/* 个人信息 */
const appUserInfo = () => fetch({
    url: '/app/user/info'
})

/* 系统参数获取，数据字典 */
const appSysParamListByParam = () => fetch({
    url: '/app/sys-param/list-by-param'
})

/* 数据字典所有 */
const appSysParamListAll = () => fetch({
    url: '/app/sys-param/list-all'
})

export {
    appSysParamListAll,   // 数据字典所有
    appSysParamListByParam,   // 系统参数获取，数据字典
    appUserGetByCode,   // 根据微信code获取用户信息
    appUserQrLogin,   // 扫码登录
    appUserInfo   // 个人信息
}

Если вы хотите использовать API, вы можете импортировать его следующим образом:

import * as Api from '../../utils/api/apis.js'   // 相对路径

// 使用方式
Api.appSysParamListAll()
  .then(({ dataList }) => this.upData({ sysParamList: dataList }))
  .then(() => {
      const keyList = this.data.sysParamList.map(T => T.key)
      this.upData({
          keyList,
          formData: { keys: keyList }
      })
  })

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

3. setState измените свойства объекта данных, который вы хотите изменить.

В апплетеdataОн не может работать напрямую, вам нужно использоватьsetDataфункция. В связи с развитием апплета WeChatsetDataОпыт использования очень хромает, использовал библиотечную функциюwx-updata, эта библиотечная функция очень помогает мне во время разработки, и я специально рекомендую ее всем здесь.

3.1 Зачем использовать wx-updata

Ты используешьsetDataВы иногда чувствуете себя неловко, когда вы находитесь в то время?Вот простой пример:

// 你的 data
data: {
    name: '蜡笔小新',
    info: { height: 140, color: '黄色' }
}

Если вы хотите изменитьinfo.height155, используйтеsetDataКак нам это сделать:

// 这样会把 info 里其他属性整不见了
this.setData({ info: { height: 155 } })

// 你需要取出 info 对象，修改后整个 setData
const { info } = this.data
info.height = 155
this.setData({ info })

Это не кажется слишком сложным, но еслиdataЭто очень большой объект, и необходимо менять глубокие и разные объекты и элементы массива один за другим:

data: {
    name: '蜡笔小新',
    info: {
        height: 140, color: '黄色',
        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}

Например, требование должноinfo.heightизменено на 155, при измененииinfo.descЭлемент 0 массиваage12, п.3colorА серый?

// 先取出要改变的对象，改变数字后 setData 回去
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = '灰色'
this.setData({ info })

// 或者像某些文章里介绍的，这样可读性差，也不太实用
this.setData({
    'info.height': 155,
    'info.desc[0].age': 12,
    'info.desc[3].color': '灰色'
})

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

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})

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

Вот почему я использовал в проекте на линии вwx-updata, вместоsetData

Принцип wx-updata на самом деле очень прост, например:

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }]
    }
})

// 会被自动转化为下面这种格式，
// this.setData({
//    'info.height': 155,
//    'info.desc[0].age': 12,
// })

Оказалось, что работу по конвертации пришлось делать вручную, а теперь wx-updata сделал это за нас, не правда ли, прекрасно!

3.2 Как использовать wx-updata

В общем случае мы можем смонтировать метод прямо вPageв конструкторе, чтобы вы моглиPageПример использованияsetDataиспользовать то же самоеupDataсейчас:

// app.js 中挂载
import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})

// 页面代码中使用方式
this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, '帅哥'],
    family: [, , [, , , { color: '灰色' }]]
})

Некоторые рамки могут бытьPageНа объекте были произведены дальнейшие модификации, непосредственно заменяющиеPageПуть может быть не очень хорошим,wx-updataТакже доступны методы инструментов, и пользователи могут использовать методы инструментов непосредственно в коде страницы для обработки:

// 页面代码中
import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

Page({
    data: { a: { b: 2}, c: [3,4,5]},

    // 自己封装一下
    upData(data) {
        return this.setData(objToPath(data))
    },

    // 你的方法中或生命周期函数
    yourMethod() {
        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

При модификации указанных элементов массива может возникнуть ситуация пропуска пустого места массива, wx-updata предоставляет заменитель типа Symbol для Empty, а также метод объектного пути массива.Если вам интересно, вы можете взглянуть на wx-updataДокументация, вы также можете обратиться кЭта вводная статья.

Кроме того, после использования wx-updata вы также можете использовать оригинальный setData, особенно когда вы хотите очистить массив, вы можете использовать его гибко, вы можете получить лучший опыт разработки апплета, желаю вам счастливой разработки апплета 🤣

4. Используйте scss для написания стилей

4.1 Метод настройки Webstorm

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

тогда не забудьте.gitignoreДобавьте в файл стили, которые будут игнорироваться:

*.scss
*.wxss.map

Таким образом, при загрузке в git файл scss не будет загружен ~ Конечно, если членам вашей команды нужен scss, рекомендуется добавить файл scss при загрузке в git.

После этой настройки компонент локально будет выглядеть так

本地文件

На что нам нужно обратить внимание, так это.js,.json,.scss,.wxmlдокумент, дополнительный документ.wxssизменится в тебе.scssфайлы автоматически генерируются и впоследствии обновляются, в то время как.wxss.mapЯвляется ли плагин автоматически генерирует отношения сопоставления, не беспокойтесь.

Если вы не используете webstorm, вы можете выполнить команду напрямуюsass --watch index.scss:index.wxss -s expanded, если командная строка закрыта, команда sass не будет отслеживать изменения файлов и потом компилировать, поэтому лучше всего использовать плагин редактора.

Точно так же можно использовать предварительно скомпилированные языки, такие как less и stylus.

4.2 Метод настройки Visual Studio Code

Всемогущий VSC, конечно, тоже может это делать, искать и скачивать плагиныeasy sass, затем вsetting.jsonИзменить/добавить конфигурацию в:

"easysass.formats": [
  {
    "format": "expanded",
    "extension": ".wxss"
  },
  {
    "format": "compressed",
    "extension": ".min.wxss"
  }
]

надexpandedкомпилируется.wxssфайл, нижеcompressedсжат.wxssstyle, следующую конфигурацию можно удалить, если она не нужна, а затем.gitignoreДобавьте в файл промежуточные стили, которые будут игнорироваться:

*.scss

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

5. Используйте иконочные шрифты

в веб-разработкеiconfontМожно сказать, что это наиболее часто используемый инструмент для создания гибких шрифтов.Вот как добавить значок шрифта в апплет WeChat.

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

下载icon

Скачанный на локальный диск представляет собой сжатый пакет, после распаковкиiconfont.cssСкопируйте файл в апплет WeChat.stylesВ папку (по следующей привычке тоже можно положить куда хочешь, напримерfonts), измените суффикс на.wxss

放到本地

существуетapp.wxssИмпорт стилей в:

@import "styles/iconfont.wxss";

затем в.wxmlВы можете использовать значок, который вы только что добавили вiЭтикетка, использование в небольшой программеtextЭтикетка:

<text class="iconfont icon-my-edit" style="color: blue"></text>

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

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

Большинство постов в сети имеют разную глубину и даже некоторые нестыковки.Следующие статьи являются кратким изложением процесса обучения.Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение и укажите.Если эта статья вам помогла, не забудьте поставить лайк и поддержите. Мол, они все хулиганы 🤣)~

Справочная документация:

  1. youngjuning/wx-promise-pro: ✨Мощная и элегантная асинхронная библиотека апплетов WeChat 🚀
  2. Яма разработки мини-программы — время IOS отображается как NaN — Мо Сяофэй
  3. 【Апплет WeChat】Оптимизация производительности
  4. Апплет WeChat использует Promise — ищут программиста
  5. Почему я отказываюсь от setData и использую upData при разработке апплета WeChat - Nuggets

Другие высоко оцененные статьи автора:

  1. Советы по улучшению счастья в JS
  2. Советы по использованию Vue
  3. Nginx от начала до практики, подробное объяснение на 10 000 слов!
  4. Полчаса, чтобы познакомиться с базовыми знаниями, необходимыми для начала работы с CentOS
  5. Непосредственная практика конфигурации Webpack с несколькими входами
  6. Основной принцип перехода к интерфейсной маршрутизации

PS: адрес моего блогаGithub - SHERlocked93/blog, приглашаю всех обратить внимание на мой публичный номер前端下午茶, вы можете добавить его, выполнив прямой поиск, и продолжать продвигать интерфейс и связанные с ним высококачественные технические статьи по интерфейсу для всех. Давайте вместе добьемся прогресса и продолжим вместе ~

Категории