предисловие
В связи с ростом популярности небольших программ Scallop в прошлом году вложил много энергии в бизнес, связанный с небольшими программами.По сравнению с приложениями, небольшие программы легче распространять, поскольку они основаны на мощной социальной платформе WeChat.Это делает он чрезвычайно мощный и может даже распространяться вирусом в WeChat Moments, что делает его популярным в одночасье.
Увидев, что апплет Mind King стал популярным практически за одну ночь, а его ежедневная активность достигла миллионного уровня в лучший период, мы приступили к разработке мастера слов, без какого-либо предыдущего опыта в разработке апплета, практически с нуля, а затем начали дорога к карьерам для небольших программ. После завершения итерации функции мастера слова мы разработали еще одну небольшую программу Scallop Daily English, Далее я в основном поделюсь с вами некоторыми проблемами, возникшими при разработке этих двух небольших программ, и решениями. Поскольку я собираюсь написать небольшой цикл статей, я буду объяснять его с введения в небольшие программы, а затем постепенно углублять.Наконец будет практическое объяснение личных проектов с открытым исходным кодом, так что следите за обновлениями.
Готов к работе
Здесь мы предполагаем, что читатель имеет некоторый опыт фронтенд-разработки, владеет css, html, javascript, знаком с популярным фреймворком MVVM, а также знаком с инструментами упаковки и конструирования.
WeChat официально предоставляет документацию по разработке мини-программы, вы можетекликните сюдаПерейти к просмотру официальной документации апплета, Сначала вам нужно следовать инструкциям, чтобы создать учетную запись апплета WeChat, затем войти на общедоступную платформу, чтобы увидеть свой appId, а затем загрузить инструмент разработчика WeChat, чтобы официально просмотреть небольшую демонстрацию предоставлено WeChat Тогда вам нужно потратить полдня или больше, чтобы изучить фреймворки, компоненты и API в документации апплета.
На этом этапе вы должны быть в состоянии выполнить следующие задачи, прочитав документацию:
- Вы можете прочитать код демо.
- Знаком с фреймворком апплета, конфигурацией, событиями жизненного цикла страницы, механизмом привязки данных апплета (взаимодействие между логическим уровнем и уровнем представления, setDate).
- Знакомы с использованием общих компонентов: представление, изображение, вид прокрутки, swiper, кнопка, форма, текстовое поле, навигатор, холст и т. д.
- Знакомые со всеми API, особенно с API с точки зрения интерфейса, должны сначала ознакомиться с ними.
Если вы не читали официальную документацию WeChat, я предлагаю вам сначала прекратить ее чтение и найти время, чтобы ознакомиться с фреймворком, компонентами и API-интерфейсами в официальной документации мини-программы, а затем продолжить просмотр.
Если вы прочитали документацию и до сих пор не понимаете код демо, то я просто покажу вам код демо.
демо анализ исходного кода
Сначала посмотрите на структуру кода:
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── index
│ │ ├── index.js
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── logs
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
├── project.config.json
└── utils
└── util.js
Результат кода этой демонстрации очень прост и понятен, мы в основном рассматриваем три части:
Файл конфигурации проекта project.config.json
Этот файл записывает свой проект апплета в некоторой информации о конфигурации на инструментах разработчика, конкретная ссылка на конфигурациюнастроить, например: название проекта, appid апплета, базовая версия библиотеки, настройки проекта инструментов разработчика, если вы используете облачный сервис апплета, то здесь необходимо настроить miniprogramRoot и qcloudRoot апплета, если в проекте есть какая-то компиляция кастомизации условиях, информация о компиляции здесь также будет записана вcondition:miniprogramпод.
Глобальное приложение для апплета
app — это контейнер, описывающий весь апплет. Он будет инициализирован перед страницей. Он в основном состоит из трех файлов: app.js, app.json, app.wxss. В демонстрационном коде app.js использует функцию жизненного цикла приложения onLaunch и глобальный контейнер данных globalData. При инициализации апплета будет запущено событие onLaunch приложения, и этот метод также будет выполнен до события onLoad страницы. Следовательно, мы можем выполнить некоторые действия, которые необходимо выполнить при инициализации апплета в методе onLaunch, например то, что мы делаем в демо: получить информацию о пользователе.
Поскольку каждая страница имеет свои собственные независимые данные, если нам нужно поддерживать некоторые данные, совместно используемые несколькими страницами, мы можем использовать globalData в это время.Конечно, вы также можете использовать некоторые библиотеки управления данными, такие как redux, vuex.Последний апплет Нативная разработка уже поддерживает npm. Это упрощает импорт зависимых библиотек.
Файл app.json используется для настройки апплета WECHAT во всем мире, определить путь к файлу страницы, производительность окна, установить время ожидания сети, установить несколько вкладок и т. Д. Для получения подробной информации, см.настроить.
страница страницы апплета
Каждая страница апплета состоит из четырех файлов: page.js, page.wxml, page.json, page.wxss.
Файл js используется для записи логики страницы, файл wxml подобен html и является файлом шаблона апплета, файл json является файлом конфигурации страницы, а файл wxss является файлом стиля страницы, аналогичным в css-файл.
//index.js
//获取应用实例
const app = getApp();
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs',
});
},
onLoad: function() {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true,
});
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true,
});
};
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo;
this.setData({
userInfo: res.userInfo,
hasUserInfo: true,
});
},
});
}
},
getUserInfo: function(e) {
console.log(e);
app.globalData.userInfo = e.detail.userInfo;
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true,
});
},
});
Давайте проанализируем код index.js и получим глобальный объект приложения через getAPP(), чтобы мы могли вызывать методы в приложении и использовать глобальные данные в globalData. Внутренние данные страницы помещаются в data, а данные изменяются через setData(), тем самым меняется вид. Это согласуется с дизайном фреймворка MVVM. Данные страницы, которые не связаны с представлением, не должны помещаться в данные, потому что уровень логики и уровень рендеринга передают данные (сериализованные в строки с помощью JSON.stringify), что занимает ресурсы процесса. onLoad — это функция жизненного цикла инициализации страницы, и в этой функции мы инициализируем данные страницы. Кроме того, остальная часть страницы — это событие клика и пользовательская функция страницы.
Давайте сначала посмотрим на API, используемый в index.js.wx.canIUseОн используется для оценки доступности API, обратного вызова, параметров, компонентов и т. д. апплета в текущей версии. Поскольку базовая библиотека апплета обновляется с версией клиента WeChat, если некоторые пользователи не обновят клиент WeChat, то некоторые новые API и функции компонентов нельзя будет использовать.В настоящее время мы можем использовать canIUse для обработки совместимости.wx.getUserInfo, Этот пользователь интерфейса получает информацию о пользователе. Если пользователь не авторизован, вызов этого интерфейса напрямую приведет к обратному вызову ошибки. Более подробные сведения о входных параметрах, возвращаемых значениях и сценариях использования см. в документации.wx.navigateToСохраните текущую страницу, перейдите на страницу в приложении и используйте wx.navigateBack, чтобы вернуться на исходную страницу. Это включает в себя маршрутизацию страниц апплета, какие переходы маршрутизации существуют между страницами апплета, как выглядит стек страниц в это время и жизненные циклы, которые запускают две страницы соответственно.документация по маршрутизации
Индексная страница в демоверсии не настроена с помощью файла index.json. Конфигурация страницы может задавать только содержимое некоторых элементов конфигурации окна в app.json. Элементы конфигурации на странице перезаписывают те же элементы конфигурации в окно в app.json. Подробнее см.настроить.
выбор кадра апплета
Слишком много неудобств в нативной разработке небольших программ: не поддерживается npm (сейчас поддерживается), дрянной синтаксис шаблонов, слишком разбросаны файлы, проблемы параллелизма запросов, непромиссность api, отсутствие поддерживающей библиотеки управления состоянием. Наш первый контактслабый фреймворк, этот фреймворк решает большинство проблем в нативной разработке, использует синтаксис, подобный Vue.js, снижает стоимость изучения синтаксиса разработки небольших программ, поддерживает компонентизацию, поддерживает npm, поддерживает промисы и поддерживает некоторые распространенные компиляторы css и js и плагины для сжатия изображений. Поэтому наш апплет word master использует фреймворк wepy.
Но вскоре Мейтуанфреймворк mpvueВыяснилось, что это нам дает?
- Полноценные возможности компонентной разработки: улучшите возможность повторного использования кода
- Полный опыт разработки Vue.js
- Удобное решение для управления данными Vuex: легко создавать сложные приложения
- Механизм быстрой сборки веб-пакета: настраиваемая стратегия сборки, горячая перезагрузка на этапе разработки
- Поддержка использования внешних зависимостей npm
- Быстро инициализируйте проекты с помощью инструмента командной строки Vue.js vue-cli
- Возможность преобразования кода H5 и компиляции в объектный код апплета
Разве это не удивительно, не шокирует? Именно так Vue разрабатывает веб-приложения.Для разработчиков, знакомых с Vue, это в основном разработка апплета WeChat с нулевой стоимостью обучения. Преимущества mpvue по сравнению с wepy очевидны: во-первых, у mpvue есть полная спецификация синтаксиса vue (хотя небольшая часть синтаксиса не может быть использована), поддержка управления данными Vuex, а также встроенные инструменты для упаковки и сборки веб-пакетов (wepy использует один из собственных инструментов для упаковки и сборки, очевидно, не такой мощный, как webpack), и для h5 и апплета удобно повторно использовать код проекта.
Наконец, сравните два фреймворка:
| mpvue | wepy | |
|---|---|---|
| грамматика | vuejs | класс вуэйс |
| Этикетка | HTML+ апплет | Апплеты |
| составной | Vue-спецификация | Спецификация пользовательских компонентов |
| строить автоматически | webpack | рама встроенная |
| стоимость обучения | vue+ апплет | vue+wepy+ апплет |
| управление данными | vuex | redux |
создание и использование проекта wepy
Установите последнюю версию wepy-cli и инициализируйте проект стандартными шаблонами:
npm install -g wepy-cli
wepy init standard myproject
Инициализация проекта потребует от вас ввести имя проекта, appid апплета, описание, включить ли избыточность и использовать ли eslint в терминале.
использоватьwepy listМогут быть перечислены дополнительные шаблоны проектов инициализации, которые можно выбрать.
Перейдите в каталог проекта
cd myproject
Установить зависимости
npm install
Включить своевременную компиляцию
npm run dev
Структура каталогов проекта wepy
.
├── package.json
├── project.config.json
├── src
│ ├── app.wpy
│ ├── components
│ │ ├── counter.wpy
│ │ ├── group.wpy
│ │ ├── groupitem.wpy
│ │ ├── list.wpy
│ │ ├── panel.wpy
│ │ └── wepy-list.wpy
│ ├── index.template.html
│ ├── mixins
│ │ └── test.js
│ ├── pages
│ │ └── index.wpy
│ └── store
│ ├── actions
│ │ ├── counter.js
│ │ └── index.js
│ ├── index.js
│ ├── reducers
│ │ ├── counter.js
│ │ └── index.js
│ └── types
│ ├── counter.js
│ └── index.js
└── wepy.config.js
Чтобы облегчить нашу разработку, нам также необходимо преобразовать его на основе шаблона. Поскольку разработка продукта будет иметь по крайней мере одну среду разработки и одну производственную среду, мы можем создать новый каталог конфигурации и добавить файлы конфигурации для двух сред.
Сначала укажите значение переменной среды NODE_ENV в package.json:
"scripts": {
"start": "cross-env NODE_ENV=local npm run dev",
"preview": "cross-env NODE_ENV=preview wepy build --no-cache",
"dev": "wepy build --watch",
"build": "cross-env NODE_ENV=production wepy build --no-cache",
"clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf",
"test": "echo \"Error: no test specified\" && exit 1"
},
Затем настройте разрешение: псевдоним: в wepy.config.js.
const env = process.env.NODE_ENV || 'production';
//
module.exports = {
resolve: {
alias: {
... //other alias
'@config': path.join(__dirname, `src/config/config.${env}.js`),
},
modules: ['node_modules'],
},
}
Таким образом, если вы импортируете * из '@config', будут загружены разные конфигурации в соответствии с текущей средой.
Подробные рекомендации для справкиофициальная документация wepy;
использование фреймворка mpvue
смотреть прямоофициальная документацияБар.
резюме
После того, как фреймворк выбран, приступим к подготовке собственного апплета.
В следующей статье давайте узнаем, как использовать Tencent Cloud + mpvue для разработки собственной небольшой программы — Spelling Music Fight. Предварительный просмотр онлайн: