E-ticaret Mini Programı Pratik Eğitimi Cilt 2: Liste Yükleme
Yazar | Promise
Makalenin son sayısında Demo olarak Aifaner'in playthingzhi (WeChat hesabı coolbuy) e-ticaret uygulamasını kullandık, ana sayfanın banner kısmının yanı sıra WeChat uygulamasının yerleşik bileşenlerini, veri bağlama ve gönderme isteği API'sini tanıttık. Kullanım.
Bu sayıda, Bilinen Program hala oyun e-ticaret uygulamasına dayanmaktadır ve size liste yüklemesinin uygulanmasına ilişkin bir eğitim sunar.
Düzen için doğmuş Flex
Geleneksel mizanpaj yöntemleri genellikle mizanpaj için float, position ve display kullanan div box modeline dayanır.
Her ön uç geliştiricisi bu düzen yöntemlerine çok aşinadır. Bazı özel düzenler için, bu öznitelikleri kullanmak uygun değildir ve bundan çeşitli hack şemaları türetilir. CSS3, özellikle düzen için doğmuş bir çözüm, yani esnek düzen önerene kadar.
Ancak, tarayıcı uyumluluk sorunları nedeniyle, çoğu geliştirici esnek düzenini gerçek projelere doğrudan uygulamaya cesaret edemez. Geleneksel projelerde, çok sayıda esnek yerleşim uygulaması hala bir işleme ihtiyaç duyar.
Yalnızca WeChat uygulaması için, Tarayıcı uyumluluğu konusunda endişelenmeyin, yalnızca WeChat istemcisine adapte olması gerekir . Aynı zamanda, uygulamanın yerleşimi çok karmaşık olmayacağından, kapsamlı esnek kullanımının neden olduğu performans sorunları hakkında çok fazla endişelenmeye gerek yoktur.
Küçük programlarda flex layout'u güvenle kullanabiliriz.
Rpx nasıl daha rahat kullanılır
Rpx'nin tam adı duyarlı pikseldir; bu, mevcut cihazın ekran genişliğine göre uyarlanabilen, uygulamanın kendisi tarafından tanımlanan bir boyut birimi olan.
Uygulama, tüm cihazların ekran genişliğinin 750rpx olduğunu şart koşar Cihaz ekranının gerçek genişliğine göre, 1rpx ile temsil edilen gerçek piksel değeri de farklıdır.
Örneğin, iPhone 6'da gerçek ekran genişliği 375px, ardından 750rpx = 375px, 1rpx = 0.5px ve iPhone 5'te gerçek ekran genişliği 320px, ardından 750rpx = 320px, 1rpx = 0.42px'dir.
Aslında, her bir cihaz ekranında 1rpx'in kaç pikseli temsil ettiğine dikkat etmemize gerek yok. "Tüm cihazlar 750rpx ekran genişliğine sahip" ilkesini kavradığımız sürece, herhangi bir cihaz ekranı boyutu için iyi bir uyarlanabilir düzen elde edebiliriz. .
Programı bilin (WeChat hesabı zxcx0101) Görsel taslağın standardı olarak iPhone 6'nın kullanılması şiddetle tavsiye edilir, yani görsel taslağın toplam genişliğini şu şekilde ayarlayın: 750 piksel . Bu sayede geliştiriciler ilgili boyutları kolayca ölçebilir.
Örneğin, toplam genişliği 750px olan iPhone 6 görsel taslağında, bir resmin genişliği 200px olarak ölçülürse, resmin genişliği 200rpx olarak ayarlanabilir.
Basitçe tek bir cümleyle açıklayın: Aldığınız kadarını ayarlayın.
Flex ve rpx kullanım durumu
Şimdi, bu çözümün rahatlığını deneyimlemek için uygulamadaki düzen için flex ve rpx kullanalım.
Durum 1: Rafların listesiRaf listesinin görüntülerine bir göz atın:
İlk olarak, iki kod parçası gönderin. Aşağıdakiler WXML'nin uygulanmasıdır:
/ *** index.wxml *** /Daha sonra WXSS'nin kodu aşağıdaki gibidir, anahtar kodu hakkında kısa bir yorum yaptık:
/ *** index.wxss *** / .shelf-nav {display: flex; // Set display: flex; onu bir flex layout öğesine dönüştürmek için flex-wrap: wrap; // Alt öğenin toplam genişliği üst öğeyi aştığında Öğenin genişliği görüntülendiğinde, padding: 30rpx;} .shelf-nav-item {width: 25%; // Her satırda 4 raf görüntülendiğinden, genişlik% 25'e ayarlanmıştır; margin-bottom: 20rpx; text-align: center ; // Ortadaki resim ve başlığın ortada görüntülenmesine izin verin} .shelf-nav-item__image {width: 130rpx; // Görsel taslaktaki resmin genişliğini ve yüksekliğini 130px yüksekliğe ölçün: 130rpx; // Bu nedenle hem genişliği hem de yüksekliği ayarlayın Is 130rpx; border-radius: 50%; // Resmi daire kenarlığına ayarlayın: 1px solid # d9d9d9; // Bir dış kenarlık ekleyin}Raf listesinin düzeni birkaç basit adımda tamamlanır, Ve çeşitli boyutlardaki cihaz ekranlarıyla mükemmel uyumludur .
Durum 2: Raf sınıflandırmasının başlığıBaşka bir örnek alalım, ürün listesi raf kategorisinin başlığına bakalım:
Yukarıdaki şekilde gösterildiği gibi, raf başlığı solda, "daha fazlasını gör" ikonu sağda ve dikey olarak ortalanmıştır.
Kod yapısı aşağıdaki gibidir:
/ *** index.wxml *** /Deneyimli öğrenciler, gereksinimleri karşılamak için şunlara ihtiyacınız olduğunu bir bakışta görebilir:
- .Shelf-title sola kaysın
- .Shelf-more'ı yatay olarak sağa hizalayın ve dikey olarak ortalayın
- Son olarak, .shelf-başlığına düzeltme
Şimdi bunun ne kadar esnek olduğunu görelim:
/ *** index.wxss *** / .shelf-header {display: flex; // flex layout'un öğelerini ayarlayın justify-content: space-between; // Her öğeyi eşit olarak düzenleyin, // ilk ve son iki Öğeler sırasıyla başlangıçta ve sonunda bulunur} .shelf-more {align-self: center; // Ortayı ayarlayın}Yalnızca birkaç satır kod, yalnızca birkaç satır kod, düzeni ayarlamak için kolayca flex'i kullanabilirsiniz.
Ardından, önceki sayının içeriğini gözden geçirin, veri için bir istek başlatın ve ardından verileri bağlamak için Data'yı ayarlayın:
/ *** index.js *** / Sayfa {..., onLoad: function {var that = this; wx.request ({url: CONFIG.API_URL.SHELF_QUERY, yöntem: 'GET', veri: {img_size: 'küçük'}, başarı: function (res) {that.setData ({rafNavList: res.data.objects});}});}, ...}Raf listesi tamamlandı.
Şablon kullanımı
Ana sayfadaki kategori listesi ile raf kategorisi listesi sayfası arasındaki karşılaştırmaya tekrar göz atalım:
Bu iki sayfadaki liste stillerinin birebir aynı olduğunu bulmak zor değil.
Daha sonra, her bir emtiayı bir modül olarak ele alıp, bu emtia modülüne şimdilik ürün-kartı diyebiliriz, onu bir şablonla sarmalayabilir, tanıtabilir ve gerektiğinde çağırabiliriz.
Burada önce bir kavramı açıklığa kavuşturmalıyız, şablonun ana işlevi bir wxml kod parçası tanımlamak ve sonra onu farklı yerlerde çağırmaktır.
Şablonun kendi kapsamı vardır ve yalnızca verilerle iletilen verileri kullanabilir.
Şablonu nasıl kullanacağımızı görelim.
Şablon şablonunu tanımlayın
Kod organizasyonunu kolaylaştırmak için şablonlar dizininde yeni bir productCard klasörü oluşturuyoruz ve product-card klasöründe yeni productCard.wxml ve productCard.wxss dosyalarını oluşturuyoruz.
kod aşağıdaki gibi gösterilir:
/ *** productCard.wxml *** /Şablonun adını tanımlamak için ad özniteliğini kullanın ve ardından kod parçacığını şablona kaydedin.
Şablon şablonunu tanıtın
Örnek olarak ana sayfayı ele alalım: productCard şablonu kullanılacak olduğunda, şablonu içe aktarmak için yalnızca içe aktarmayı kullanmamız gerekir.
Görüntülenmesi gereken konumda, dış katman listeyi oluşturmak için wx: for döngüsünü kullanır, şablon bir alt öğedir, gerekli şablonu bildirmek için kullanır ve verileri iletmek için verileri kullanır:
/ *** index.wxml *** /Data = "{{... item}} ifadesine dikkat edin, öğe, dizinin wx: for içindeki geçerli öğesini temsil eden varsayılan değişken adıdır ve öğeden önceki ... operatörü ES6'daki genişletme operatörüne eşdeğerdir ve yok etme için kullanılabilir Görev yerine, genişleme operatörlerini ve yıkıcılığı hiç anlamayan öğrenciler önce temel kavramlarını anlayabilirler.
Yapısızlaştırma yoluyla şablon, {{item.id}} yerine doğrudan {{id}}, {{cover_image}}, {{item.cover_image}} olarak yazılabilir.
Önemi, şablon ve wx: for-item arasındaki ayrıştırmayı gerçekleştirmektir. Örneğin, burada wx: for-item = "product" ayarlanmışsa, yalnızca data = "{{... product}} değiştirmemiz gerekir Yukarı.
Veriler yeniden yapılandırılmazsa, şablonun {{item.id}}, çok rahatsız edici olan {{product.id}} olarak değiştirilmelidir.
Daha sonra, productCard.wxss girişidir, önce stili productCard'a yazın ve buraya hiçbir kod gönderilmeyecektir.
Şablon WXSS dosyası nasıl içe aktarılır
Öncelikle lütfen bir düşünün, WXSS dosyalarını nereye aktarabilirim?
Bunun bir yolu, ürünü productCard şablonunun kullanıldığı sayfaya içe aktarmaktır, burada list.wxss olarak içe aktarılır.
Diğer bir yöntem de doğrudan app.wxss içine aktarmaktır. Önceki yöntemle karşılaştırıldığında, bu yöntemin yalnızca bir kez tanıtılması gerekir ve productCard şablonunu kullanan tüm sayfaların productCard.wxss'i tanıtması gerekmez.
/ *** app.wxss *** / @import "./templates/productCard/productCard.wxss";Ürün listesi verilerini alın, görünümü görüntüleyin
Öncelikle onLoad seçenekleri aracılığıyla raf kimliğini alın:
/ *** list.js *** / onLoad: function (seçenekler) {var id = options.id; this.setData ({rafId: id});}Son olarak, ürün listesi verilerini almak için wx: request çağrısı yapın ve tüm listeyi görünüm katmanında işlemek için setData aracılığıyla productNewList'i ayarlayın.
/ *** list.js *** / onLoad: function (seçenekler) {... wx.request ({url: CONFIG.API_URL.PRODUCT_LIST, yöntem: 'GET', veri: {raf__id: this.data.shelfId }, başarı: function (res) {if (res.status == 200) {that.setData ({productNewList: res.data.objects});}}}); ...}Bu noktada, düzgün bir liste sayfası hazır. Ancak yukarıdaki kodda gösterildiği gibi, uygulama artık tüm ürün listelerini sorgular ve aynı anda sayfaya işler.
Gerçekte, bu yaklaşım açıkça bilim dışıdır. Ayrıca bir "daha fazla yükle" işlevine ihtiyacımız var.
Bu özellik şunları yapmamızı gerektirir: Kullanıcı ilk kez ziyaret ettiğinde sayfa 20 ürünü yükler ve 10 ürün daha yüklemek için listenin altındaki "Daha Fazla Görüntüle" düğmesini tıklayın.
Nasıl başarılır? Lütfen bir sonraki sayı için bizi izlemeye devam edin.
Bu makalenin yazarı vaat ediyor "Prosedürü Tanıyın × Geliştirme ve Değişim" WeChat Group Mini program geliştirme konusunda herkesle deneyim alışverişinde bulunacağız.
"Cheng Xiaoxu" kişisel numarasını (WeChat hesabı callmecxx) ekleyin veya aşağıdaki QR kodunu tarayın ve arkadaş doğrulama bilgileri için grup şifresini girin " Geliştirme "Gruba katılmak için.
Yanıtla " ürün "," Operasyon "veya" tasarım Ayrıca uygulamanın ürünü, çalışması ve tasarımı hakkında bir grup sohbetine katılabilir ve uygulama hakkında her şeyi birlikte tartışabilirsiniz.
Bu makale Bilinen Programların yetkisi altında yeniden basıldı, zxcx0101 WeChat hesabına dikkat edin ve e-ticaret mini programları için pratik bir pratik kılavuz elde etmek için "e-ticaret" e yanıt verin.
Farkındalık programını hızlıca takip edin
Programı bilin (WeChat hesabı zxcx0101), küçük programların ekolojisine odaklanan Aifaner'in resmi hesabıdır. Mini programlar hakkında her şeyi öğrenebileceğiniz en kapsamlı ve en yeni mini program bilgilerini (haberler, görüşler, kılavuzlar, etkinlikler) ve hizmetleri sunuyoruz.
