Главная страница>Связанные с программированием>AI Исходный код
Скачать

Журнал изменений (бета-версия 3.3.2) | Онлайн-документация

Введение в MP-CU (пока не рекомендуется для использования в производственных средах)

Этот проект представляет собой собственную версию апплета colorUI3.x WeChat.

colorUI3.x по умолчанию поддерживает только uni-app , а colorUI в этом проекте представляет собой адаптированную версию.

Адрес colorUI3.x : https://github.com/weilanwl/coloruiBeta

Онлайн-документация: https://mp.color-ui.com/ (основной адрес, висит на Github)

Альтернативный онлайн-документ: https://mp-cu-doc-vercel.vercel.app/ (чтобы Github не конвульсировал, он висит на vercel.com, рекомендуется сохранить)

Встроенный механизм рендеринга vuex относится к проекту wxMiniStore.

Подготовьтесь к настройке

Вам необходимо сначала обновить инструмент разработки мини-программ до версии после 2021-10-11 , а затем проверить, настроен ли узел "setting" в файле конфигурации project.config.json в корневом каталоге: 

 "useCompilerPlugins" : [
    " sass "
]

Если он не настроен, необходимо настроить его вручную.

Поскольку мини-программа по умолчанию включает стили v2 , некоторые стили colorUI станут недействительными в режиме версии 2. Для полного стиля colorUI вам необходимо удалить "style": "v2" в файле app.json . 

 "style" : " v2 "

Конфигурация рамы

Вы можете настроить отдельный config.js для настройки соответствующей информации, а затем предоставить методы app.js для глобальной ссылки. По умолчанию используется config/ColorUI.js 

 import { colorUI } from './config/ColorUI'
App ( {
    colorUI ,        //挂载到app上，此步骤必须要有！
    onLaunch ( ) {
        
    }
} )

Затем добавьте файл CSS соответствующей платформы в файл app.scss в корневом каталоге. 

 @import './mp-cu/colorUI/scss/ui' ;

/* 实际项目中，可删除下面的相关文件和引用，因为图标太多，体积较大，可能你项目里并不需要这么多图标，建议自行添加需要的扩展icon图标引用。*/
/* @import './mp-sdk/icon/doc'; */

Связанные пути к файлам: 

 /config        // (MP-CU配置文件)
/mp-cu         // ColorUi主框架的文件夹，不建议修改这里面的文件，以免后续升级时，被覆盖。
/mp-sdk        // ColorUi框架的辅助文件夹，封装了一些常用的方法函数、扩展图标库等，按需使用，如不需要，可删除此文件夹。
/packageA      // 项目演示demo的分包，此包为模板包路径
/packageB      // 项目演示demo的分包，此包为实验室包路径
   ...
/config.js     // 框架的配置项，(新版本中，已移除该文件)

Как использовать компоненты

Подключите компонент и настройте его в файле app.json или xxx.json . 

 "usingComponents" : {
  "ui-sys" : " mp-cu/colorUI/components/ui-sys/ui-sys "
}

Пакет расширения colorUI MP-CU

Поскольку апплет WeChat не может использовать vue.key для глобального именования переменных, пользователи, привыкшие к Vue, не привыкли к нему, и внутри WeChat нет механизма управления состоянием, такого как vuex. Для реализации вышеизложенных идей был настроен colorUI MP-CU. для вас Набор собственного пакета расширений, вы можете импортировать переменные, функции и методы глобально, а также определять свое собственное состояние ( vuex ).

  • Файл конфигурации colorUI должен быть определен следующим образом: см. файл config/ColorUI.js . 
 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

Обратите внимание: пока вы монтируете colorUI в app.js, вам не нужно получать системную информацию на page и components , поскольку colorUI уже прописан за вас в соответствующих данных. Вам нужно только использовать его.

  • Например, на домашней странице демо-версии sys_navBar не определен в данных страницы, но его все равно можно использовать на странице и в js. Ключевым моментом является то, что эти данные изменяются в зависимости от мобильного телефона, к которому осуществляется доступ! 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

К данным, настроенным вами в конфигурации, также можно получить доступ в данных на странице. ColorUI определяет настроенные данные в атрибуте $cuData.

Вы можете получить настроенную конфигурацию через this.data.$cuConfig на page и components .

Настроенное содержимое данных можно получить через this.data.$cuData на page и components .

Настроенные методы функции будут зарегистрированы в соответствующих местах page и components . Вам останется только их вызвать.

Например: 

 import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      theme : 'auto' ,
      main : 'blue' ,
      text : 1 ,
      footer : true ,
      share : true ,
      shareTitle : 'MP CU（ ColorUI3.x 原生小程序版）' ,
      homePath : '/pages/home/home' ,
      tabBar : [ ] ,
   } ,
   data : {
      name : 'hello'
   } ,
   methods : {
      cuLog ( message , ... optionalParams ) {
         console . log ( message , ... optionalParams )
      }
   }
} )

Этот файл конфигурации можно напрямую называть this.cuLog () на всех страницах проекта, а также можно вызывать тело функции в файле конфигурации. Конечно, для облегчения работы можно получить и данные, и конфигурацию. Чтобы получить текущую конфигурацию проекта, ColorUI также регистрирует для вас файл конфигурации в данных. Когда вы изменяете другие страницы, содержимое внутри магазина будет обновляться в режиме реального времени (включая открытые и неоткрытые страницы). Подробную информацию см. в конфигурации темы ColorUI.

Обратите внимание, что имена функций, данных и других конфигураций, которые вы устанавливаете, не могут иметь следующие условия [ "data" , "onLoad" , "onShow" , " "onReady" ", "onHide" , "onUnload" , " "onPullDownRefresh" , "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]

встроенные методы

  • Встроенный справочник по использованию магазина
  • Справочник по использованию функции возврата страницы
  • Вернуться на главную страницу Справка по использованию
  • Сменить тему
  • Установите ссылку на использование основного цвета
  • Установить уровень размера шрифта. Справочник по использованию.

Подробное объяснение встроенных методов

Встроенный магазин

Вызовите this.setState() для данных глобальной переменной, которые необходимо установить, а затем получите данные глобальной переменной, чтобы получить свойства this.data.$cuStore . Обратите внимание на область действия this.

Функция возврата страницы

В версии апплета WeChat colorui 3.x все страницы должны быть обернуты ui-sys , поэтому большинство функций возврата не могут использоваться. ColorUI регистрирует функции возврата для вас на всех страницах и вызывает this._backPage() в функциях. что надо вернуть this._backPage() Обратите внимание на этот вопрос.

Вернуться на главную страницу

При вызове this._toHome() в функции, которую необходимо вернуть, обратите внимание на область действия this.

переключить тему

Вызовите this. _setTheme() , где вам нужно переключить тему.

Установить основной цвет

Вызовите this. _setMain() , где необходимо установить основной цвет.

Установить уровень размера шрифта

Вызовите this. _setText() , где необходимо установить уровень размера шрифта.

Прочие инструкции

Автоматически следуйте системной теме, переключайте функцию темы и настраивайте ее в файле app.json . 

 "darkmode" : true

После включения автоматического отслеживания при переключении тем на устройстве Android мини-программа будет перезагружена. По конкретным причинам см. официальные инструкции WeChat: https://developers.weixin.qq.com/community/develop/doc/. 000a88c66f00183d414c9879451400

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

 import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      share : true ,  //开启全局分享
      shareTitle : 'MP CU（ ColorUI3.x 原生小程序版）' ,  //分享标题
      homePath : '/pages/home/home' , //分享的路径，也是首页
   }
} )

Благодарности

Спасибо членам команды

@weilanwl
@bypanghu

И спасибо выдающимся участникам и авторам отзывов об ошибках.

@CN-HM

И друзья из Звезд:

Проекты с использованием MP-CU

@CN-HM
Руководство по побегу из Таркова
@extrastu
Каждая картинка-Запретный город Обои
@poisonboy
Апплет Weimu с открытым исходным кодом
@xtanyu
Удалите водяные знаки одним щелчком мыши
@ch4ixin
Гаджет для облегчения беспокойства
@extrastu
Карманный динамик, кричащий в уличном ларьке

>> Я тоже хочу размещать здесь свои проекты<<

? Поддержать этот проект?

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

Очевидно, это требует времени, но вы можете наслаждаться ими бесплатно.

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

  • При использовании MP-CU в проектах с открытым исходным кодом ссылка ведет сюда https://github.com/Color-UI/MP-CU: D
  • Отметьте и поделитесь этим проектом

Спасибо! ❤️

Лицензия

MIT © MP CU и ColorUI

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все