ดาวน์โหลด MP CU - ดาวน์โหลดซอร์สโค้ด MP CU

MP CU

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

บันทึกการเปลี่ยนแปลง (เบต้า 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 ก่อน จากนั้นตรวจสอบว่าโหนด "setting" ในไฟล์การกำหนดค่า project.config.json ในไดเรกทอรีรากได้รับการกำหนดค่าหรือไม่:

 "useCompilerPlugins" : [
    " sass "
]

หากไม่ได้กำหนดค่า คุณจะต้องกำหนดค่าด้วยตนเอง

เนื่องจากมินิโปรแกรมเปิดใช้งานสไตล์ v2 เป็นค่าเริ่มต้น สไตล์ colorUI บางอย่างจึงใช้ไม่ได้ในโหมด v2 หากต้องการสไตล์ 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 จึงไม่คุ้นเคยกับมัน และไม่มีกลไกการจัดการสถานะเช่น vuex ภายใน WeChat เพื่อให้เป็นไปตามแนวคิดข้างต้น 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 โปรดใส่ใจกับขอบเขตของสิ่งนี้

ฟังก์ชั่นการคืนหน้า

ในแอปเพล็ต colorui 3.x WeChat ทุกหน้าจะต้องห่อด้วย ui-sys ดังนั้นฟังก์ชัน return ส่วนใหญ่จึงไม่สามารถใช้ได้ ColorUI จะลงทะเบียนฟังก์ชัน return ให้กับคุณในทุกหน้า และเรียก this._backPage() ในฟังก์ชัน ที่ต้องคืน this._backPage() ให้ความสนใจกับประเด็นนี้

กลับสู่หน้าแรก

เมื่อเรียก this._toHome() ในฟังก์ชันที่ต้องการส่งคืน ให้ใส่ใจกับขอบเขตของสิ่งนี้

เปลี่ยนธีม

เรียก 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' , //分享的路径，也是首页
   }
} )