Kaz fabrikasının güzel mühendisi size uygulama kodunun nasıl "çiçek açtığını" anlatacak | Xiao Organizasyon #20
Prosedürü bilin Not:
"Xiao Organizasyonu", Bilme Programı tarafından başlatılan yeni bir sütundur.
Her hafta, mükemmel mini program geliştiricilerini, mini programlarla ilgili pratik deneyimlerini ürün/geliştirme/operasyon açısından paylaşmaya davet edeceğiz. "Xiao Organizasyonu"na üye olmak istiyorsanız, lütfen bize bigbang@ifanr.com adresine bir e-posta gönderin ve başvurunuzu gönderin.
Bu, "Xiao Organizasyonu"nun 20. sayısıdır.
Ben Chen Jieting, Tencent CDC'den bir ön uç mühendisiyim.
Tencent CDC'ye "Kullanıcı Araştırma ve Deneyim Tasarım Merkezi" denir.
Geçenlerde üçüncü HiFSD front-end paylaşım oturumunun "Mini Program Özel Oturumu"na katılmak üzere ekibi temsil etme onurunu yaşadım. Diğer konuklarla bir "çarpışma" yaşamamak için " ile ilgili bazı içerikler paylaştım. Mini Program Kodu".
Paylaşım oturumunun ardından meslektaşlarımın teşvikiyle bu paylaşımın içeriğini düzenledim ve şimdi Mini Program Kodunun arkasındaki hikayeyi anlamanıza yardımcı olmak umuduyla Bilme Programında (WeChat zxcx0101) sizlerle paylaşıyorum.
Uygulama kodunun görünümü
9 Ocak 2017'de WeChat uygulamayı resmi olarak yayınladı.İlk başta, belirli bir uygulamaya yalnızca WeChat "tarama" yoluyla girmek mümkündü. 14 Nisan'da QR kodunu tanımlamak için uzun bas işlevi resmi olarak açıldı, bu da kullanıcıların appleti kullanma rahatlığının büyük ölçüde iyileştirileceği anlamına geliyor.
O zamandan beri, sadece 4 gün sonra, WeChat "taramayı" ve "kodu tanımlamak ve taramak için uzun basmayı" destekleyen küçük bir program kodunu başlattı.
Applet kodu, iki boyutlu koddan tamamen farklı görünse de, iki boyutlu kodun tüm işlevleri uygulama kodunda da mevcuttur.
Peki, WeChat neden bu kadar özel şekilli bir QR kodunu piyasaya sürdü? Applet kodunun arkasındaki hikaye nedir?
Merak etmeyin, şimdi size küçük program kodunun arkasındaki hikayeyi anlatacağım.
QR Kodu VS Mini Program Kodu
Mini Program kodunu ilk kez taradığımda aslında deneme mantığıyla gelmiştim.
O zamanlar QR koda benzemeyen böyle bir kod gerçekten taranabilir mi diye düşünüyordum. Sonuç gerçekten çok iyi!
Ondan sonra, bu tür özel şekilli QR kodunun WeChat'in ilk olmadığını öğrendim. Facebook, Snap ve diğer şirketler benzer özel şekilli kodlar başlattı:
Örneğin, aşağıdaki iki boyutlu kod, neredeyse görünmez bir iki boyutlu kod oluşturmak için geleneksel iki boyutlu koddaki renk bloklarının yaklaşık %70'ini silmek için görüntü işleme ve tanıma teknolojisini kullanır. İsrailli bir girişimin (Visualead) eseridir.
Taobao Uygulamasındaki kodu tarayarak tanımlanabilir.
2015 yılında şirkete yatırım yapan Alibaba, teknolojiyi web sitelerinde, uygulamalarında ve bulut bilişim ürünlerinde kullanmaya başladı bile.
Dinamik Görsel Kod
Ek olarak, birçok yaratıcı "yüz değiştiren QR kodu" vardır (yazar: Smiley Rabbit):
Piyasadaki pek çok eğlenceli ve ilginç QR kodu karşısında WeChat, hem beklenmedik hem de makul olan özel bir mini program kodunu piyasaya sürdü.
Yukarıdaki nedenler sizi ikna etmediyse, QR kodları ve küçük program kodlarını karşılaştırma açısından küçük program kodlarının avantajlarına bir göz atalım.
Geleneksel QR kodları genellikle aşağıdaki dezavantajlara sahiptir:
- Tarama kodu bekleniyor: Kodu taradıktan sonra ne görüneceğini bilmiyorum.Her QR kodunun arkasında bir dosya, sayfa veya uygulama olabilir.
- Emniyet: QR kodları açık olması nedeniyle kolaylıkla Trojan virüslerinin yuvası haline gelebilir.Birçok kişi kodları taradıktan sonra cep telefonlarına virüs bulaşacağından endişe duymakta ve kodları taramaktan vazgeçmektedir.
- Markalaşma: Mini Programların markalaşma ihtiyaçlarını karşılayamıyor
Küçük program kodunun avantajları:
- Süs: Sıradan iki boyutlu kodla karşılaştırıldığında, uygulama kodu daha güzel görünüyor
- Tarama kodu bekleniyor: Kodu taramadan önce net bir şekilde bilebilirsiniz ve kodu taradıktan sonra küçük bir programla karşılaşacaksınız.
- Emniyet: Şu anda, uygulama kodu yalnızca WeChat aracılığıyla oluşturulabilir ve yalnızca daha güvenli olan WeChat aracılığıyla tanımlanabilir.
- Markalaşma: Her uygulama kodunun sağ alt köşesinde sabit bir WeChat uygulaması logosu vardır.Uygulama kodunu her gördüğünüzde, WeChat uygulamasını bir kez daha düşünebilirsiniz.
- Yüksek hata toleransı: Bir QR kod resminin ortasına gömülü bazı logo resimleri olduğunda, bu aslında orta kısımdaki faydalı kodlama bilgilerini kazıp üzerine bir logo resmi yapıştırmaya eşdeğerdir; uygulama kodu farklıyken, ortadaki logo alanı değildir. veri içerir.Kodlama kısmı, bu nedenle uygulama kodunun hata toleransı daha yüksektir
Açıkçası, uygulama kodu daha iyi bir seçimdir :)
Uygulama kodunun çiçek açma süreci
Bu, küçük program kodunun ilk tasarım taslağının prototipidir.Bir "çiçek" şeklinde olduğu görülebilir.Küçük fark, bu prototipte sadece iki konumlandırma noktasının olmasıdır.
Şu anda gördüğümüz applet kodunun toplam 3 konumlandırma noktası var.
Bu, uygulama kodunun standart tasarım taslağıdır:
Şu anda, uygulama kodu 36 ışın, 54 ışın ve 72 ışın olmak üzere toplam 3 kapasiteyi desteklemektedir.
Her sürüm dört hata tolerans düzeyine karşılık gelir: L, M, Q ve H:
- L düzeyinde hataya dayanıklı küçük program kodu, kelime kodunun yaklaşık %10'u düzeltilebilir
- M düzeyinde hataya dayanıklı küçük program kodu, kodun yaklaşık %15'i düzeltilebilir
- Q düzeyinde hataya dayanıklı küçük program kodu, kodun yaklaşık %25'i düzeltilebilir
- H düzeyinde hataya dayanıklı küçük program kodu, kodun yaklaşık %35'i düzeltilebilir
Bu nasıl anlaşılmalı?
Örneğin, H düzeyi hataya dayanıklı küçük program kodları için, karakterlerin yaklaşık %35'i düzeltilebilir. Bu, en iyi durumda, Küçük program kodunun %35'i engellendiğinde/hasar gördüğünde, tarama motoru küçük program kodu tarafından taşınan bilgileri yine de tanıyabilir.
Ancak %35'lik hasarlı alan bir konumlandırma örüntüsü ve işlevsel veri olamaz, saf bir kodlama alanı olmalı ve yanlış alan tam doğru dağıtılmalı, şartlar çok zor.
böyle, Buradaki yüzde çok ideal bir veridir ve gerçek test sonucu bu yüzdeden biraz daha düşük olacaktır.
Ancak, bu aşamada, resmi API belgesi aracılığıyla küçük bir program kodunun resmini istediğimizde, küçük program kodunun hangi sürümünü ve hataya dayanıklı seviyesini oluşturmayı umduğumuzu belirtmemize gerek yoktur (veya yapamayız). Wechat arka planı geliştirmeye yardımcı olacaktır. otomatik olarak seçilir.
Küçük ama eksiksiz.
Applet kodu, ortada özel logo alanı ve sağ alt köşede resmi logo alanı olmak üzere iki logo alanına sahiptir.Gri alan, uygulama kodunun veri kodlama alanı ve diğer renkli alanlar işlevsel verilerdir. uygulama kodunun (esas olarak sürüm, hata düzeltme ve diğer bilgiler dahil).
Spesifik yazışmalara gelince, WeChat yetkilisi henüz bunu kamuoyuna açıklamadığı için öncelikle burada gizli tutulması gerekiyor :)
Uygulama kodunda "kasımpatı" nasıl çiçek açar? Esas olarak aşağıdaki adımlar vardır:
1. Bağlantı noktasıİlk olarak sağ alt köşedeki 3 adet konumlandırma noktası ve resmi logo alanı belirlenir.İlk adımdan sonra applet kodunun boyutu da belirlenir.
Kodlama işlemi temel olarak orijinal bilgiyi (küçük bir programın ana sayfası gibi) bilgisayarın tanıyabileceği bir dile, ikili diziye (0110110 gibi) dönüştürme işlemidir.
Biraz soyut mu geliyor? Altı aylık bir bebeğin pirinç yiyemediğini anlayabilirsiniz, ancak pirinci parçalayıp pirinç sütü ve pirinç ezmesi haline getirebiliriz, böylece yiyip sindirebilir.
Kodlamadan sonraki adım, hata düzeltme kodlarının eklenmesidir.
Bu süreç biraz karışık ve ben de burada size herkesin anlayabileceği bir dilde anlatmaya çalışıyorum.
Diyelim ki, önce masaya 100 çiğ yumurta koyun (önceki adımda dönüştürülmüş ikili diziyi temsil eder) ve sonra 120 pişmiş yumurta ekleyin (hata düzeltme kodlarını temsil eder, belirli sayı hata düzeltme oranına bağlıdır, işte sadece Bir varsayım).
Yüzeyde, çiğ yumurta ile pişmiş yumurta arasında pek bir fark yoktur, ancak aslında onları birbirinden ayırmanın yolları vardır. Örneğin, çiğ yumurtalar döndürülemez çünkü sarısı yumurtanın ortasında asılıdır ve ağırlık merkezi sabit değildir, pişmiş yumurtalar döndürülebilir.
Hata düzeltme kodu adımından sonra, veri miktarı büyür (çiğ ve pişmiş yumurta örneğinden, masadaki yumurtalar 100'den 220'ye değişmiştir) ve önceki adımımıza dönüş, ikili dizi 0110'a eşdeğerdir. ...110 Genişletilmiş (orijinal 0 ve 1'in toplam 170 bit olduğu varsayılırsa, hata düzeltme kodlamasından sonra toplam 400 bit ile 1010101 olur).
Burada eklenmesi gereken bir nokta, Hata düzeltme kodlarının eklenmesiyle ilgili bu aşama, yalnızca veri miktarını artırmaz.
Uygulama kodunun sürümü ve hata düzeltme düzeyi belirlendikten sonra, ilgili hata düzeltme kodu sabitlenir, böylece kod çözme aşaması ilgili kurallar aracılığıyla hata düzeltme kodunu ortadan kaldırabilir ve gerçekten yararlı verileri tutabilir (Örneğin bir örneğine geri dönün). haşlanmış yumurta sadece çiğ yumurtayı bırakmak ve pişmiş yumurtayı dışarıda bırakmak olacaktır).
Bilgi dönüştürme ve hata düzeltme kodlamasından sonra, bir dizi son iki boyutlu kod dizisi elde ederiz ve bilgi, uygulama kodunun kodlama alanına belirli bir kodlama sırasına göre doldurulabilir (1 siyaha karşılık gelir, 0 karşılık gelir beyaz) .
Doldurduktan sonra, aşağıdaki resimde olduğu gibi, yaprakların uygulamada çok düzensiz göründüğünü gördük:
Bu nedenle, uygulama kodunun taç yapraklarının daha dengeli görünmesi için bir adım daha gereklidir.
Ondan önce, mantıksal dışlama VEYA'nın temellerini öğrenelim (XOR, sembol 'dir), lütfen aşağıdaki tabloya bakın.
A B , AB eşit olmadığında değer 1 ve AB eşit olduğunda 0'dır. A ve aynı B iki kez XOR'lanır ve sonuç orijinal kodla aynıdır (A B B = A).
Applet kodu 32 maskeyle (belirli kurallara göre oluşturulabilen "maskeler" olarak da bilinir) XOR'lanır ve en iyi etkiye sahip olan en sonunda nihai uygulama kodu olarak seçilir.
Son adım, işlevsel verileri doldurmaktır, nihai sonuç aşağıdaki gibidir:
Şimdiye kadar, uygulama kodu çiçeklenme sürecini tamamladı :)
uygulama kodunu alın
Resmi Mini Program geliştirme belgesinin açıklamasına göre, şu anda bir Mini Program kodu oluşturma talebinde bulunmak için iki arabirim (A ve B) ve bir Mini Program QR kodunun oluşturulmasını istemek için bir arabirim (C) bulunmaktadır.
Bu üç arayüz arasındaki fark nedir?
- Nicel kısıtlamalar: A ve C arayüzleri tarafından üretilen uygulama kodlarının ve QR kodlarının toplam sayısı 10w'ı geçemezken, B arayüzü tarafından oluşturulan uygulama kodlarının sayısı sınırsızdır.
- zamanlılık: A, B ve C arayüzü tarafından oluşturulan uygulama kodu/QR kodu kalıcı olarak geçerlidir
- Sayfa özgüllüğü: A ve C arabirimi tarafından oluşturulan uygulama kodu/QR kodu doğrudan belirtilen sayfaya girebilirken, B arabirimi tarafından oluşturulan uygulama kodu ancak teknik geliştirme ve işleme mantığından sonra (parametre sahnesi aracılığıyla) diğer sayfalara atlayabilir.
QR kodları oluşturmak için öncelikle B arayüzünü kullanmanız önerilir.Bir yandan, uygulama kodu her zaman QR kodundan daha tanınabilir, diğer yandan sayı konusunda bir sınırlama yoktur ve teknik işlem yapılır. görece basit.
Applet kodunun stili ile ilgili olarak, bu aşamada esas olarak aşağıdaki hususları tanımlayabiliriz:
- Uygulama kodunun boyutu
- Uygulama kodunun ışın rengi
- Logo alanının görüntüsünü özelleştirin
Şu anda sadece uygulama kodunun ışın rengini tanımlayabildiğimiz için, tüm uygulama kodu resminin arka plan rengini tanımlayamayız.
Bu nedenle, uygulama kod ışınının rengini bildirme adımında iki ana fikir vardır:
line_color ayarını yaparak uygulama kodu ışınının rengini belirleyin, Ancak, şu anda ışının arka plan rengiyle (beyaz) belirli bir kontrasta sahip olduğundan emin olmak en iyisidir. , tarama maliyetini azaltın
auto_color öğesini true olarak ayarlayın (varsayılan yanlıştır), WeChat arka planı, orta logo alanının ana rengine göre uygulama kodu ışınının rengini akıllıca belirleyecektir.
WeChat tanımlama uygulaması kodu
Applet kodunun tanımlama süreci, applet kodunun üretim sürecinin tersidir.Basit bir akış şeması ile deneyimleyebilirsiniz.
Mini Programlar şu anda doğrudan Anları desteklemese de, giderek daha fazla Mini Program, Anlara yayılabilen bir Mini Program kodu oluşturmak için Mini Program kodlarını iş işlevleriyle birleştirmeye çalıştı ve bu da diğer kullanıcıların tanımlamayı geçmesini kolaylaştırdı. ilgili uygulamaya doğrudan girmek için uygulama kodu (arkadaş çevresinden).
QR kodunu (veya uygulama kodunu) tanımlamak için uzun basmak, WeChat altında doğal bir etkileşimdir.Şimdi burada bunun hakkında konuştuğumuza göre, kodu tanımlamak için uzun basmanın arkasındaki küçük hikayeden kısaca bahsedeceğim. WeChat, esas olarak iki kategoriye ayrılan farklı senaryolara göre farklı tanımlama stratejileri benimseyecektir:
1. Web görünümünde tanımlamak için uzun basınWeChat, kullanıcının tanımlamak için uzun bastığını algıladığında, ilk kez mevcut ekranın ekran görüntüsünü alır ve ardından ekran görüntüsünün küçük bir program koduna (veya QR koduna) sahip olup olmadığını kontrol eder.
Uygulama kodunu (veya QR kodunu) tanımlamak için uzun basmak için bir menü öğesi varsa, ilgili uygulama koduna (veya QR koduna karşılık gelen içeriğe) atlamak için menü öğesini tıklayın; aksi takdirde, Ekran görüntüsü, mini program kodu (veya QR kodu) yoksa veya mini program kodunun (veya QR kodu) modeli eksikse, tanıma sonucu olmayacaktır.
Diyelim ki birisi arkadaş çevrenize küçük bir program kodu (veya QR kodu) içeren bir resim gönderiyor ve küçük resmin önizlemesine tıklıyorsunuz (resim şu anda resim görüntüleyicidedir), aynı zamanda uzun- şu anda basarak, o zaman bu tanımlamak için doğrudan resim gönderme zamanı! (Ama orijinal resim olmak zorunda değil. Burada birçok strateji var. Örneğin, bu resim çok büyükse, WeChat tanımlama için yüklemeden önce onu düzgün bir şekilde sıkıştıracaktır.)
Bu aşamada (2017.8) yapılan testlerden sonra, Olağan senaryolarda, WeChat QR kodunu tanımlamak için uzun basabildiği sürece, uygulama kodunu tanımlamak için uzun basabilir; ancak, uygulama altında, uygulama kodunu tanımlamak için yalnızca uzun basış süre için desteklenir QR kodunu tanımlamak için uzun basış Desteklenmez.
sonunda
Sonuna kadar okuduğunuz için hepinize teşekkür ederim ve minnettarlığımı ifade etmek için araştırmam sırasında karşılaştığım en güzel uygulama kodu resmini (tekrar) paylaşmaya karar verdim :)
Tencent oy
İlginç gerçek zamanlı oylama uygulaması
Referans makaleleri ve resim kaynakları:- Mini Program Koduna Giriş WeChat Ekibi tarafından
- "En Son Mini Program Kod Üretimini Uygulama ve Yorumlama" Hua Amca tarafından
- "WeChat Kamu Platformu Mini Program Geliştirme Dosyası"
"Bilen Program"ın halka açık hesabına dikkat
- WeChat'in arka planında yanıtla " Xiao organizasyonu , ne kadar harika insanların küçük programlar yaptığını görmek için.
- WeChat'in arka planında yanıtla " 666 "Know Development Alliance'a katılmak için.
