g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Sıfır temel öğrenme geliştirme, küçük bir program "Sahte Zhihu" yaptı | Pratik Eğitim

Kaç kişi sıfır temele sahip ve küçük program geliştirmeyi öğrenmek istiyor?

Bugün, Zhizhi Programı (WeChat ID zxcx0101) sizinle ilham verici bir vakayı paylaşacak: Atmosfer bilimi ve kendi kendine ön uç geliştirme eğitimi alan bir kız, Zhihu'yu ziyaret etmeyi sevdiği için "Sahte Zhihu" adında küçük bir program yaptı.

Umarım geliştirme deneyimi, herkesin küçük program geliştirmenin ilk adımını kolay ve mutlu bir şekilde atmasına yardımcı olabilir.

Bu makalenin yazarıyla iletişim kurmak istiyorsanız, zxcx0101'i takip edin, menü çubuğuna tıklayın " Grup iletişimi ekleyin "Yapabilirsin.

Yazar | Rebecca Han WEB ön uç / Güvenilmez hava durumu tahmincisi / Kod perisi olmak istiyorum

WeChat Mini Programının başlangıcından bugüne, WeChat Mini Program demomu nihayet tamamladım.

Mürekkeple gerçekten bitti, ben bile ertelememe hayranlık duyuyorum (tembel kanserli kız tedaviyi bıraktı (´A ) )) Kısacası, temelde tamamlandı (tabii ki birçok bileşen var, API'lerin hepsi İşe yaramaz _ ) ve aynı zamanda hiç blog yazmayan kod sözcükler çıkarıyorum ( ) :

Uzun bir süre önce, ağır bir şekilde bağımlı olduğumu biliyordum. Bu nedenle, bu gösterinin taklidinin hedefi Zhihu'dur (ancak yazının yarısında, kararımın oyuk olduğunu fark ettim, bu daha sonra olacak).

Demo'nun arayüz tasarımı ve etkileşim tasarımı, Zhihu'nun Android sürümünden gelmektedir.

araç: WeChat web geliştirici aracı kullanılır.Bu araç, davetli olmayan dahili beta kullanıcılarına tamamen açıktır ve sürekli olarak güncellenir (kod işlemi sırasında iki sürümü güncelledim, bu nedenle IDE sürümü geliştirme sırasında benzersiz değildir). Aslında, WeChat'in geliştirici araçlarına yarım saat dayandıktan sonra Webstorm'da düzenlemeye geçtim ve WeChat aracı önizlemeleri çalıştırmak için bir araç haline geldi. Ancak IDE'deki önizleme efektinin gerçek makineyle aynı olmasının garanti edilmediğini duydum ~
Tasarım ve işlev: Zhihu Android'in çok basit versiyonuna bakın Telif hakkı sorunlarını önlemek için Demo'daki sahte veriler kendi cevabımı kullanır.

Dosya yapımı

1. Temel belgeler

app.json:

{"sayfalar": ," pencere ": {" backgroundTextStyle ":" light "," navigationBarBackgroundColor ":" # 0068C4 "," navigationBarTitleText ":" Bilgi "," navigationBarTextStyle ":" beyaz "," enablePullDownRefresh ": true}," tabBar ": {" color ":" # 626567 "," selectedColor ":" # 2A8CE5 "," backgroundColor ":" #FBFBFB "," borderStyle ":" beyaz "," liste ":}," networkTimeout ": {" istek ": 10000," downloadFile ": 10000}," hata ayıklama ": true}

App.json dosyası, tüm uygulamanın genel yapılandırmasıdır, Kullanılan ana alanlar sayfaları , pencere , tabBar , networkTimeout.

sayfaları Alan: Uygulamanın tüm sayfaları bu alana kaydedilmelidir. Alan dizisindeki ilk sayfa varsayılan olarak uygulama ana sayfasındadır (ayar sekmesi hariç). Sayfalar alanına kaydedilmemiş sayfalar etkili bir şekilde derlenemiyor gibi görünüyor (daha önce Düzenleyicinin sürümü bu kısıtlamaya sahip değildir, ancak yapılandırma dosyasının geçerliliğini etkileyecektir, vb. Düzenleyici güncellendikten sonra, kayıtsız bir hata bildirecektir).
pencere Alan: Çoğunlukla uygulamanın üst kısmındaki gezinme çubuğunun bazı ayarları hakkında.
tabBar Alan: Ana sayfanın altındaki sekme çubuğu stiline ihtiyacınız varsa, yol, sekme metni, sekme simgesi ve seçili durum simgesi dahil olmak üzere sırayla soldan sağa karşılık gelen sekme çubuğu alanındaki her bir sekmeye karşılık gelen sayfayı ayarlayın.
networkTimeout: Ağ zaman aşımı süresini ayarlayın.
hata ayıklama: hata ayıklama modunu etkinleştirin.

App.wxss dosyası genel stildir, yani Bu dosyadaki stiller tüm sayfalarda kullanılabilir . Başka bir sayfa dosyasının WXSS'si stil dosyasıyla aynı öznitelikleri tanımlıyorsa, bu dosyadaki stilin üzerine yazılır ve kurallar CSS öncelik kurallarıyla kabaca aynıdır. app.js, oturum açma arayüzü, geri arama, periyodik işlev, yerel depolama vb. gibi mantık kodlarını çağırmak için kullanılır.

2. Sayfa dosyası

Sayfa dosyası dört bölümden oluşmaktadır.

Örneğin, dizin adında bir ana sayfamız varsa, sayfalar klasöründe aynı dosya adına sahip üç gerekli dosya oluşturmamız gerekir:

index.wxml
index.wxss
index.js

Ek olarak, index.json dosyası isteğe bağlıdır ve app.json ile aynı işleve sahiptir.Bu sayfanın yapılandırma dosyasıdır, ancak tanım işlevi sınırlıdır.

3. UI

Her zamanki geliştirmeyle aynı şekilde, kod kullanıcı arayüzü elbette başlangıçta.

WeChat'in bazı yeni etiketleri ve stil kuralları dışında, normal kod kullanıcı arayüzünden çok da farklı değildir.

Flex düzeninin WeChat uygulamasında kullanımının kolay olduğu vurgulanmalıdır. Hin ~~~~

Ancak, bir kız ve aynı zamanda bir programcı olarak, beni kışkırtmazsam o ben değilim, bu yüzden İşte karşılaştığım çukurlardan bazıları , Bazıları yanlış olabilir (affet beni \ (// //) \), bazıları IDE güncellemesinde düzeltilmiş olabilir:

WeChat IDE'de desteklenmeyen yazı tipi ağırlığı, harf aralığı (ve kelime aralığını ayarlama stili) gibi bazı CSS stilleri vardır; iç içe yerleştirme desteklenmez. İki seviyeli iç içe bir yapıda, iç katmandaki içerik sürekli olarak görüntülenecektir İki kez (IDE'nin sonraki güncellemelerinde düzeltildi); eğer

görünüm/ > Aynı seviyede, fiili kullanımda kapsayacaktır. İçeriğin üst üste binmesini önlemek için paralel kullanmanız gerekir. Yani bazı yerlerin söylediği gibi değil, tamamen yapabilirsiniz Gibi

Git kullan onu!

Bir öğe daha önce dikey olarak bitişik bir kenar boşluğuna sahip olduğunda, WeChat uygulamasında çift olarak görüntülenecektir, yani, iki öğenin kenar boşlukları yayılır ve kenar boşluğu bölme kurallarına uyulmaz;

Etiketin gizli özelliği geçersiz (v0.10.101400'de düzeltildi);

Bazı durumlarda, eşit öğe etiketinin önceliğiyle ilgili sorunlar olabilir. Örneğin, düz etiketler A ve B, bazı ayarlamalarla A öğesinin konumuyla örtüştüğünde, WeChat IDE, A'nın içeriğinin ve arka plan renginin B öğesinin üst üste binen kısmını kaplayacağı etkisini ayrıştırır (normal tarayıcı Çözüm, B'nin A'yı kapsaması şeklinde olmalıdır;

Verileri işlemek için şablon + liste oluşturmayı kullanırsanız, şablonda liste oluşturma için kullanılan {{öğe}} geçersizdir ve doğru şekilde tanımlanamaz. Bu nedenle, listeyi işlerken, yeniden kullanılan kısmı liste görselleştirme işleminin kod bloğuna yazın (daha sonra bahsedilecek olan veri oluşturma kısmına ait).

Daha sonra, yukarıdaki listede yer alan sorunlardan bazıları WeChat IDE'nin yinelemesinde düzeltildi, bu nedenle bu liste güncel olmayabilir. Gerçek duruma göre kendiniz de deneyebilirsiniz.

Ardından, demoda kullanılan bazı bölümleri açıklayacağım.

Gerçek geliştirmeye başlayın

1. Veri oluşturmayı listeleyin

"Ana Sayfa" ve "Keşif Sayfası" gibi standart tablo veri sunum yöntemlerine benzer şekilde, WeChat iyi bir çözüm sunar: liste oluşturma.

{{item.good_num}} Kabul Ediyorum {{item.comment_num}} Yorum Sorunu takip edin

For döngüsünün bir veri kümesini oluşturmak için tekrarlanan bir yapı kullandığı sezgisel olarak görülebilir:

For = "{{}}" içindeki içerik döngülemek istediğiniz bir veri kümesidir ve en dıştaki katman bir dizi yapısıdır
for-item, dizideki mevcut elemanın değişken adını belirtir
for-index, dizideki geçerli elemanın alt simge değişken adını belirtir

Oluşturma için de kullanılır ve üstte keşif sayfası ve bildirim sayfası gibi özel sekme çubukları da vardır.

2. Üst Tabbar'ın uygulanması

WeChat yalnızca alt sekme çubuğunu sağlar, bu nedenle en üstteki sekmeyi yazmanız gerekir ~

Üst sekme çubuğunun gerçekleştirilmesi, liste oluşturma ve JS işbirliği için yatmaktadır.

Örnek WXML kodu:

JS kodu:

//discovery.jsPage ({data: {navTab :, currentNavtab: "0"}, onLoad: function {console.log ('onLoad')}, switchTab: function (e) {this.setData ({currentNavtab: e. currentTarget.dataset.idx});}});

WeChat, nesnelere erişmek için DOM kullanımını desteklemediğinden, yani dom ve pencere nesnelerini desteklemediğinden, sekme çubuğunun uygulanması, WeChat tarafından sağlanan görünüm katmanının görüntüleme mantığına ve görünüm ile veriler arasındaki bağlama mekanizmasına bağlıdır.

Öğenin sınıfının değişikliğini kontrol etmek için bir data özniteliğinin değerini değiştirerek click olayını bağlama (böylece stili değiştirme vb.).

3. Atlı Karınca

Aşağıda uygulanan WXML kodu verilmiştir:

JS kodu:

imgUrls: , indikatörDots: false, otomatik oynatma: doğru, aralık: 5000, süre: 1000, besleme :, feed_length: 0

Atlıkarınca diyagramının uygulanması, WeChat tarafından sağlanan süpürücü bileşenini kullanır. Bu bileşen, yakından çeşitli öznitelik seçenekleri sağlar. Yaygın olarak kullanılanlar arasında otomatik oynatma, aralık süresi süresi vb.

Silici öğe, karuseldeki tüm resimleri içerir Resim verilerinin değiştirilmesini kolaylaştırmak için, işleme için verileri bağlama yöntemi de kullanılır.

4. Yenilemek için aşağı çekin, yüklemek için yukarı çekin ve veri isteyin

Yenileme ve yüklemeye devam etme eylemi, kaydırma görünümü etiketine ve ilişkili üst ve alt olaylara bağlıdır.

Etiketin öznitelikleri, yukarı ve aşağı kaydırmayla tetiklenen olayları bağlamak için bağlama yukarı kaydırma ve bağlama kaydırma sağlar. Aynı zamanda, üst eşik ve alt eşik, tetikleme süresi ile sınır arasındaki mesafeyi ayarlayabilir.

Yukarıdakilere ek olarak, Uygulamanın API'si ayrıca yatay kaydırma, tetikleme olaylarını kaydırma, kaydırma çubuğu konumlarını ayarlama vb. İçin arayüzler sağlar. .

{{item.good_num}} Kabul Ediyorum {{item.comment_num}} Yorum Sorunu takip edin

Yukarı veya aşağı kaydırırken, tetiklenen veri yükleme olayı, verileri almak için WeChat tarafından sağlanan web istek API'sini çağırmalıdır.

Ama daha çukurlu olan şey, Taklit Zhihu demosunu yazmayı seçtiğimde, Zhihu'nun açık bir API sağlamadığını ve WeChat API'nin JSON dosyalarına doğrudan yerel istekleri desteklemediğini fark etmedim.

Çaresizlik içinde, JS dosyasındaki bir veri parçasını taklit etmeyi seçin ve veri talebini taklit etmek için module.exports ile birlikte atın:

üst: function {wx.showNavigationBarLoading this.refresh; console.log ("Upper"); setTimeout (function {wx.hideNavigationBarLoading; wx.stopPullDownRefresh;}, 2000);}, alt: function (e) {wx.showNavigationBarLoading; var that = this; setTimeout (function {wx.hideNavigationBarLoading; that.nextLoad;}, 1000); console.log ("alt")}, // kaydırma: function (e) {// console.log ("kaydırma" ) //), // Ağ isteği verileri, yenileme yenileme 0: function {var index_api = ''; util.getData (index_api) .then (function (data) {//this.setData ({// //}) ; console.log (data);});}, // Yenileme efekti yenilemek için yerel sahte verileri kullanın: function {var feed = util.getDiscovery; console.log ("loaddata"); var feed_data = feed.data; bu .setData ({feed: feed_data, feed_length: feed_data.length});}, // nextLoad yüklemeye devam etmenin etkisini elde etmek için yerel sahte verileri kullanın: function {var next = util.discoveryNext; console.log ("continueload"); var next_data = sonraki.data; this.setData ({feed: this.data.feed.concat (sonraki_data), feed_length: this.data.feed_length + next_data.length});}

Sahte veri olduğundan, bu demo parametreler, sorgu ve diğer işlevlerle gerçek bir atlama yapmaz.

Verileri yüklerken, WeChat tarafından sağlanan wx.showNavigationBarLoading yükleme animasyonunu kullanın.

5. Diğer

Sayfaya atlamak için tıklamayı gerçekleştirmek amacıyla, wx.navigateTo, sayfa atlama ve tıklama olay bağlama için kullanılır;
Bazı ortak bileşenlerin modülerleştirilmesi;
Giriş, görüntü bileşenleri vb. Kullanımı

6. Takip

Aslında, hala kullanılmamış birçok bileşen ve API var.Bu demo, kanserli kızın durumunun ciddiyetine bağlı olarak gelecekte güncellenebilir.

Biraz hissedin

Aslında, küçük bir ön uç olarak, iş nedeniyle MVVM aslında çok nadiren kullanılır.

Ancak, bu WeChat uygulaması demosunu yazdıktan sonra, bu konudaki düşüncemi daha da düzelttim. Elbette, yazdıktan sonra geriye dönüp baktığımda, hala birçok eksiklik var ve açıkça değiştirilebilecek birçok yer var.

Sonuçta, ilk kez taze ve sıcak şeylerle küçük bir demo yazmaya çalışıyorum ve aynı zamanda ilk kez bir öğretici yazmaya çalışıyorum ... Yoksa bu bir kayıt mı? her neyse ~~

Her neyse ~ Umarım kod yazmanın yanı sıra, kod metni yolunda daha fazla yürüyebilirim. Sonuçta, küçük bir kod perisi olmak isteyen kişi benim \

GitHub proje adresi: GitHub - RebeccaHanjw / weapp-wechat-zhihu

Makale kaynağı: https://zhuanlan.zhihu.com/p/23394858

Bu makale, Bilinen Programların yetkisi altında yeniden basıldı, zxcx0101 WeChat hesabına dikkat edin ve e-ticaret mini program geliştirme öğretici makalelerini almak 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.

Longdd bu olay yüzünden memleketine mi döndü? Netizen: Fathead Fish neden takip etmedi!

Göçebe Sabah Yayını: Steam Ubisoft Haftalık Etkinliği Açılıyor EA bu yıl yeni bir "Need for Speed" başlatacak