WeApp Workflow
1.0.0
WeApp-Workflow: Alur kerja pengembangan front-end applet WeChat berdasarkan Gulp
WeApp-Workflow adalah alur kerja pengembangan front-end yang dibuat khusus untuk pengembangan program mini WeChat. Ini dikembangkan berdasarkan Gulp 4 dan bertujuan untuk memecahkan masalah penulisan kode front-end dalam proses pengembangan program mini WeChat melalui alur kerja. .
Beranda proyek: https://github.com/Jeff2Ma/WeApp-Workflow
Pengenalan artikel: https://devework.com/weapp-workflow.html
Gunakan praprosesor Sass untuk membuat penulisan CSS lebih lancar. File .scss akan dikompilasi secara real time menjadi file .wxss yang didukung oleh applet WeChat.
Menggunakan iPhone 6 yang direkomendasikan secara resmi sebagai format desain standar, Anda dapat secara otomatis mengonversinya menjadi rpx dengan menulis px secara langsung selama pengembangan.
// Input: src/pages/index/index.scss
. index__header {
font-size : 14 px ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}
// Output: dist/pages/index/index.wxss
. index__header {
font-size : 28 rpx ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}Kompres gambar secara real-time dan gunakan metode tambahan untuk mencegah kompresi berulang.
Applet tidak mendukung referensi gambar dengan jalur relatif, tetapi hanya jalur absolut dengan header protokol https . Alur kerja ini dapat mengunggah gambar jalur relatif yang direferensikan dalam file WXML dan WXSS ke CDN penyimpanan cloud atau mengunggahnya ke ruang server pribadi melalui protokol FTP/SFTP. Saat ini mendukung Tencent Cloud dan Qiniu Cloud.
// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >
// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >Applet tidak mendukung file font dengan jalur relatif. Alur kerja ini dapat mentranskode file Font yang direferensikan dalam CSS ke base64 dan mengganti jalur aslinya.
// Input: src/pages/index/index.scss
@font-face {
font-family: 'fontello';
src: url("assets/fonts/fontello.ttf") format('truetype');
}
// Output: dist/pages/index/index.wxss
@font-face {
font-family: 'fontello';
src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}
Fitur ini digerakkan oleh plug-in postcss-lazysprite. Setelah menyiapkan gambar selama pengembangan, cukup tulis kode seperti @lazysprite "xxxx" untuk secara otomatis membuat gambar sprite dan menghasilkan CSS yang sesuai.
// Input: src/app.scss
@lazysprite "filetype" ;
/ / Output : d is t / app. wxss
. icon-filetype-doc {
background-image : url(.. / sprites/filetype.png);
background-position : 0 0 ;
width : 80 px ;
height : 80 px ;
}
. icon-filetype-pdf {
background-image : url(.. / sprites/filetype.png);
background-position : -90 px 0 ;
width : 80 px ;
height : 80 px ;
}
@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
. icon-filetype-doc {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : 0 0 ;
background-size : 170 px 170 px ;
}
. icon-filetype-pdf {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : -90 px 0 ;
background-size : 170 px 170 px ;
}
}Gunakan fitur baru versi Gulp 4 terbaru untuk membuat alur kerja Anda berjalan lebih cepat.
Inti hanya memiliki satu tugas default. Mekanisme pencocokan tugas yang masuk akal mengurangi proses yang rumit dan pengoperasian terminal yang bolak-balik, membuat pengembangan lebih nyaman.
Memperkenalkan kompilasi tambahan Sass dan mekanisme pembaruan tambahan dari tugas-tugas terkait gambar untuk membuat alur kerja berjalan lebih cepat.
.
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│ ├── app.js
│ ├── app.json
│ ├── app.scss
│ ├── assets // 开发相关的静态文件原始资源
│ │ ├── fonts //字体文件
│ │ ├── images // 图片文件，可被上传到CDN
│ │ ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│ │ └── sprites // 生成雪碧图小图的目录
│ ├── image // 小程序专用的图片资源（如tabbar icon）目录
│ ├── pages
│ └── utils
├── tmp // 通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
Versi Node disarankan menjadi v4 atau lebih tinggi. Karena alur kerja ini melibatkan ketergantungan pihak ketiga, disarankan untuk beroperasi di lingkungan Internet ilmiah.
0. Silakan ikuti Gulp-cli secara global terlebih dahulu.
npm install gulp-cli -g
1. Unduh file proyek melalui git clone .
git clone https://github.com/Jeff2Ma/WeApp-Workflow
2. Disarankan untuk menghapus direktori .git (pengguna Windows harap menghapusnya secara manual)
cd WeApp-Workflow
rm -rf .git
3. Instal modul yang diperlukan
npm i
4. Mulai pengembangan
Disarankan untuk menyalin config.js dan mengganti namanya menjadi config.custom.js , lalu menulis ulang informasi konfigurasi yang relevan sesuai dengan kebutuhan Anda yang sebenarnya (setiap item konfigurasi memiliki komentar). Selanjutnya, jalankan perintah berikut di terminal untuk mengaktifkannya:
gulp
Tugas yang tersisa: gulp clean : membersihkan folder dist , tmp .
Setelah menyelesaikan operasi di atas, Anda perlu membuat pengaturan yang relevan di "Alat Pengembang Web WeChat" (berdasarkan v1.x, dan tidak lagi kompatibel dengan v0.x).
1. Buat proyek baru dan langsung pilih seluruh direktori proyek, yaitu direktori tempat project.config.json berada, sebagai direktori proyek.
Selanjutnya, Anda dapat memasuki pengembangan reguler. Selama proses pengembangan, gunakan editor pihak ketiga (WebStorm, Sublime Text, dll.) untuk mengedit file di direktori src . Setelah menyimpan modifikasi, proses gulp akan mengkompilasinya secara real time ke lokasi yang sesuai dist direktori. Alat pengembang web WeChat akan secara otomatis dikompilasi dan disegarkan, dan saat ini hanya berfungsi sebagai fungsi pratinjau .
Poin-poin penting pengembangan:
Pengembangan SCSS : Edit page-name.scss langsung di bawah src/pages/page-name , maka secara otomatis akan diubah menjadi page-name.wxss dan ditempatkan di lokasi yang sesuai dari direktori dist . Selama proses pengembangan yang melibatkan nilai numerik, langsung tulis satuan px (menurut iPhone6 sebagai rancangan desain standar), dan akan secara otomatis dihitung dan diubah menjadi satuan rpx . Jika Anda tidak ingin melakukan konversi dalam keadaan khusus, harap tulis PX dengan huruf besar.
Pengembangan WXML : Tidak ada persyaratan khusus kecuali fungsi gambar CDN memerlukan jalur gambar khusus untuk ditulis.
WebFont : Pertama buat gambar sprite di situs web seperti fontell.com dan kemudian dapatkan file berformat ttf ke src/assets/fonts . Kemudian dapat ditranskode base64 secara otomatis dengan mengutipnya dengan cara biasa.
Gambar CDN : (Fungsi ini dinonaktifkan secara default dan perlu diaktifkan di pengaturan.) wxss atau wxml di applet WeChat tidak mendukung gambar dengan jalur relatif dan memerlukan jalur absolut yang dimulai dengan https. Alur kerja ini memungkinkan Anda menulis jalur relatif secara langsung selama pengembangan, dan alur kerja akan membantu mengunggah ke CDN dan mengganti jalur asli. Gambar tersebut harus ditempatkan di bawah src/assets/images , dan kemudian tulis jalurnya dalam wxml atau CSS menggunakan %ASSETS_IMG%/filename.png . %ASSETS_IMG% adalah direktori khusus untuk penggantian string selanjutnya.
Gambar sprite : Pertama-tama, tidak disarankan menggunakan gambar sprite dalam program kecil. Lebih baik menggunakan gambar tunggal atau WebFont secara langsung. Jika Anda harus menggunakannya, ikuti contoh program kecil dalam kode untuk menempatkan direktori gambar kecil di bawah src/assets/sprites dan kemudian memanggilnya melalui @lazysprite "xxxx" di SCSS (disarankan untuk meletakkan kode panggilan di bawah app.scss ). Untuk penggunaan gambar sprite tingkat lanjut, silakan klik di sini.
T: Mengapa tidak ada fungsi AutoPrefixer di alur kerja?
A: Karena opsi "Penyelesaian Gaya" di "Proyek" Alat Pengembang WeChat sudah menyediakan fungsi ini;
T: Mengapa tidak ada fungsi konversi babel ES6 ke ES5 yang dikonfigurasi dalam alur kerja?
A: Seperti di atas, alat pengembang WeChat telah disediakan.
T: Apa kelebihannya dibandingkan kerangka pengembangan program kecil seperti WePY?
J: WePY yang dikembangkan oleh tim pembayaran WeChat memang merupakan alat yang bagus. Jika dibandingkan dengan WePY di level yang sama, WeApp-Workflow tidak memiliki keunggulan sama sekali. WeApp-Workflow adalah alat alur kerja, bukan kerangka pengembangan. Ini berfokus pada pengembangan CSS dalam program kecil. Bagi beberapa pengembang, program kecilnya tidak memerlukan kerangka pengembangan seberat WePY.
T: WeApp-Workflow tidak memiliki tugas kompilasi khusus yang sesuai (mirip dengan gulp build , npm run build )?
A: Ya, karena WeApp-Workflow cocok untuk mengembangkan program kecil "kecil" daripada program kecil yang kompleks. Oleh karena itu, mengingat kecepatan pengembangan, jumlah kode, dll., tidak ada tahap pengembangan khusus dan satu tugas (pengembangan). Tugas kompilasi tambahan (buid) ditambahkan selama tahap penyelesaian. Hanya satu tugas.
Program kecil ini menggunakan WeApp-Workflow sebagai alur kerja pengembangan (Anda dapat mengirimkan PR untuk menambahkan kasus):
tmt-alur kerja
QMUI_Web
postcss-malassprite
gulp-qcloud-unggah
Tambahkan tes unit
ES6 Menulis Ulang
Unggah ke fungsi server FTP/SFTP
CDN mendukung Penyimpanan Cloud Qiniu
Jika Anda memiliki masukan atau saran fitur, Anda dipersilakan untuk membuat Masalah atau mengirimkan Permintaan Tarik. Terima kasih atas dukungan dan kontribusi Anda.
