Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

Ubah log (Beta V3.3.2) |. Dokumentasi online

Pengantar MP-CU (tidak direkomendasikan untuk digunakan di lingkungan produksi untuk saat ini)

Proyek ini adalah versi asli applet WeChat colorUI3.x .

colorUI3.x hanya mendukung uni-app secara default, dan colorUI dalam proyek ini adalah versi adaptasi.

alamat colorUI3.x : https://github.com/weilanwl/coloruiBeta

Dokumentasi online: https://mp.color-ui.com/ (alamat utama, digantung di Github)

Dokumen online alternatif: https://mp-cu-doc-vercel.vercel.app/ (untuk mencegah Github kejang, digantung di vercel.com, disarankan untuk menyimpannya)

Mesin rendering vuex bawaan mengacu pada proyek wxMiniStore.

Bersiaplah untuk mengonfigurasi

Anda perlu memutakhirkan alat pengembangan program mini ke versi setelah 2021-10-11 terlebih dahulu, lalu memeriksa apakah simpul "setting" di file konfigurasi project.config.json di direktori root telah dikonfigurasi: 

 "useCompilerPlugins" : [
    " sass "
]

Jika tidak dikonfigurasi, Anda perlu mengkonfigurasinya secara manual.

Karena program mini mengaktifkan gaya v2 secara default, beberapa gaya colorUI akan menjadi tidak valid dalam mode v2. Untuk gaya colorUI lengkap, Anda perlu menghapus "style": "v2" di file app.json . 

 "style" : " v2 "

Konfigurasi bingkai

Anda dapat menyiapkan config.js terpisah untuk mengonfigurasi informasi yang relevan, lalu memaparkan metode ke app.js untuk referensi global config/ColorUI.js 

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

Kemudian masukkan file css dari kerangka yang relevan ke dalam file app.scss di direktori root. 

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

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

Jalur file terkait: 

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

Cara menggunakan komponen

Pasang komponen dan konfigurasikan di file app.json atau xxx.json 

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

paket ekspansi colorUI MP-CU

Karena applet WeChat tidak dapat menggunakan vue.key untuk memberi nama variabel secara global, pengguna yang terbiasa dengan Vue tidak terbiasa menggunakannya, dan tidak ada mekanisme manajemen status seperti vuex di dalam WeChat. Untuk memenuhi ide di atas, colorUI MP-CU telah disesuaikan untuk Anda Satu set paket ekstensinya sendiri, Anda dapat mengimpor variabel, fungsi, dan metode secara global, dan Anda juga dapat menentukan status Anda sendiri ( vuex ).

  • File konfigurasi colorUI perlu didefinisikan serupa dengan berikut ini, lihat file config/ColorUI.js . 
 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

Perhatikan bahwa selama Anda memasang colorUI di app.js, Anda tidak perlu mendapatkan informasi sistem di page dan components , karena colorUI telah ditulis dalam data yang sesuai untuk Anda.

  • Misalnya di halaman beranda demo, sys_navBar tidak ditentukan dalam data halaman, tetapi masih dapat digunakan di halaman dan js. Kuncinya adalah data ini berubah sesuai dengan ponsel yang diakses! 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

Data yang Anda konfigurasikan di konfigurasi juga dapat diakses dalam data di halaman. ColorUI mendefinisikan data yang dikonfigurasi dalam atribut $cuData.

Anda bisa mendapatkan konfigurasi yang dikonfigurasi melalui this.data.$cuConfig di page dan components .

Konten data yang dikonfigurasi dapat diperoleh melalui this.data.$cuData di page dan components .

Metode fungsi yang dikonfigurasi akan didaftarkan di lokasi yang sesuai di page dan components .

Misalnya: 

 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 )
      }
   }
} )

File konfigurasi ini dapat langsung disebut this.cuLog () di semua halaman proyek, dan isi fungsi di file konfigurasi dapat dipanggil. Tentu saja, data dan konfigurasi dapat diperoleh di halaman tersebut untuk mendapatkan konfigurasi proyek saat ini, ColorUI juga mendaftarkan file konfigurasi ke dalam data untuk Anda. Saat Anda memodifikasi halaman lain, konten di dalam toko akan diperbarui secara real time (termasuk halaman yang telah dibuka dan halaman yang belum dibuka). Untuk detailnya, silakan lihat konfigurasi tema ColorUI.

Perhatikan bahwa fungsi, data, dan nama konfigurasi lain yang Anda tetapkan tidak boleh memiliki kondisi berikut [ "data" , "onLoad" , "onShow" , " "onReady" , " "onHide" , "onUnload" , "onPullDownRefresh" , "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]

metode bawaan

  • Referensi penggunaan toko bawaan
  • Referensi penggunaan fungsi pengembalian halaman
  • Kembali ke halaman beranda Referensi penggunaan
  • Ganti topik Referensi penggunaan
  • Tetapkan referensi penggunaan warna utama
  • Tetapkan referensi penggunaan tingkat ukuran font

Penjelasan mendetail tentang metode bawaan

Toko bawaan

Panggil this.setState() pada data variabel global yang perlu disetel, lalu dapatkan data variabel global untuk mendapatkan properti this.data.$cuStore .

Fungsi pengembalian halaman

Dalam versi applet WeChat colorui 3.x, semua halaman harus dibungkus dengan ui-sys , sehingga sebagian besar fungsi pengembalian tidak dapat digunakan. ColorUI mendaftarkan fungsi pengembalian untuk Anda di semua halaman, dan memanggil this._backPage() dalam fungsi tersebut yang perlu dikembalikan. this._backPage() Perhatikan masalah lingkup ini.

Kembali ke halaman beranda

Saat memanggil this._toHome() fungsi yang perlu dikembalikan, perhatikan cakupannya.

beralih tema

Sebut this. _setTheme() di mana Anda perlu mengganti tema.

Tetapkan warna utama

Sebut this. _setMain() di mana warna utama perlu disetel.

Atur tingkat ukuran font

Sebut this. _setText() di mana tingkat ukuran font perlu diatur.

Instruksi lainnya

Ikuti tema sistem secara otomatis, alihkan fungsi tema, dan konfigurasikan di file app.json 

 "darkmode" : true

Setelah mengaktifkan ikuti otomatis, saat mengganti tema di perangkat Android, program mini akan dimuat ulang Untuk alasan spesifik, silakan merujuk ke instruksi resmi WeChat: https://developers.weixin.qq.com/community/develop/doc/. 000a88c66f00183d414c9879451400

Aktifkan fungsi berbagi global, bagikan dengan teman, dan bagikan di lingkaran pertemanan Anda 

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

Ucapan Terima Kasih

Terima kasih anggota tim

@weilanwl
@bypanghu

Dan terima kasih kepada kontributor dan pemberi masukan bug yang luar biasa

@CN-HM

Dan teman-teman dari Bintang:

Proyek menggunakan MP-CU

@CN-HM
Panduan untuk Melarikan Diri dari Tarkov
@ekstrastu
Setiap gambar-Wallpaper Kota Terlarang
@poisonboy
Applet sumber terbuka Weimu
@xtanyu
Hapus tanda air dengan satu klik
@ch4ixin
Gadget penghilang rasa khawatir
@ekstrastu
Teriakan-teriakan di warung jalan pengeras suara saku

>> Saya juga ingin menampilkan proyek saya di sini<<

? Mendukung proyek ini

Kami melakukan yang terbaik untuk open source sebanyak yang kami bisa, dan kami mencoba menanggapi semua orang yang membutuhkan bantuan dalam menggunakan proyek ini.

Tentu saja ini membutuhkan waktu, tetapi Anda dapat menikmatinya secara gratis.

Namun, jika Anda menggunakan proyek ini dan merasa senang dengan proyek ini, atau hanya ingin mendukung kelanjutan pengembangan kami, Anda dapat melakukannya dengan:

  • Saat menggunakan MP-CU dalam proyek sumber terbuka Anda, tautannya mengarah ke sini https://github.com/Color-UI/MP-CU :D
  • Bintangi dan bagikan proyek ini

Terima kasih! ❤️

Lisensi

MIT © MP CU Dan ColorUI

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua