Структура проекта инициализации апплета WeChat

Апплет WeChat

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

Разработчик нового проекта

Схема не используется云开发,нужно云开发дополнительная проверка

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

Начиная с базовой библиотеки Mini Program версии 2.2.1 или выше и инструментов разработчика 1.02.1808300 или выше, Mini Program поддерживает использованиеnpm Установите сторонние пакеты. Прежде всего, нам нужно инициализировать пакет проекта, вы можете видеть, что файл конфигурации пакета генерируется в корневом каталоге проекта.package.json

npm init -y

использовать вант-уи

Использование фреймворка пользовательского интерфейса может помочь нам повысить эффективность разработки и повторить колесо.Vant-WeappРамки - хороший выбор.

  • Шаг 1. Установка через npm
# 通过 npm 安装
npm i @vant/weapp -S --production
  • Шаг 2. Соберите пакет npm

Откройте инструменты разработчика WeChat, нажмите «Инструменты» -> «Создать npm» и установите флажок «Использовать».npmВариант модуля, после завершения сборки можно импортировать компоненты

поведение поведение

behaviorsэто функция для совместного использования кода между компонентами, аналогичнаяvue"примеси" в . каждыйbehaviorМожет содержать набор свойств, данных, функций и методов жизненного цикла. Когда компонент ссылается на него, его свойства, данные и методы будут включены в компонент, и в соответствующее время будут вызываться функции жизненного цикла. Каждый компонент может ссылаться на несколькоbehavior,behaviorВы также можете указать другиеbehavior.

Подробное значение и использование параметров см.BehaviorСправочная документация. Новый testBehavior.js в каталоге поведения, обычно я создаю модуль в соответствии сbehavior, например пользовательский модуль, создаст новый userBehavior.js

<!--behaviors/testBehavior.js-->
export default Behavior({
  properties: {

  },
  data: {
    testData: {}
  },
  
  methods: {
    /**
     * @description 测试方法
     */
    testMethods () {

    }
  }
})

компонентыОбщие компоненты

глобальные общедоступные компоненты

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

Бизнес-компоненты страницы

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

компонент импорта страницы

{
  "usingComponents": {
    "index-child": "./components/IndexChild/index",
    "index-child2": "./components/IndexChild2/index"
  }
}

Страница состоит из различных компонентов, которые соответственно обрабатывают бизнес-логику компонентов.

<!--index.wxml-->
<view class="container">
  <index-child />
  <index-child2 />
</view>

конфигурация конфигурации

Конфигурация, необходимая для создания нового проекта конфигурации index.js в каталоге config.

const BASE_URL = 'https://shop.freshlejia.com/apiStore/'  //接口请求的基本路径

export default {
  BASE_URL,
  UPLOAD_URL: `${BASE_URL}api/common/upload` //上传服务器的路径
}

Каталог icons настраивает шрифт iconfont.

  • Шаг 1: Создайте новую проектную группу на iconfont.cn

  • Шаг 2: Добавьте значок, необходимый для проекта, и загрузите соответствующий файл.

  • Шаг 3. Импорт связанных документов в проект

Создайте новый значок в корневом каталоге, сохраните только что загруженный файл, измените его.iconfont.cssфайл вiconfont.wxss

Введен в глобальный файл проекта

/**app.wxss**/
@import './icons/iconfont';

ресурс изображений изображений

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

набор инструментов

В каталоге utils хранятся файлы инструментария, связанные с проектом.

Используйте библиотеку http-запросов flyio

Официальный запрос запроса, предоставляемый апплетом, но нам нужно инкапсулировать его в запрос, используемый нашим проектом, потому что нам всегда нужна глобальная обработка перехвата запроса, глобальная обработка ответа на запрос и т. д.vueиспользуется в проектеaxiosТакой же,fiyioToolkit может помочь нам решить эту проблему. Мы можем реализовать выбор следующими двумя способами (последний рекомендуется для объектной ориентации):

Инкапсулировать объект пакета запроса

  • Шаг 1: ЗагрузитеflyioПакеты хранятся вutilsВниз

  • Шаг 2. Инкапсулируйте файл http.js
<!--utils/http.js-->
import config from '../config/index'
const Fly = require('./flyio/index')
const fly = new Fly

//定义请求的基本路径
fly.config.baseURL = config.BASE_URL

//请求拦截器
fly.interceptors.request.use(request => {
  //拦截处理
  request.headers = { //请求头
    "Content-Type": "application/x-www-form-urlencoded",
  }
  return request
})

//响应拦截
fly.interceptors.response.use(response => {
  //拦截处理操作
  return response
})


export const api = {
  //返回结果的状态码
  CODE: {
    SUCCESS: 200000, //调用成功
    OPTIONS_ERROR: 5000100 //参数错误
  },

  get: (params) => {
    return fly.get(params.url, params.data)
  },

  post: (params) => {
    return fly.post(params.url, params.data, params.options)
  }
}

Инкапсулировать базовый класс запроса (реализация класса ES6)

существуетmodelsновый каталогrequestкаталог, создатьrequest.jsФайл базового класса, код выглядит следующим образом

import Fly from '../../utils/flyio/index'
import config from '../../config/index'
import RequestCode from './requestCode'
const fly = new Fly()

class RequestModel{
  constructor () {
    this.initFlySetting()
  }

  /**
   * @description 初始化Flyio配置，全局的拦截处理
   */
  initFlySetting () {
      //定义请求的基本路径
      fly.config.baseURL = config.BASE_URL

      //请求拦截器
      fly.interceptors.request.use(request => {
        //拦截处理
        request.headers = { //请求头
          "Content-Type": "application/x-www-form-urlencoded",
        }
        return request
      })

      //响应拦截
      fly.interceptors.response.use(response => {
        //拦截处理操作
        console.log('RequestCode',response)
        if(response.data.code == RequestCode.CODE.OPTIONS_ERROR) {
          //全局错误处理
        }
        return response.data
      })
  }

  /**
   * 
   * @param {object} params 封装的get请求： url:请求地址  data：请求数据
   */
  getRequest (params)  {
    return fly.get(params.url, params.data)
  }

  /**
   * 
   * @param {object} params 封装的post请求： url:请求地址  data：请求数据 options:请求额外参数
   */
  postRequest (params)  {
    return fly.post(params.url, params.data, params.options)
  }
  
}
export default RequestModel

Создание соответствующего кода состояния для глобального запроса может помочь нам обнаружить проблему.requestСоздано в каталогеrequestCode.jsдокумент

class RequestCode { 
  //请求状态CODE码
  static CODE = {
    SUCCESS: 2000000, //调用成功
    OPTIONS_ERROR: 5000100 //参数错误
    ...
  }
}
export default RequestCode

В других модулях нужно только наследовать базовый запрос и инкапсулировать соответствующий запрос данных, например под пользовательский модульmodels/user.js

import RequestModel from './request/request'

class UserModel extends RequestModel {
  constructor () {
    super()
  }

  test () {
    return this.postRequest({
      url: 'index/getAdList.json'
    })
  }
}

export default UserModel

Используйте этот модуль на странице

import UserModel from "../../models/user"
const user = new UserModel()
async onLoad  () {
    const res =await user.test()
    if(res.status == RequestCode.CODE.SUCCESS) {
      console.log('getSuccesss',res)
    }
},

Инструмент проекта обрабатывает функциональные файлы

Создайте новый файл tool.js и напишите небольшую функцию инструмента проекта.

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatNumber: formatNumber
}

Файл функции инструмента, связанного с бизнесом проекта

Создайте новый файл index.js и напишите бизнес-функции.

/**
 * @description 检查是否需要更新小程序
 */
export function checkUpdateApp() {
  if (wx.canIUse('getUpdateManager')) {
    const updateManager = wx.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        console.log('res.hasUpdate====')
        updateManager.onUpdateReady(function () {
          wx.showModal({
            title: '发现新版本',
            content: '升级至新版本，享受最新最全的活动内容',
            showCancel: false,
            success: function (res) {
              // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
              if (res.confirm) {
                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
              }
            }
          })
        })
        updateManager.onUpdateFailed(function () {
          // 新的版本下载失败
          wx.showModal({
            title: '已经有新版本了哟~',
            content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
            showCancel: false
          })
        })
      }
    })
  }
}

класс инкапсуляции модуля моделей

Этот модуль в основном используетMVCУровень M, который обрабатывает уровень данных, в основном включает связанные HTTP-запросы.

import { api } from '../utils/http'

class UserModel{
  /**
   * @description 获取当前登录的用户信息
   */
  getUserInf (id) {
    return api.post({
      url: 'store/user/info',
      data:{
        id
      }
    })
  }

}

export default UserModel

слой просмотра страниц

Этот модуль в основном используетMVCДля слоя V рекомендуется деконструировать в соответствии с каталогом модуля.Например, рекомендуется, чтобы все дела пользовательского модуля находились в пользовательской папке.

wxs-фильтр

В проекте нам всегда нужно фильтровать и модифицировать данные, нам нужно использовать фильтр wxs в проекте

<!--order.wxs-->
/**
 * @description 将整数保留两位小数，若为整数或一位小数则补零
 * @param x 
 */
var keepTwoDecimals = function(x) {
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
  rs = s.length;
  s += '.';
  }
  while (s.length <= rs + 2) {
  s += '0';
  }
  return s;
}

module.exports = {
  keepTwoDecimals:keepTwoDecimals
}

Использование wxs в компонентах страницы

<!-- order.wxml -->
<wxs src="../../../../../filter/store.wxs" module="tools"></wxs>
<view class="statistics-content-total__count">
{{earnings.earningsAllCount ? tools.keepTwoDecimals(earnings.earningsAllCount) : 0.00}}
</view>

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

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

<!--现在官方提供的写法-->
wx.getSystemInfo({
  success (res) {
    console.log(res)
  }
})

Сначала нужно установить соответствующий npm, после установки не забудьте собрать npm в инструментах разработчика.

npm install --save miniprogram-api-promise

существуетutils/index.jsНабор бизнес-инструментов добавляет эквивалентную функцию обработчика

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

/**
 * @description promise化小程序api接口
 * @returns {object} promise化后api集合
 */
export function promiseWXApi() {
  const wxp = {}
  // promisify all wx's api
  promisifyAll(wx, wxp)
  return wxp
}

Вызовите эту функцию в записи апплета (app.js), чтобы получить доступ к глобальномуglobalDataв данных

//app.js
import { promiseWXApi } from './utils/index'
App({
  onLaunch: function () {
    this.setPromiseForWXApi()
  },

  
  globalData: {
    //全局数据管理
    wxp: {} //全局微信api-Promise化管理器
  },
  
  /**
   * @description 设置全局promise化微信小程序api
   */
  setPromiseForWXApi () {
    this.globalData.wxp = promiseWXApi()
  }
})

Использовать Promise API на странице

const { globalData } =  getApp()
Page({
  data: {
  },
  onLoad  () {
    globalData.wxp.getSystemInfo().then(res => {
      console.log('getSystemInfo2',res)
    })
  },
})

Конечно, вы также можете использоватьasync/awaitНаписание более элегантно

async onLoad  () {
  const res = await globalData.wxp.getSystemInfo()
  console.log('res',res)
 },

Препроцессор плагина vscode для вспомогательной разработки wxss

less

При разработке мини-программ WeChat написание css будет более хлопотным и неэффективным, лучше всего использовать less или sass, для компиляции можно использовать gulp и другие конфигурации, но использование этого метода немного хлопотно, лучше всего использовать Vscode Установите плагин less to wxss,Easy LESS

1. Найдите плагин easy less в Vscode и установите его; 2. Создайте папку .vscode в проекте и создайте файл settings.json в папке .vscode.Содержимое конфигурации в settings.json выглядит следующим образом:

"less.compile": {
    "outExt": ".wxss"
}

3. Параметр outExt — это имя файла экспорта, по умолчанию — .css, его можно настроить как .wxss, и можно просмотреть другие элементы конфигурацииДокументацияВы также можете настроить каталог генерации файлов:

"less.compile": {
    "out": "${workspaceRoot}\\css\\css\\"
}

${workspaceRoot} представляет собой корневой каталог текущего проекта, а следующий путь настраивается сам по себе.

sass

  • установка vscodeEasy Sassплагин

  • settings.json настроить sass
...
{
    "easysass.formats":[
        {
            "format": "expanded",  // 没有缩进的、扩展的css代码
            "extension": ".wxss"  //转化的后缀名
        },
    ]
}

стили глобальные стили

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

API Mock

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

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

В некоторых случаях разработчикам необходимо разделить апплет на разные подпакеты, упаковать их в разные подпакеты во время создания и загрузить их по требованию, когда пользователи их используют. Требуется ли субподряд или нет, зависит от ситуации вашего собственного проекта.Рекомендуется, чтобы проект был передан в субподряд по модулям в начале, а позднее расширение проекта будет слишком большим, чтобы превысить 2M.Официальная субподрядная документация

адрес проекта на гитхабе

GitHub.com/250786898/Я…

Категории