Geliştirme | Arka uç kodlamaya gerek yok, size WordPress'i nasıl küçük bir program yapacağınızı öğretin
Metin | Jeff
Birkaç hafta önce, WordPress web sitemin WeChat uygulama sürümünü yapmak için iki gün geçirdim.
Bu makale mini programın ilk sürümünü kendim geliştirme sürecini kaydeder.
Bugün paylaşılan programı (WeChat zxcx0101) bilerek, bu makale, bir WordPress web sitesinin WeChat uygulama sürümünü geliştirmek için REST API'nin nasıl kullanılacağını adım adım açıklayacaktır.
Mini program geliştirme teknikleri hakkında seçilmiş makaleler edinmek için "Knowing Program" resmi hesabını takip edin ve WeChat arka ucundaki "Geliştirme" bölümüne yanıt verin.
WordPress blog içeriği applet ile nasıl okunur?
WordPress, 4.6 sürümünde REST API'yi tanıttı. basit ifadeyle, HTTP isteği aracılığıyla istemci ve sunucu arasında bir veri etkileşim şemasıdır.
Sıradan bir WordPress web sitesini ziyaret ettiğimizde, genellikle statik önbelleğe almayı etkinleştirmeden "veri tabanından veri çekme sunucu tarafı PHP işlemi HTML kullanıcı tarayıcı arayüzüne" işlemine ihtiyacımız vardır.
REST API süreci benzerdir, ancak biraz farklıdır: Çıktı, JSON formatındaki verilerdir ve genellikle istemciler tarafından kullanılır (web tarayıcıları değil).
REST API ile bir web sitesinde farklı istemciler (Android veya iOS uygulamaları ve WeChat uygulamaları) oluşturmak ve bir veritabanını paylaşmak mümkündür.
Bir tarayıcı aracılığıyla WordPress arayüz adreslerinden birine doğrudan erişebiliriz: your-site.com/wp-json/wp/v2/posts?per_page=5page=1, bunun gibi bir dönüş görebilirsiniz.
Şimdi yukarıdaki URL'yi açıklamama izin verin.
- / wp-json / wp / v2 /, REST API yönlendiricisi ve WordPress tarafından tanımlanan sürüm numarasının birleşimidir.
- WordPress'te yayınlar "uç noktalar" olarak adlandırılır.
- sayfa başına ve sayfa parametrelerdir.
Yukarıdaki URL, En son 5 makalenin verilerinin 1. sayfada çıktısını gösterir (5 makale 1 sayfadır) .
WeChat uygulaması, REST API aracılığıyla WordPress web sitesinden veri alabilir. Veriler işlendikten sonra, WeChat istemcisinde gördüğünüz arayüz olan ön uç kodu aracılığıyla oluşturulur.
WordPress'in REST API'si çok eksiksizdir ve makale verilerinin, sayfa verilerinin, kullanıcı verilerinin vb. Ne olduğu önemli değildir.
Uygulamanın arka ucu olarak WordPress'i kullanmak gerçekten çok fazla insan gücü tasarrufu sağlıyor.En azından biz ön uç köpekler için, sıkı çalışan arka uç kodu yazmaya gerek yok.
Başlayın, bir WP uygulaması yapın
Önceki bölümde ilkeyi tanıttıktan sonra, üç sayfanın (ana sayfa, içerik sayfası ve okuma kaydı sayfası) genel olarak nasıl yapıldığını tanıtmak için bu sitede geliştirilen "DeveWork Geek" uygulamasının ilk sürümünü örnek alalım. itibaren.
1. HazırlıkHazırlık çalışması ayrıntılara girmeyecek ve genellikle aşağıdaki işlemleri içerecektir.
- WeChat genel platformunun yönetim arka planında bir mini program hesabı kaydedin ve yasal alan adlarını ve diğer bilgileri yapılandırın.
- İkincisi, HTTPS'nin sunucu tarafında yapılandırıldığından emin olmaktır (ancak dosyalama için zorunlu değildir).
Ayrıca geliştirmeye başlamadan önce sunucu tarafında WordPress REST API üzerinde bazı özelleştirilmiş çıktılar yaptım.
2. Proje yapısıResmi WeChat hızlı başlangıç örneğini ve kişisel ihtiyaçları birleştiren proje yapısı şu şekilde bölünmüştür:
. app.js app.json app.wxss config.js // yapılandırma dosyası resim // resim dizini sayfalar // sayfa dizini utils / / Pratik untils sınıfı wxParse // üçüncü taraf kitaplığı wxParse
Uygulamanın ana sayfası, makale listesi sayfasıdır. Mini program başlatıldığında, en son 5 makale görüntülenecek ve ardından açılır akış yoluyla daha fazla makale yüklenecektir.
Burada kullandığımız WordPress REST API, your-site.com/wp-json/wp/v2/posts?per_page={num}page={num} şeklindedir.
İndex.js dosyasının özü, makale verilerini wx.request arabirimi aracılığıyla almak için yukarıdaki API URL'sine erişmek ve ardından işleme için setData'dır.
// https://devework.com/wordpress-rest-api-weixin-weapp.htmlwx.request ({url: url, success: function (response)) {self.setData ({posts: self.data.posts.concat (response.data.map (function (öğe) {... // Veri filtreleme / biçimlendirme vb ... iade öğesi;}))});}});}Daha sonra tekrarlanan çağrıları kolaylaştırmak için bu kodları işlevler halinde özetledim.
Ayarlanan veriler, index.wxml aracılığıyla döngüsel olarak çıkarılır. Kaydırmalı yükleme nedeniyle, uygulamanın kaydırmalı görünümü bileşeni kullanılır.
Yukarıdaki WXML kodunda, iki olay işlevi bağlıdır: biri pullDownRefresh açılır olayı, diğeri ise makale sayfasına atlamak için tıklatan redictSingle olayıdır.
// DownRefresh'i Çekin: function (olay) {var self = this; self.setData ({page: self.data.page + 1 // sayfa +1}); console.log ('geçerli sayfa:' + self. data.page); this.fetchData ({page: self.data.page});}, // Gezintiyi makale iç sayfasına yönlendir redictSingle: function (event) {console.log ('redictSingle'); var id = event .currentTarget.id; // Buradaki kimlik aslında WordPress'teki makale kimliğidir ve tek sayfaya aktarılması gerekir var url = '.. / single / single? id =' + id; wx.navigateTo ({url: url}) } 4. Makale ayrıntıları sayfasını oluşturunMakale sayfası tarafından kullanılan API adresi your-site.com/wp-json/wp/v2/posts/{id} şeklindedir. Benzer şekilde, URL'ye wx.request arabirimi üzerinden erişin ve ardından verileri WXML sayfasına işleyin.
Kod yukarıdakine benzer, bu yüzden tekrar etmeyeceğim. Ancak hatırlatılması gereken şey, bunun zengin metnin WeChat uygulamaları tarafından tanınabilecek WXML'ye nasıl dönüştürüleceğini içerdiğidir.
Çünkü elde edilen JSON verilerinde makale gövde kısmı bir HTML kodu parçasıdır. Doğrudan uygulamaya HTML çıktısını alırsanız, bir hata bildirilecektir.
Bu HTML kodunu WeChat uygulaması WXML diline dönüştürmemiz gerekiyor.Bu süreci bir sonraki bölümde tanıtacağım.
4. Kayıt sayfasını okuyun
Okuma kaydı sayfası, kullanıcının tarama geçmişini görüntülemek için kullanılır, sadece resmi Merhaba Dünya örneğini takip edin.
Bu sayfada kullanılan ana iki arayüz aşağıdaki gibidir: yerel önbellekle ilgili arayüz, kullanıcı yetkilendirmeyle ilgili arayüz (wx.login, wx.getUserInfo, vb.).
Kullanıcı deneyimi açısından başlangıçta kullanıcıdan yetkilendirme başvurusunda bulunmamalı, sadece ihtiyaç duyulan sayfalar için başvurmalısınız. Aynı zamanda, kullanıcının yetkilendirme reddinin nazikçe ele alınması da yapılmalıdır.
Mini Programın kullanıcı bilgilerini nasıl doğru bir şekilde elde ettiğini kontrol etmek için "Bilme Programı" nın WeChat resmi hesabını takip edin ve WeChat arka planındaki "Kullanıcı Bilgileri" ni yanıtlayın.
Kaydedilen makale okuma geçmişi verileri, istemcide bulutta değil yerel önbellek biçiminde saklanır. Bu nedenle, "okuma kayıtlarının yalnızca bu cihazda saklandığına" dair bir hatırlatma gereklidir.
Aynı zamanda programın küçük önbellek sınırına göre kayıt sınırını 20 olarak belirledim.
// Yerel önbellekten okuma kayıtlarını almak için API'yi çağırın ve var logs = wx.getStorageSync ('readLogs') ||; // Yinelenen değerleri filtrele if (logs.length > 0) {logs = logs.filter (function (log) {return log! == id;});} // Belirtilen sayıyı aşarsa if (logs.length > 19) {logs.pop; // Sonuncuyu kaldır} logs.unshift (); wx.setStorageSync ('readLogs', logs);Yukarıdaki kod aslında single.js'ye yerleştirilmiştir. Çünkü makale kimliğini ve başlığını kaydetmem gerekiyor ve yalnızca single.js her iki veriyi aynı anda alacak.
Son olarak, log.js'nin onShow yaşam döngüsü işlevindeki verileri güncellemek için bir işlevi de bağlamam gerekiyor:
updateData: function (cb) {var that = this; // this.setData dosyasını oku ({readLogs: (wx.getStorageSync ('readLogs') ||) .map (function (log) {return log;})})} ,Geliştirme sürecinde bastığım çukur
Bu bölüm esas olarak geliştirme sürecindeki bazı çukurları ve benimsediğim çözümleri kaydeder.
1. Sekme Çubuğu resim sorunuMini program resmi olarak SVG görüntülerini desteklediğini iddia ediyor, Ancak sekme çubuğu SVG resimlerini desteklemez.
Resmi öneri, 81 px × 81 px boyutunda PNG resimleri kullanmaktır, ancak bu yine de biraz çukurludur.
Simgeyi tasarlarken sekme çubuğunun simgesi için biraz şeffaf dolgu bırakmanız önerilir. , Aksi takdirde, simge gerçek cihazda büyütülecektir.
2. Resim anti-sülük için referans ayarlarıGörüntüyü barındırdığınız sunucuda anti-hotlinking işlemi varsa, servicewechat.com'u beyaz listeye eklemeniz gerekir. Bu beyaz listenin qq.com olmadığını unutmayın.
3. Görüntü bileşeninin mutlak yolu HTTPS ile başlamalıdır//Example.com/pic.png gibi web geliştirmede görüntü bileşeninin src'sinin mutlak yolunun protokol adının varlığını atlamasına izin verilir.
Bu tür bir görüntü yolu, WeChat web geliştirici aracında da normal olarak görüntülenebilir. Ancak, gerçek bir makineye normal olarak yüklenemez. Gerçek bir cihazda HTTPS ile başlayan mutlak bir yol olmalıdır.
Sunucu veri tarafının işlenmesi kolay değilse, aşağıdaki işlevle işlenebilir:
// URL addhttps (url) içindeki eksik HTTPS işlevini tamamlayın {if (! / ^ (F | ht) tps?: \ / \ // i.test (url)) {url = "https:" + url;} dönüş url;} 4. Geliştirici Araçlarının küçük programı UA, gerçek UA programından farklıdırGeliştirme aracında simüle edilen küçük UA programı şuna benzer:
... Chrome / 53.0.2785.143 Safari / 537.36 appservice webview / 100000Ve Nginx günlüğü aracılığıyla, gerçek makinede çalışan UA'nın aslında WeChat UA olduğunu öğrenebiliriz:
... Mobil / 14E304 MicroMessenger / 6.6.0 NetType / WIFI Dili / zh_CNBazı durumlarda bu farklılıkların not edilmesi gerekir.
5. Varsayılan Flex düzeniKüçük programınızı resmi örneğin koduna göre geliştiriyorsanız, önce app.wxss'in Flex düzeniyle ilgili kodunu silmeniz önerilir. Bunu yapmak, garip stil problemleriyle karşılaşma olasılığınızı azaltacaktır.
6. wxParse çukuruUygulama tarafından kullanılan zengin metin dönüşümü, bir üçüncü taraf kitaplığı olan wxParse'ı kullanmaktır.Kullanırken birçok tuzak vardır (ancak bu kitaplık şu anda en pratik olanıdır).
Bunlardan biri, global kod karakterlerinin wx-codexxx ile değiştirilmesidir.Yazar, başlangıçta kod etiketini değiştirmeyi amaçlamıştır, ancak yanlışlıkla yanlış yazabilir.
Çözüm, bu kod parçasını geçici olarak silmektir.
Ek olarak, wxParse kullanılırken, resim bileşenindeki src özelliği fazladan bir virgül ayrıştırır.
Resme bakın ve konuşun:
Yukarıdaki şekil aynı zamanda yukarıdaki referans çukurunu ve resim yolu HTTPS'nin başlangıcındaki çukuru da açıklamaktadır. Çözüm, önce yalnızca kaynak kodunu (html2json.js) düzeltebilirsiniz:
// Düzeltme: img etiket dizisi boş karakterler içeriyor if (imgUrl == '') {imgUrl.splice (0, 1);}Zengin metinle ilgili olarak, iyi haber, resmi zengin metin bileşeninin piyasaya sürülmesidir.
WeChat resmi "Knowing Program" hesabını takip edin, WeChat arka planında "zengin metin" yanıtlayın ve mini programın zengin metin bileşeninin yeni yeteneklerinin yorumunu kontrol edin.
Son sözler
Şimdiye kadar, biraz ayrıntılı olarak kabul edilebilir ve uygulamanın WordPress sürümünü geliştirme sürecini tanıtabilirim. Bir sonraki iş doğal olarak yetkiliye sunmak ve denetim sonuçlarının bildirilmesini sabırla beklemektir.
Tüm geliştirme süreci aslında çok zor değil Daha önce Angular ve Vue gibi MVVM çerçevelerini kullandıysanız, tüm geliştirme süreci temelde sadece resmi belgelere bakmaktan ibarettir.
"DeveWork Geek" Mini Program Kullanım Bağlantısı
https://minapp.com/miniapp/3016/
Orijinal adres: https://devework.com/wordpress-rest-api-weixin-weapp.html
Mini program geliştirme teknikleri hakkında seçilmiş makaleler edinmek için "Knowing Program" resmi hesabını takip edin ve WeChat arka ucundaki "Geliştirme" bölümüne yanıt verin.
