Geliştirme | 4 gün içinde aynı "Starbucks" mini programını kullandı
Metin | ancak kurulmuş
Hala evde klimayı üflerken, kodu yazarken ve karpuz yerken, belki sizinki hala sıcak yaz aylarında bolca terliyor ...
Bu küçük programı açın, ona bir fincan buzlu Starbucks sipariş edin ve sonraki hikaye hakkında konuşmak zorunda kalmayacağım .
Hala başlangıç çizgisinde olan bir tam yığın öğrenci olarak, WeChat uygulaması geliştirmeyi ilk kez denedim ve başlangıçta oldukça taklit edilen "Starbucks Niyetleri" uygulamasını tamamlamak yaklaşık dört gün sürdü.
Bu küçük program beni gerçekten Yan'a çekiyor (beni Yan'ı kontrol eden biri olarak) Kimse kendini güzel hissediyor mu?
Ardından, programı biliyorsanız (WeChat ID zxcx0101), bu demonun nasıl uygulandığına bir göz atalım.
"Knowing Program" WeChat resmi hesabını takip edin, "Geliştirme" ye yanıt verin ve Mini Programın geliştirilmesiyle ilgili seçilmiş makaleleri edinin.
Proje araçları ve dokümantasyon
Küçük bir program geliştirmek için iki şey gereklidir.
İlki "WeChat Web Geliştirici Araçları" dır , Çok kullanışlı küçük bir program düzenleme yazılımı; İkincisi, küçük programlar için gerekli olan süper yenilmez geliştirme belgeleridir Mini program geliştirme hakkında bilmek istediğiniz her şey burada.
kayıt sayfası
Bu küçük programda üç sayfa var , Ana sayfa, "@ size söylemek istediğim her şey" hediye kartı düzenleme sayfası ve hediye kartı ayrıntıları sayfası.
Bu üç sayfayı app.json'da kaydedin:
{"sayfalar": ,}Mini program işlevi gerçekleştirme
Şu anda, bu küçük program kodu, kaydırma görünümü, görünüm değiştirme olayları, alışveriş sepeti, ödeme (simülasyon) uygulaması ve benzeri gibi temel olayları uygulamıştır.
Ancak, harita ve mağaza gösterimi ile ilgili işlevler henüz tamamlanmamıştır.
1. Değiştirmeyi görüntüleyinGörünüm değiştirme işlevinde, büyük görüntü değiştirme ve küçük görüntü vurgulama elde edilir . Etki oldukça iyi mi?
Spesifik görseller aşağıdaki gibidir.
Görünümü değiştirmek için sadece tıklama olayını karşılık gelen resme bağlamanız gerekir. Spesifik kod uygulaması aşağıdaki gibidir:
2. Hediye kartı (Hediye Kartı)Hediye kartı satın alma sayfasında, Hediye kartı ayrıntıları sayfasına gitmek için listedeki bir öğenin sol tarafına tıklayın .
Alışveriş ödeme fonksiyonu
Miktarı seçerken, Değiştirmek için liste öğesinin sağındaki "+" ve "-" işaretlerini tıklayın.
Tabii ki, aşağıdaki ödeme satın aldığınız miktarı ve toplam fiyatı da gösterecektir. Modern sadelik ve güzelliğe uygun olduğunu düşünüyor musunuz?
Bu, bu küçük programın en parlak noktası ve en çok düşünülmesi gereken nokta. Daha yakından bakın, operasyondan sonra birçok küçük değişiklik olduğunu ve bu küçük değişikliğin tüm uygulamayı daha güzel hale getirdiğini görebilirsiniz.
Görünüm katmanı kod uygulamasının bu bölümü:
Toplam fiyatı hesaplamanın mantığı da çok basit:
getTotalPrice {let carts = this.data.carts; let toplam = 0; for (let i = 0; iMiktar değişikliğini "+" ve "-" tıklayarak gerçekleştirmek için şunu yaptım:
// addCount (e) sayısını artırın {const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts.num; num = num + 1; carts.num = num; this. setData ({carts: carts}); this.getTotalPrice; this.getTotalNum;}, // minusCount (e) sayısını azaltın {const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts.num; if (num"Knowing Program" WeChat resmi hesabını takip edin, "kaynak kodunu" yanıtlayın, demo kaynak kodunu ve bu makalenin orijinal adresini alın.
sonuç olarak
Küçük program geliştirmeye başlamak için ilk denememde özetlenebilecek iki deneyimim var:
- Küçük bir program yapmak için en önemli şey belgeye bakmaktır, belgeye bakmalı, önemli şeyleri üç kez anlatmalı, belgeye bakmalısın! Belgelere bakın! Belgelere bakın!
- JavaScript temeli olmadığı için, pek çok çukurun üzerine basıldı ve kod yeterince öz değil. Gelecekte daha fazla gelişme olacak.
Daha fazla mini program sorunuz ve tartışmak istediğiniz deneyimleriniz varsa, lütfen benimle iletişime geçmekten çekinmeyin!
"Knowing Program" resmi hesabını takip edin, WeChat arka planındaki "Geliştirme" ye yanıt verin ve mini program geliştirme hakkında seçilmiş makaleler edinin.
