встречающиеся ямы
Стек страниц апплета может иметь до десяти слоев.
Вопрос: Предположим, что в апплете 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
предварительный просмотр
возможные плагины
Синхронный перевод WeChat
представлять
Плагин синхронного перевода WeChat — это пакет плагинов для голосового ввода, перевода текста и других функций, разработанный WeChat, который используется для обеспечения вызовов сторонних апплетов.
опыт
оптимизация производительности
Оптимизация рендеринга изображения
- Используйте технологию сжатия для сжатия изображения. При условии, что качество отображения изображения не сильно пострадает, изображение можно правильно сжать. Рекомендуется 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
Субподряд апплета может оптимизировать время загрузки при первом запуске апплета, а также может лучше отделить и сотрудничать, когда несколько команд разрабатывают вместе.
Справочная статья:
Другие статьи автора: