kingdex

[Program Mini WeChat] Buku Raja Bergambar

Inspirasinya datang dari game seluler populer tahun ini - Honor of Kings. Kadang-kadang sangat tidak nyaman menggunakan ponsel untuk mencari data game secara online, jadi saya mendapat ide untuk mengembangkan "Buku Bergambar Raja dari segala Raja". " applet. Merayapi data dari situs resmi, mengintegrasikan pahlawan, perlengkapan, prasasti, dan informasi lainnya ke dalam applet WeChat, dan menanyakan informasi game kapan saja dan di mana saja.

Pratinjau

Tampilan efek

Pengalaman daring

Pindai kode program mini di bawah ini pada WeChat untuk langsung merasakannya:

tumpukan teknologi

• Desain prototipe: sketsa
• Perayapan data latar belakang: node.js + leancloud (alamat sumber terbuka)
• Front-end: Ekologi program mini (WXML/WXSS/JavaScript...)

menggunakan

Pertama, klik Fork atau tombol hijau Clone or download di sudut kanan atas untuk mengunduh kode sumber, dan gunakan alat pengembang WeChat untuk debugging dan pengembangan. WeChat juga menyediakan dokumen pengembangan program mini, menyediakan serangkaian solusi lengkap mulai dari pendaftaran program mini, alat pengembangan, pengembangan dan debugging hingga rilis, menciptakan ekosistemnya sendiri yang mirip dengan Apple.

Proyek ini memiliki total 9 halaman, yang melibatkan tampilan daftar, detail pahlawan, klasifikasi peralatan, pemfilteran kondisi prasasti, dan fungsi lainnya Karena layanan penyimpanan leancloud digunakan di latar belakang, api ajax dari program mini tidak digunakan, dan leancloud diperkenalkan. Sdk harus bergantung pada file bernama leancloud.config.js , yang ditempatkan di folder utils . Karena layanan pihak ketiga seperti leancloud biasanya dibayar secara fleksibel, dan Buku Ilustrasi Raja telah dirilis secara resmi di WeChat, saya mendorongnya. kode leancloud.config.js diabaikan, harap dipahami.

leancloud.config.js berisi informasi AppID dan AppKey dari aplikasi leancloud:

 module . exports = {
  appId : '你的AppID' ,
  appKey : '你的AppKey'
}

Sebelum menggunakan proyek ini, Anda perlu membuat aplikasi leancloud Anda sendiri dan leancloud.config.js王者荣耀官网爬虫yang saya tulis sebelumnya untuk mendapatkan data.

Meringkaskan

Mari kita bicara secara singkat tentang pengembangan program mini WeChat. Ada banyak buzz di Internet selama beberapa waktu, lalu saya meluangkan waktu untuk melihat dokumen pengembangannya. Sial, bukankah ini Vue.js? ! Lihat saja contohnya di bawah ini.

Program kecil:

 Page ( {
	data : {
		list : [ ]
	} ,
	onload : function ( ) {
		this . setData ( {
			list : [ 1 , 2 , 3 ]
		} )
	}
} ) 

 < view wx:for =" {{ list }} " > {{ item }} </ view >

Vue.js:

 new Vue ( {
	data : {
		list : [ ]
	} ,
	mounted : function ( ) {
		this . list = [ 1 , 2 , 3 ]
	}
} ) 

 < view v-for =" item in list " > {{ item }} </ view >

Meskipun API terlihat serupa, masih terdapat perbedaan yang jelas:

• Applet adalah pengikatan data satu arah dan tidak memberikan instruksi model-v yang mirip dengan vue.
• Ekspresi pengikatan data hanya mendukung tanda kurung kurawal ganda. Jika Anda menulis wx:for="item in list" kesalahan akan dilaporkan.
• Untuk mengoperasikan objek data, Anda perlu memanggil metode setData untuk memicu pembaruan, alih-alih menugaskannya secara langsung seperti vue.
• Peristiwa yang mengikat memerlukan arahan templat untuk menyatakan apakah akan menggelembung atau tidak.

Applet memiliki dua thread, sesuai dengan dua modul independen: View (tampilan) dan AppService (logika). Tampilan digunakan untuk merender templat dan gaya, dan AppService digunakan untuk menangani logika bisnis, permintaan data, panggilan API, dll. Siswa yang tertarik dapat merujuk ke: "Analisis Arsitektur Program Mini WeChat". Selain itu, artikel mini program Tim Minion Food Delivery juga bagus.

Berbicara tentang "Buku Bergambar Raja", ini adalah program kecil pertama saya. Untuk pengguna front-end berpengalaman, Anda dapat memulai dalam satu hari dengan mengikuti dokumentasi resmi. Dibandingkan dengan pengkodean, merupakan tantangan bagi saya untuk menyelesaikan desain prototipe UI seluruh produk, termasuk tata letak, pencocokan warna, dan interaksi. Saya mereferensikan banyak produk dalam lebih dari sepuluh hari dan masih memperoleh pemahaman yang lebih mendalam tentang desain tersebut mempunyai efek akhir yang cukup memuaskan.

Kode sumber terbuka proyek ini hanya untuk referensi pembelajaran dan penggunaan komersial dilarang.

Izin hak cipta

GPL