Плагин апплета WeChat
предисловие
после последнегоНаучите, как реализовать пользовательские компоненты в апплете WeChatДавно это было (друзьям, кто не знает, советую посмотреть, т. к. многие плагины похожи на компоненты), 13 марта этого года в апплет добавлен апплет** "плагин"функции и новые инструменты разработчикаФункция «Код-фрагмент»**, то есть в базовой библиотеке апплета1.9.6Что касается версии, разработчикам разрешено разрабатывать плагины и в то же время предоставлять плагины для других апплетов, что, несомненно, приносит хорошие новости разработчикам, поскольку разные апплеты могут использовать общий код, что значительно сэкономит затраты на разработку. сейчас~
Доступ к плагину мини-программы
В отличие от пользовательских компонентов, подключаемый модуль апплета можно легко встроить в собственный код.Для активации функции подключаемого модуля апплета необходимо перейти на официальный сайт.Подробные процедуры доступа и документы можно найти на официальном веб-сайте .Мини-руководство по доступу к подключаемым модулям программы, конечно, это не главная цель этой статьи, цель этой статьи — научить вас разрабатывать плагин для апплета WeChat~
Реализация
создать шаблон
Чтобы разработать небольшой программный плагин, предварительной подготовки должно быть достаточно.Мы открываем его в инструменте разработчика и следуем обычным шагам, чтобы создать новый небольшой программный проект, и выбираем«Создать шаблон быстрого запуска плагина»,нетAppIDДруг мой, я предлагаю зайти на официальный сайт, чтобы зарегистрировать его, потому что не хватаетAppID, ограничены не только некоторые функции, но и отладка на реальной машине~
Структура проекта
После создания проекта плагина инструменты разработчика автоматически создадут новый проект плагина.Структура примера проекта, представленного на официальном сайте, выглядит следующим образом:
Давайте сначала познакомимся~
Проект содержит две директории:
-
miniprogramКаталог: Размещена небольшая программа, которая используется для отладки и тестирования плагинов. -
pluginКаталог: каталог хранения кода подключаемого модуля, который используется для размещения разработанных нами подключаемых модулей.
Первый такой же, как и обычный апплет, мы можем разработать его в обычном режиме, а затем использовать для отладки плагинов, предварительного просмотра и обзора, разница в том, чтоapp.jsonа такжеproject.config.jsonЕсть еще несколько настроек плагина. Все они сделаны официальными лицами за вас и, как правило, не нуждаются в настройке. Конечно, мы также можем внести соответствующие коррективы в соответствии с реальными потребностями нашего проекта~
pluginСтруктура каталогов плагинов, хранящихся в папке plugins, примерно следующая:
-
api: Папка подключаемого модуля интерфейса, в которой могут храниться интерфейсы, необходимые для подключаемого модуля. -
components: Папка пользовательских компонентов, предоставляемая плагином, в ней может быть несколько пользовательских компонентов. -
index.js: файл входа в плагин, доступен здесьexportНемногоjsИнтерфейс для пользователей плагинов -
plugin.json: файл конфигурации подключаемого модуля, который в основном описывает, какие пользовательские компоненты могут вызываться извне подключаемым модулем, и определяет, какой файл js является файлом интерфейса js подключаемого модуля. Конфигурация по умолчанию выглядит следующим образом:
{
"publicComponents": {
"list": "components/list/list"
},
"main": "index.js"
}
Реализация
Некоторые люди могут задаться вопросом? Чувствую, что официал - это не готовый пример, зачем мне писать эту статью? На мой взгляд, примеры, приведенные на официальном сайте, слишком просты, чтобы показать использование плагинов, в примерах, приведенных на официальном сайте, много чего не задействовано, просто простой рендеринг списка данных без взаимодействия, что практически невозможно. существует в реальной разработке. Да, в большинстве случаев нам нужно выполнить ряд операций через обратный вызов плагина. Эта статья специально нацелена на болевые точки примера официального веб-сайта WeChat, рассказывая о нашем собственном процессе реализации и идеи~
хорошо, старые правила, сначала поставьте небольшую цель, мы должны реализовать плагин для селектора провинций и городов и отправлять данные при нажатии кнопки отправки, общий эффект показан на рисунке ниже~
Step1
Во-первых, мыcomponentsСоздайте файл компонентаregionPickerПапка, используемая для разработки нашего селектора провинций и городов, мы нажимаем правой кнопкой мыши и выбираем СоздатьcomponentИ после завершения нейминга будут сгенерированы компоненты компонента, а именно.wxml,.wxss,.json,.jsДля четырех файлов, для удобства, мы напрямую используем те, что поставляются с WeChat.pickerОсознать~
код показывает, как показано ниже:
структураregionPicker.wxml
<view class='section'>
<view class="section-title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" >
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
стильregionPicker.wxss
.section{
padding: 20rpx;
}
.section-title{
font-size: 30rpx;
line-height: 40rpx;
text-align: center;
color: #666;
}
.picker{
margin: 20rpx auto;
text-align: center;
font-size: 30rpx;
color: #666;
}
js regionPicker.js
Component({
properties : {
region : {
type : Array ,
value: ['北京市', '北京市', '东城区']
}
},
data: {
},
methods : {
bindRegionChange(e){
this.setData({
region: e.detail.value
})
}
})
Это в основном то же самое, что и когда мы пишем пользовательские компоненты, привязка данных находится вregionполя, методы, объявленные вmethodsобъект, о пользовательских компонентахjsДля тех, кто не очень знаком с написанием в документе, можно посмотреть на официальномComponent构造器и моя последняя статьяразработка пользовательских компонентовНекоторое введение и понимание этого ~
Step2
На данный момент вы внедрили пользовательский компонент. Как применить его к другим апплетам в виде плагинов? Вам нужно настроить два места, одноplugin.json, который объявляет наш плагин;
plugin.json
{
"publicComponents": {
"regionPicker" : "components/regionPicker/regionPicker"
},
"main": "index.js"
}
Другой — ввести его на нужной нам странице (вотindex.wxml),Исправлятьindex.json, импортировать плагин
index.json
{
"usingComponents": {
"regionPicker" : "plugin://myPlugin/regionPicker"
}
}
Затем вызовите его на странице
index.wxml
<!--引入插件 -->
<regionPicker />
<button class='submit'>提交</button>
Теперь эффект, который вы видите, в основном такой же, как на картинке ниже ~
Ну вроде нормально работает, проблем вроде нет~
Нет, кажется, снова возникла проблема, как мне передать данные после переключения, как мне пройти через область, которую я выбрал, когда я нажимаю кнопку отправки, действительно, давайте посмотрим~
Step3
Перечисленные выше проблемы мы решим далее.Во-первых, у нас есть опыт разработки компонентов ранее, и мы все должны знать, что мы были только вpropertiesзаявил в полеregion, то, конечно, мы можем изменить его, мы вindex.jsсерединаdataполе также объявляетregion, разница в том, что мы устанавливаем его значение равнымregion: ['广东省', '广州市', '海珠区'], а затем привязать его к нашему плагину<regionPicker region="{{region}}"/>После сохранения мы обнаружим, что значение плагина по умолчанию больше неПекин, Пекин, район Дунчэн, который становитсяПровинция Гуандун, город Гуанчжоу, район Хайчжу, Это решает проблему изменения значения плагина по умолчанию, и следующим шагом является событие обратного вызова!
Ну, на самом деле, callback-триггер тоже очень прост, мелкие партнеры, имеющие опыт разработки пользовательских компонентов, должны были давно подумать об этом, как и пользовательские компоненты, нам нужно толькоchangeКогда срабатывает обратный вызов, то есть мы модифицируемregionPicker.jsизbindRegionChangeМетоды, как показано ниже:
bindRegionChange(e){
this.setData({
region: e.detail.value
})
// 触发回调
this.triggerEvent("changeEvent", { region: this.data.region})
}
Мы передаем каждое измененное значение обратно через обратный вызов, поэтому мы напрямуюindex.wxmlопределено в<regionPicker region="{{region}}" bindchangeEvent="changeEvent" />,передачаindex.jsсерединаchangeEventметод может.
index.js
Page({
data: {
region: ['广东省', '广州市', '海珠区']
},
submit(){
console.log(this.data.region)
},
changeEvent(e){
console.log(e)
this.setData({
region : e.detail.region
})
},
onLoad(){
}
})
Таким образом, каждый раз при выборе области, вызванной обратным вызовом, мы можем передатьe.detailМы получили нужные данные~
Здесь взаимодействие данных плагина в основном нет проблем ~
Подумайте о том, что мы не использовали, плагинapiИнтерфейс, хорошо, давайте посмотрим, как это использовать ~
Step4
мы знаемapiРоль папки заключается в определении некоторых интерфейсов плагина, мы можем определить следующие методы:
api.js
let systemInfo = null;
// 获取插件信息
function getPluginInfo() {
return {
name : 'regionPicker' ,
version : '1.0.0' ,
date : '2018-04-14'
}
}
//设置设备信息
function setSystemInfo(value){
systemInfo = value;
}
//获取设备信息
function getSystemInfo(){
return systemInfo;
}
module.exports = {
getPluginInfo ,
getSystemInfo ,
setSystemInfo
}
проходить позадиexportsОткройте интерфейс, который вы хотите использовать~
Помните наш предыдущий файл записи плагинаindex.jsНу а теперь пригодится, мы в делеindex.jsфайл импортировать нашapi.js, чтобы мы могли выполнять некоторые операции над плагином при его загрузке.Здесь я просто получаю информацию об устройстве текущего пользователя:
var api = require('./api/api.js')
// 获取设备信息
wx.getSystemInfo({
success: function(res) {
// 存数据
api.setSystemInfo(
{
model: res.model ,
system: res.system
}
)
},
})
module.exports = {
getPluginInfo: api.getPluginInfo ,
getSystemInfo: api.getSystemInfo
}
Позже мы также увиделиexportsдва методаgetPluginInfoа такжеgetSystemInfo, представленный здесь метод заключается в том, что аспект используется вне подключаемого модуля и предоставляет интерфейс вызывающей стороне подключаемого модуля~
Step5
После того, как мы представим плагин, как вызвать интерфейс плагина?
На самом деле, это очень просто, нам нужно толькоjsфайл (вотindex.js)пройти черезvar plugin = requirePlugin("myPlugin")После внедрения плагина можно получить соответствующий интерфейс.
сейчас на страницеonLoadкогда мы печатаемplugin, консоль выводит следующее:
ВидетьpluginСодержание оказывается именно тем, что мыindex.jsпрошедшийexportsОткрытый интерфейс, давайте назовем его и попробуем~
Возвращает следующее:
Данные интерфейса также могут быть получены отлично, и это здорово~
Суммировать
Итак, у вас появилось новое понимание разработки подключаемых модулей апплета? На самом деле, это не так сложно, как кажется, норазработка пользовательских компонентовСходства много.Я считаю, что теперь вы в основном получили навыки разработки небольших программных плагинов, но вы еще не научились этому Цитируется в программе~
Черт, как по мне. .
о да, код размещен наgithubДрузья, которым нужно скачать его самостоятельно ~