wechat h5 boilerplate
v0.3.6
"Jadikan produksi H5 semudah produksi PPT!"
Wechat-H5-Boilerplate (selanjutnya disebut WHB) adalah templat dinamis H5, yang dioptimalkan secara khusus untuk WeChat dan cocok untuk membuat halaman promosi H5 bergulir layar penuh dengan cepat.
Misalnya, hanya diperlukan satu baris kode untuk menganimasikan sepotong teks:
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
Gunakan ponsel Anda untuk mengunjungi alamat di bawah atau pindai kode QR di bawah
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
Kloning proyek ini secara lokal
Jalankan di konsol:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
Atau Anda dapat mengunduh paket terkompresi kode sumber WHB langsung dari halaman Rilis.
Instal paket pihak ketiga
WHB menggunakan NPM untuk mengelola paket pihak ketiga
Jalankan di konsol:
npm install
Catatan 1: Karena lingkungan jaringan yang buruk di Tiongkok, pengunduhan paket di NPM sangat lambat. Disarankan untuk menggunakan Taobao NPM mirror CNPM. Untuk metode instalasi CNPM, silakan lihat petunjuk situs resminya. CNPM v4.2.0 memiliki bug pada sistem Windows (lihat #97). Pengguna Windows tidak boleh menggunakan versi ini. Meskipun versi resminya mengatakan bahwa versi ini telah diperbaiki, saya masih mendapatkan kesalahan saat menggunakan CNPM di Windows untuk menginstal paket yang memerlukannya kompilasi simpul-gyp. Saya juga tidak menyarankan penggunaan CNPM v3.4.1 karena versi NPM bawaannya sudah terlalu lama. Disarankan untuk menginstal npm install --registry=https://registry.npm.taobao.org -d langsung menggunakan mirror warehouse. (-d ditambahkan untuk menampilkan informasi detail saat proses instalasi. Saya pribadi sering menggunakan cara ini untuk mengetahui apakah proses instalasi terhenti karena masalah jaringan atau lainnya).
Catatan 2: Beberapa paket pihak ketiga yang diperlukan oleh WHB bergantung pada node-gyp. Sebelum menginstal paket ini, harap konfirmasikan bahwa node-gyp telah diinstal dengan benar di mesin Anda. Silakan merujuk ke dokumentasi resmi node-gyp untuk instalasi. Pengguna Windows mungkin mengalami masalah karena menginstal node-gyp di Windows sangat merepotkan.
Catatan 3: Pengguna Windows, harap jangan menempatkan WHB di direktori yang jalurnya terlalu dalam. Karena Windows hanya mendukung jalur dengan panjang kurang dari 255 karakter, jika Anda menempatkan proyek ini di direktori dengan jalur yang dalam, kemungkinan besar node-gyp akan gagal dikompilasi.
Catatan 4: Pengguna Windows, jika Anda telah menginstal node-gyp dengan benar, tetapi masih mendapatkan kesalahan saat menjalankan npm install -d , dan pesan kesalahannya adalah "EPERM, operasi tidak diizinkan", silakan coba npm install -d --force .
Mulai pengembangan
Jalankan di konsol:
gulp dev
Setelah beberapa saat, jendela browser akan terbuka secara otomatis dan menunjuk ke alamat localhost:3000 . Saat Anda memodifikasi file apa pun di bawah app/src, halaman browser akan otomatis disegarkan.
Jalankan tugas gulp prod
Jalankan di konsol:
gulp prod
Tugas ini akan menghasilkan dua file baru bundle.min.css dan bundle.min.js di folder app/dist, dan menghapus bundle.css dan bundle.js asli.
Saat mempublikasikan, Anda hanya perlu mengunggah file di folder app/dist ke server, tidak diperlukan file lain. File CSS, JS, dan gambar di app/dist dikompresi dan dioptimalkan.
memuat animasi
Halaman H5 biasanya berisi banyak gambar dan musik latar, sehingga diperlukan animasi pemuatan yang bagus.
Anda dapat menulis sendiri beberapa animasi CSS3, menyisipkan kode HTML terkait animasi ke dalam <div class="loading-overlay"></div> di app/src/index.html, dan mengintegrasikan kode Animasi CSS3 yang relevan ke dalam app/ src/scss.
Jika Anda ingin menghindari masalah, situs web loading.io dapat membantu Anda menghasilkan animasi pemuatan yang sudah jadi (jika Anda tidak dapat membukanya, silakan tembus dinding). Disarankan untuk membuat file gambar animasi dalam format SVG, ubah file menjadi loading.svg dan ganti file dengan nama yang sama di bawah app/src/images/.
Bagikan juga beberapa pustaka animasi pemuatan CSS3 yang luar biasa:
Efek peralihan halaman
Peralihan halaman saat ini hanya mendukung empat jenis yang disertakan dengan Swiper: slide, fade, flip, dan coverflow (kubus tidak mendukungnya karena tidak memenuhi skenario ini). Lihat bagian efek di dokumentasi Swiper untuk detailnya.
WHB belum dapat menentukan metode peralihan yang berbeda untuk halaman yang berbeda. Saya akan mempertimbangkan untuk menambahkan fitur ini dan metode peralihan yang lebih keren di versi berikutnya.
Animasi elemen (gambar, teks) di dalam halaman
Menambahkan animasi pada gambar dan teks di WHB sangatlah mudah.
Misalnya ada paragraf teks di halaman pertama yang perlu ditampilkan dalam bentuk animasi. Kodenya adalah sebagai berikut:
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
Cukup tambahkan nama kelas animated ke teks ini dan tentukan tiga atribut data-ani-name (nama animasi), data-ani-duration (waktu eksekusi animasi), dan data-ani-delay (waktu tunda animasi).
Animasi WHB disediakan oleh Animate.css. Nama animasi yang didukung dapat dilihat di situs resmi Animate.css.
Ikon huruf
Hanya ada dua ikon pada file ikon font yang disertakan dengan WHB, yaitu simbol musik di pojok kanan atas dan simbol prompt upstroke di bagian bawah layar. Jika Anda membutuhkan lebih banyak ikon, disarankan untuk menggunakan Icomoon.io untuk penyesuaian, pilih ikon yang Anda perlukan (Anda juga dapat mendesain dan mengunggahnya sendiri), dan mengemasnya ke dalam file font.
Alasan mengapa tidak disarankan menggunakan paket font umum seperti Font-Awesome adalah karena terdapat banyak ikon di Font-Awesome, sehingga file font akan relatif besar, dan sebagian besar ikon tidak digunakan. File font yang lebih besar dapat memperlambat pemuatan halaman web di perangkat pengguna.
Pengoptimalan gambar
WHB hadir dengan fungsi kompresi gambar lossy di bawah app/src/images, tetapi saya tetap menyarankan Anda melakukan pengoptimalan manual yang diperlukan pada gambar sebelum memasukkannya ke folder app/src/images, seperti Sesuaikan dengan ukuran yang sesuai, integrasikan beberapa gambar kecil menjadi sprite, dll.
Bagikan beberapa situs web pengoptimalan dan pemrosesan gambar yang berguna:
musik latar
Disarankan format file musik latar adalah mp3 dan ukurannya tidak melebihi 1MB. Anda dapat menggunakan perangkat lunak pengedit audio profesional seperti Adobe Audition untuk mencegat dan mengompresi musik latar.
Jika tidak diperlukan, mohon jangan menyetel musik latar yang mengganggu pengguna.
Debug terminal seluler
Pertama, jalankan tugas gulp dev dan temukan paragraf berikut di output konsol:
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
Kemudian, pastikan perangkat seluler Anda (ponsel, tablet, dll.) dan komputer berada di LAN yang sama (cara paling sederhana adalah menghubungkan komputer, ponsel, dan tablet ke WIFI yang sama; atau komputer terhubung ke router dengan kabel jaringan, dan ponsel serta tablet terhubung ke WIFI yang sama.
Terakhir, buka browser di perangkat seluler Anda dan akses URL yang sesuai dengan Eksternal pada baris ketiga di atas (perhatikan bahwa URL Anda mungkin berbeda dari yang saya tulis di atas, silakan merujuk ke URL Eksternal yang ditampilkan di konsol Anda sendiri).
Sekarang selama Anda memodifikasi file di bawah app/src, semua perangkat seluler dan komputer yang mengakses URL ini akan secara otomatis menyegarkan halaman browser. Operasi yang Anda lakukan di satu perangkat juga disinkronkan ke perangkat lain secara real-time (seperti menggeser ke atas pada halaman dengan jari Anda).
Desain responsif
Disarankan untuk menggunakan rem daripada px untuk mengatur ukuran, margin, dan ukuran font elemen.
Di WHB, nilai px yang sesuai dengan 1rem akan berubah seiring ukuran layar perangkat.
Pada perangkat dengan lebar layar kurang dari 400 piksel, 1rem = 16 piksel;
Pada perangkat dengan lebar layar lebih besar dari 400 piksel dan kurang dari 600 piksel, 1rem = 22 piksel;
Pada perangkat dengan lebar layar lebih besar dari 600 piksel, 1rem = 32 piksel;
Lihat kode tentang Media Query di app/src/scss/base/_base.scss.
deskripsi config/vendors.js
File vendors.js digunakan untuk mendaftarkan informasi CSS, JS, dan Font pihak ketiga. Semua file pihak ketiga yang terdaftar di vendors.js akan ditambahkan ke proyek dalam beberapa bentuk. Misalnya: Jika vendors.js sekarang terlihat seperti ini:
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
Semua file css di stylesheet vendors.js akan ditambahkan ke bundle.css yang akhirnya dihasilkan oleh proyek;
Semua file js dalam javascript vendors.js akan ditambahkan ke bundle.js yang akhirnya dihasilkan oleh proyek;
Semua file dalam font vendors.js akan disalin ke folder app/dist/fonts.
Ingatlah bahwa file yang terdaftar di vendors.js akan ditambahkan ke bundle.css dan bundle.js terlebih dahulu, jadi Anda tidak perlu khawatir gaya di SCSS yang Anda tulis akan ditimpa atau menemukan bahwa objek dari perpustakaan pihak ketiga adalah tidak ditemukan dalam situasi yang ditentukan main.js. File yang didaftarkan di vendors.js akan ditambahkan ke bundle.css dan bundle.js sesuai urutan registrasinya, jadi harus dipastikan urutan registrasinya sudah benar. Misalnya jquery.js harus didaftarkan sebelum wiper.jquery.js , karena wiper.jquery .js bergantung pada jquery.js.
Catatan 1: Jalur file relatif terhadap gulpfile.js, bukan vendors.js.
Catatan 2: Jika Anda tidak ingin mengimpor file JS pihak ketiga dengan cara ini, dan ingin menggunakan metode penulisan require CommonJS untuk mengimpornya, hal itu juga memungkinkan. Misalnya, perkenalkan jQuery di app/src/javascripts/main.js dengan cara ini:
var $ = require('jquery');
Teguk tugas
Selama proses pengembangan, jika Anda menemukan bahwa Anda telah memodifikasi atau mengganti gambar, audio, font, dan file lain di bawah file app/src, tetapi halaman di browser tidak berubah, silakan coba jalankan gulp dev lagi di konsol tugas gulp dev .
MIT
