홈페이지>프로그래밍 관련>AI 소스 코드
다운로드

변경 로그(베타 V3.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 이후 버전으로 업그레이드한 후 루트 디렉터리에 있는 project.config.json 구성 파일의 "setting" 노드가 구성되어 있는지 확인해야 합니다. 

 "useCompilerPlugins" : [
    " sass "
]

구성되지 않은 경우 수동으로 구성해야 합니다.

미니 프로그램은 기본적으로 v2 스타일을 활성화하므로 일부 colorUI 스타일은 v2 모드에서 유효하지 않게 됩니다. 완전한 colorUI 스타일을 위해서는 app.json 파일에서 "style": "v2" 삭제해야 합니다. 

 "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 : {
      //全局函数
   }
} )

app.js에 colorUI를 마운트하는 한, colorUI는 해당 데이터에 이미 작성되어 있으므로 page 및 components 에서 시스템 정보를 얻을 필요가 없습니다.

  • 예를 들어 데모의 홈 페이지에서는 sys_navBar가 페이지 데이터에 정의되어 있지 않지만 페이지와 js에서는 계속 사용할 수 있습니다. 중요한 점은 이 데이터가 액세스된 휴대폰에 따라 변경된다는 것입니다! 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

config에서 구성한 데이터는 페이지의 데이터에서도 액세스할 수 있습니다. ColorUI는 $cuData 속성에서 구성된 데이터를 정의합니다.

page 및 components 의 this.data.$cuConfig 통해 구성된 구성을 가져올 수 있습니다.

구성된 데이터 내용은 page 및 components 의 this.data.$cuData 통해 얻을 수 있습니다.

구성된 함수 메서드는 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 의 속성을 가져옵니다.

페이지 복귀 기능

colorui 3.x WeChat 애플릿 버전에서는 모든 페이지를 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

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체