Введение и практика разработки апплетов WeChat

внешний интерфейс WeChat JavaScript Апплет WeChat

Базовые знания

Рамки МИНА

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

Платформа MINA предоставляет собственные языки описания уровня представления WXML и WXSS, а также структуру логического уровня на основе JavaScript, а также предоставляет системы передачи данных и событий между уровнем представления и уровнем логики, поэтому мы в основном фокусируемся на данных и логика.

привязка данных ответа

В основе фреймворка лежит адаптивная система привязки данных.
Вся система разделена на две части: уровень представления (View) и уровень логики (App Service).
Платформы упрощают синхронизацию данных с представлениями. Когда мы изменяем данные, нам нужно только изменить данные на логическом уровне, и уровень представления будет соответствующим образом обновлен.
Взгляните на следующий пример:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="onChangeName"> Click me! </button>
// This is our App Service.
// Register a Page.
Page({
  data: 'Baixing',
  onChangeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

Приведенная выше структура связывает имя в данных логического уровня с именем уровня представления, поэтому при открытии страницы будет отображаться «Hello Baixing!».
При нажатии кнопки уровень представления отправит событие onChangeName на уровень логики, а уровень логики найдет соответствующий обработчик событий. Логический слой выполняетsetData(), измените имя с Baixing на MINA, поскольку данные и слой представления связаны, поэтому слой представления автоматически изменится на «Hello MINA!».

Управление страницей

Платформа управляет маршрутизацией страниц апплета, что обеспечивает плавное переключение между страницами и дает странице полный жизненный цикл. Все, что нужно сделать разработчику, — это зарегистрировать данные, методы и функции жизненного цикла страницы в фреймворке, а все остальные сложные операции обрабатываются фреймворком.

основные компоненты

Фреймворк предоставляет набор базовых компонентов.Эти компоненты имеют свои стили в стиле WeChat и особую логику.Комбинируя базовые компоненты, мы можем легко создать мощный апплет WeChat. Ссылка для деталейДокументация по компонентам программы WeChat Mini.

Богатый API

Платформа MINA предоставляет богатые собственные API-интерфейсы WeChat, которые могут легко использовать возможности, предоставляемые WeChat, такие как получение информации о пользователе, локальное хранилище и платежные функции. Для получения дополнительной информации см.Документация по API мини-программы WeChat.

Структура каталога мини-программы

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

документ эффект
app.js файл записи запуска апплета
app.json Общедоступные настройки мини-программы, такие как регистрация информации о маршрутизации
app.wxss Общедоступная таблица стилей мини-программы

Страница апплета состоит из четырех файлов, а именно:

документ эффект
js Конкретные логические функции страницы, такие как логические методы, такие как совместное использование страницы
wxml Для этого используется структура страницы, различные компоненты, предоставляемые фреймворком MINA.
wxss Таблица стилей страницы, похожая на файл CSS для веб-разработки, используется для управления определенным стилем отображения страницы.
json Конфигурация страницы для настройки уникальных функций, предоставляемых платформой MINA, например, включать ли обновление по запросу и другую информацию о конфигурации.

Примечание. Вышеупомянутые четыре файла должны иметь одинаковый путь и имя файла.

Как работает апплет

Обратите внимание, что в апплете нет концепции перезапуска, основной механизм работы следующий:

  • Когда апплет переходит в фоновый режим, клиент какое-то время будет поддерживать рабочее состояние, а по истечении определенного периода времени (5 минут для теплого официального документа) он будет активно уничтожен WeChat.
  • Закрепленные мини-программы не будут активно уничтожаться WeChat.
  • При получении предупреждения о системной памяти апплет также будет уничтожен.

практика разработки

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

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

Создать проект

Здесь, поскольку приложения AppID нет, выбран режим разработки без AppID. Если вы хотите использовать AppID для разработки, вы можете передатьОфициальный сайт апплета WeChatЯ не буду здесь вдаваться в подробности настройки, за подробностями обратитесь к документации на официальном сайте апплета WeChat.

Стартовая страница инструментов разработчика:

开始页面

Как и выше, мы вводим имя проекта, выбираем каталог проекта и нажимаем «Добавить проект», чтобы войти в интерфейс разработки созданного проекта следующим образом:

创建项目

  • На вкладке «Редактировать» слева вы можете редактировать код.
  • На вкладке «Отладка» вы можете выполнять отладочные работы, такие как отладка точки останова, просмотр информации о текущем хранилище и моделирование координат.
  • На вкладке проекта вы можете настроить текущие параметры запуска программы, такие как переключение базовой версии библиотеки, создание предварительного просмотра апплета и т. д.

Создать страницу

Наша программа в основном имеет две страницы, одна из которых является домашней страницей, на которой отображаются все учетные записи, а другая — страницей, добавляющей учетные записи. На вкладке «Редактирование инструментов разработки» нажмите «Добавить новый» и введите файл, который нужно создать. Конкретный каталог после завершения выглядит следующим образом:

创建页面

В указанном выше каталоге (Pages) есть 4 разных формата файлов в каждом каталоге страниц. В части базовых знаний были объяснены конкретные функции различных форматов, поэтому я не буду повторять их здесь. Теперь давайте перейдем к фактическому кодированию.

Написать код

1. Конкретные функции домашней страницы включают в себя:

  • общая стоимость статистики
  • Показать сводную информацию для каждой записи

Основной логический код страницы выглядит следующим образом:

import {
  loadAllRecord,
  deleteRecordById 
} from '../../services/tallyService.js'
var app = getApp()

Page({
  data: {
    userInfo: {},
    list: [],
    totalMoney: 0
  },
  ...
  // 加载已存的每日花费记录，且统计总共花费的金额。
  fetchData() {
    wx.showLoading({
      title: '加载数据中...',
    })

    var self = this
    loadAllRecords((list) => {
      var totalMoney = 0
      list.forEach((item) => {
        totalMoney += Number(item.money)
      }) 
      self.setData({list, totalMoney})

      self.customerData.isFirstShow = false
      setTimeout(() => {
        wx.hideLoading()
      }, 1000)
    })
  }
  ...
})

Код структуры страницы выглядит следующим образом:

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <view class="info-view">
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      <text class="money-text">总花费：{{totalMoney}}元</text>
    </view>
  </view>
  <view class="list-view">
    <block wx:for="{{list}}" wx:key="*this">
      <view class="tally-cell">
        <text class="detail-text">{{item.detail}}</text>
        <text class="money-text">{{item.money}}元</text>
        <text class="time-text">{{item.time}}</text>
      </view>
    </block>
  </view>
  <navigator class="add-button" url="../record/record" open-type="navigate">记一笔</navigator>
</view>

2. Основные функции страницы записи:

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

Основной логический код страницы выглядит следующим образом:

import {addNewRecord} from '../../services/tallyService.js'
var app = getApp()

Page({
  ...
  onSaveRecord() {
    let record = {
      money: this.customerData.money, 
      detail: this.customerData.detail
    }
    addNewRecord(record, (res)=>{
      console.log(res)
      wx.navigateBack({})
    })
  }
})

Код структуры страницы выглядит следующим образом:

<!--record.wxml-->
<view class="container record-view">
  <view class="money-view">
    金额：
    <input placeholder="请输入要记录的花费金额..." 
      bindblur="onMoneyBlured" 
      maxlength="10" 
      placeholder-style="font-size: 14px;"
      confirm-type="done" 
      type="digit" 
      auto-focus
      value="{{money}}"
      bindinput="onMoneyChanged"/>
  </view>
  <view class="detail-view">
    花费记录：
    <textarea class="detail-textarea"
      placeholder-style="font-size: 14px;"
      placeholder="请输入具体的花费详细吧..."
      maxlength="160"
      cursor-spacing="10"
      bindinput="onDetailChanged"/>
  </view>
  <button class="save-button" 
    catchtap="onSaveRecord" 
    formType="submit" 
    disabled="{{ !canSave }}">
    保存
  </button>
</view>

3. Запишите урок Дао

Основной логический код выглядит следующим образом:

var records = []
import {formatTime} from '../utils/util.js'

function addNewRecord({money, detail}, callback) {
  let id = records.length
  let time = formatTime(new Date())
  let record = {id, money, detail, time}
  records.push(record)

  if (typeof callback === 'function') {
    callback(true)
  }
}

function loadAllRecord(callback) {
  if (typeof callback === 'function') {
    callback(records)
  }
}

module.exports = {
  addNewRecord,
  loadAllRecord
}

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

Если вы разрабатываете, заполнив AppID, на вкладке проекта средства разработки нажмите Предварительный просмотр, чтобы сгенерировать QR-код текущего апплета. Затем используйте учетную запись WeChat с разрешениями разработчика или опытного пользователя, чтобы отсканировать QR-код, чтобы запустить апплет на реальном компьютере. Конкретные настройки показаны на следующем рисунке:

预览设置

Поскольку я разрабатываю без AppID, я могу просмотреть его только с помощью инструментов разработки.

Последняя рабочая страница программы выглядит следующим образом:

百姓记账小程序

Загрузите полный код этой статьи:GitHub.com/Ван Хунли1…

концевые сноски

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

автор:Ван Хунли
Введение: инженер-разработчик iOS из People's Network.

Эта статья является лишь личной точкой зрения автора и не отражает позицию People's Network.

Эта статья была впервые опубликована в общедоступной учетной записи WeChat «Технической группы People's Network», отсканируйте код и немедленно подпишитесь:

Категории