Настоятельно рекомендуемый обзор разработки апплета WeChat

внешний интерфейс Апплет WeChat
Настоятельно рекомендуемый обзор разработки апплета WeChat

встречающиеся ямы

Стек страниц апплета может иметь до десяти слоев.

Вопрос: Предположим, что в апплете 12 страниц вопросов.После ответа на предыдущий вопрос wx.navigateTo переходит на следующую страницу вопроса, затем, когда вы дойдете до десятого вопроса, вы обнаружите, что wx.navigateTo не может перейти на следующую страницу. Это связано с тем, что использование wx.navigateTo для перехода сохранит текущую страницу в стек страниц, а стек страниц апплета имеет максимум десять слоев.

требуемый путь не поддерживает абсолютный путь

Проблема: в глубоко вложенной иерархии каталогов, ссылаясь на utils/request.js, вам нужно медленно ../ в корневой каталог

// in page.js
const util = require('../../../../utils/util.js');

Решение: привяжите требование к приложению, получите приложение на странице и напрямую импортируйте его с помощью app.require.

// in app.js
App({
  onLaunch() {
    
  },
  require(path) {
    return require(`${path}`)
  },
})

// in page.js
const app = getApp()
const util = app.require('./utils/util.js');

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

Конструктор даты IOS не поддерживает даты в формате 2018-04-26 и должен быть преобразован в формат 2018/04/26.

Когда компонент изображения использует изображения webp, IOS необходимо установить атрибут webp

Телефон Android вызывает wx.showModal в onShow. Если всплывающее окно не закрыто (нажмите в правом верхнем углу, чтобы выйти из апплета напрямую), всплывающее окно не будет уничтожено. При повторном входе на страницу и запуске onShow , всплывающее окно появится дважды, IOS работает нормально

Используйте веб-просмотр, чтобы открыть pdf в апплете, IOS может открываться нормально, Android открывается пустым

Решение: используйте wx.downloadFile и wx.openDocument.

wx.downloadFile({
  url: 'https://.../XXX.pdf', //要预览的 PDF 的地址
  success: function (res) {
    if (res.statusCode === 200) { //成功
      var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用
      wx.openDocument({
        fileType: 'pdf', // 文件类型
        filePath: Path, //要打开的文件路径
        success: function (res) {
          console.log('打开 PDF 成功');
        }
      })
    }
  },
  fail: function (err) {
    console.log(err); //失败
  }
})

Часто используемые библиотеки

miniprogram-api-promiseРасширить API апплета для поддержки обещаний

Установить

npm install --save miniprogram-api-promise

использовать(Используется в проектах с открытым исходным кодом)

Вызов promisifyAll один раз в записи апплета (app.js) нужно вызывать только один раз. Пример:

import { promisifyAll, promisify } from 'miniprogram-api-promise';

const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)

// 使用
wxp.login().then(res => {
  // do something
})

wx-promise-proРасширить API апплета для поддержки обещаний

Установить

npm i wx-promise-pro -S

использовать

Вызов promisifyAll один раз в записи апплета (app.js) нужно вызывать только один раз. Пример:

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

// promisify all wx‘s api
promisifyAll()

// 使用
wxp.login().then(res => {
  // do something
})

Библиотека компонентов пользовательского интерфейса апплета Vant Weapp

Установить

npm i @vant/weapp -S --production

предварительный просмотр

qrcode-201808101114.jpeg

возможные плагины

Синхронный перевод WeChat

представлять

Плагин синхронного перевода WeChat — это пакет плагинов для голосового ввода, перевода текста и других функций, разработанный WeChat, который используется для обеспечения вызовов сторонних апплетов. ​

опыт

translator.d16d41ab.jpg

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

Оптимизация рендеринга изображения

  • Используйте технологию сжатия для сжатия изображения. При условии, что качество отображения изображения не сильно пострадает, изображение можно правильно сжать. Рекомендуется png.tinypng.com/
  • Компонент изображения апплета поддерживает ленивую загрузку, настроив параметр ленивой загрузки.ленивая загрузка
  • Используйте поставщиков услуг cdn (Облачная OSS от Alibaba) обеспечивает возможность получения соответствующих изображений, поддерживает преобразование формата, преобразование качества, обработку размера
  • Изображения в формате webp

// in app.wxs 利用阿里云oss提供的服务转换图片格式
var wrapUrl = function (url) {
  var fConfig = '?x-oss-process=image/format,webp'
  return url + fConfig
}

// in wxml
<image webp src="{{ tools.wrapUrl(url) }}"  />

Уменьшить размер пакета кода

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

npm install -g miniprogram-slim

Загрузка подпакета

В некоторых случаях разработчикам необходимо разделить апплет на разные подпакеты, упаковать их в разные подпакеты во время создания и загрузить их по требованию, когда пользователи их используют. При построении проекта подпакета апплета сборка выводит один или несколько подпакетов. Каждый апплет use subpackage должен содержатьосновной пакет. Так называемый основной пакет предназначен для размещения стартовой страницы/страницы TabBar по умолчанию, а для всех подпакетов требуются некоторые общедоступные ресурсы/JS-скрипты; исубподрядРазделяется по конфигурации разработчика. При запуске апплета по умолчанию загружается основной пакет и запускается страница в основном пакете.Когда пользователь заходит на страницу в подпакете, клиент загружает соответствующий подпакет и отображает его после завершения загрузки. В настоящее время размер подпакета апплета имеет следующие ограничения:

  • Размер всех подпакетов всего апплета не должен превышать 20M
  • Размер одного подпакета/основного пакета не может превышать 2M

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

Справочная статья:

  1. Как создать полную оценку для опыта мини-программы - Практика оптимизации мини-программы Jingxi
  2. Несколько советов по разработке апплетов Wechat, которые очень рекомендуются, просты и практичны

Другие статьи автора:

  1. Апплет WeChat app.onLaunch и page.onLoad асинхронная проблема
  2. Рука об руку, отвезу вас в торговый центр мини-программ