Geliştirme | Doku ile küçük bir program nasıl oluşturulur
Metin | Zhu Shuncheng
Yingtu video uygulaması piyasaya sürüldüğünden beri çeşitli versiyonlarda güncellendi.Orijinal geliştirmenin asıl amacı hakkında düşünmek gerçekten çok basit. Kullanıcıların izlemek istedikleri içeriği daha az maliyetle almalarını sağlamaktır . Bununla birlikte, uygulamamız da çok güzel.
Bu prensibe dayanarak, Yalnızca küçük programlar geliştirmeyi seçmedik, aynı zamanda içeriği tasarlarken olabildiğince sezgisel olarak kullanıcılara göstererek kullanıcıların düşünme ve kullanım maliyetlerini düşürdük. Yani ilk versiyonda sadece bir konu listesi vardı. Tıklamak, konu altındaki videoların listesidir.
Kullanıcıların düşündüğü tek şey konuyla ilgilenip ilgilenmedikleri İlgileniyorsanız videoyu izlemek için tıklayın ve ilgilenmiyorsanız diğer konuları görmek için aşağıya tıklayın.
Sonraki sürümler bu temelde sürekli olarak optimize edilir. Örneğin, arama portalları ekledik ve videoları oynatırken diğer içerikleri zayıflatmak da dahil olmak üzere videoların görüntüleme deneyimini sürekli olarak optimize ettik. Böyle sürükleyici bir izleme deneyimi, nispeten iyi bir tasarım olmalıdır.
En son sürümde, seçim yapmakta güçlük çeken kullanıcılar için daha kolay olan günlük bir seçim işlevi ekledik, çünkü bazen birçok konuyla karşılaştığım için hangisine bakmam gerektiğini gerçekten bilmiyorum.
Günlük seçim, editörümüz tarafından dikkatlice seçilen bir videodur, bu nedenle genellikle çok kötü değildir.
Yingtu video uygulamasının geliştiricisi olarak, Küçük program geliştirmenin kolaylık ve geliştirme maliyetinin gerçekten düşük olduğunu hissediyorum .
Uygulamanın düzeni ve işlevleri HTML ile karşılaştırıldığında sınırlı olsa da, temel bileşenleri temelde iyi bir uygulama yapmak için yeterlidir ve deneyim WeChat'teki web uygulamasından daha iyi olacaktır.
Yine de, Geliştirme sürecinde hala bazı sorunlar olacaktır.
Özellikle başlangıçta, küçük programın geliştirme dokümantasyonuna özellikle aşina değilseniz, çukura adım atmanız gerekir.
Ancak daha sonra, rpx birimleri olduğunu ve resmin yakınlaştırma oranına sahip olduğunu keşfettik ki bu gerçekten çok pratik.
"Knowing Program" genel hesabını izleyin, WeChat arka ucu "rpx" yanıtını verdi, bir makale size rpx'nin doğru yorumlanmasını anlatıyor.
ve ayrıca, Video sayfası maskesinin soluk animasyonu .
Belgeleri inceledik ve wx.createAnimation'ı bulduk, ancak ilk düşündüğüm şey onu CSS 3 ile uygulamaktı. Son olarak, bir girişim yoluyla, bu planın uygulanabilir olduğu bulundu.
Benim fikrim geçiş ve sınıf yoluyla animasyon efektleri elde etmektir. Bu aynı zamanda jQuery çerçevesini kullanırken sık kullanılan bir çözümdür: div sınıfını değiştirerek CSS 3 animasyon efektleri elde etmek.
Başka bir örnek için, özel bir tost istemi uyguluyoruz:
/ * Küçük program css, harika olan aşağıdaki yazma stillerini destekler * / {{tost.message}} / * tost * /. Remind {background: # F8CA03; color: # 000; text-align: center; font-size : 24rpx; satır yüksekliği: 80rpx; konum: sabit; genişlik:% 100; yükseklik: 80rpx; z-endeksi: 100; geçiş: .5s kolay giriş;}. Hatırlat {üst: 0;}. remind-out {top: -80rpx;} Sayfa ({data: {toast: {isShow: false, message: 'bilgi istemi'}}, // showToast (mesaj) {this.setData ({toast : {isShow: true, message: message}}); var that = this; setTimeout (function {that.setData ({toast: {isShow: false, message: message}});}, 2000);}})Aslında en mutlu şey, uyguladığım küçük programa bakmak ve kullanıcıların sevgisini ve takdirini kazanmak.
Elbette tasarımcılarımızın tasarladığı arayüz havalı ve dokulu olduğu için ikinci saat tarafından da referans olarak kullanıldı.Bu, tasarımcılarımızın büyük bir doğrulaması. (İşte BGM, tasarımcı karnaval şarkısı geliyor)
Tavşan Videosu Filminin Mini Programının dokusunu deneyimleyerek, orijinal Mini Programın da güzel olabileceğini göreceksiniz.
Bu makale Know Programının yetkisi altında yeniden basıldı, "Know Program" resmi hesabını takip edin ve daha fazla video mini program önerisi almak için WeChat arka planında "Video" yu yanıtlayın.
