Ringkasan lima tahun pengalaman pembangunan program kecil untuk pasukan hadapan e-dagang [penuh dengan maklumat berguna]

Sebarang aplikasi yang boleh ditulis dalam JavaScript akhirnya akan ditulis dalam JavaScript. Begitu juga, sebarang produk yang boleh dilaksanakan menggunakan program mini akhirnya akan dilaksanakan menggunakan program mini. Jadi bagaimana untuk membangunkan program kecil? Artikel berikut akan meringkaskan dan berkongsi dengan anda pengalaman pembangunan program kecil selama lima tahun bagi pasukan bahagian hadapan e-dagang (prinsip sepuluh ribu perkataan dan petua pengoptimuman saya harap ia akan membantu semua orang!

1 Bincangkan seni bina dwi-benang

Soalan tentang reka bentuk asas program mini WeChat

• Apakah sebenarnya model dwi-benang itu?
• Bagaimana untuk memisahkan pandangan dan logik?
• Mengapa menggunakan sintaks pelik seperti WXML dan WXSS?
• Bagaimana untuk menyekat API operasi berbahaya?
• Bagaimana untuk berkomunikasi dan cara melaksanakan kemas kini paparan dipacu data?
• Apakah keburukan model dwi-benang?

1 Komposisi model

1), masalah yang wujud dalam proses penyemak imbas tradisional dan model benang

<.>

Isu prestasi

Thread rendering dan thread enjin JS adalah saling eksklusif, dan terdapat masalah penyekatan jangka panjang. akan menjejaskan secara langsung Paparan kepada paparan UI, menyebabkan lag halaman

Isu keselamatan

Teg HTML berbahaya (a, skrip) dan API JS (Fungsi, eval, API DOM) , adalah mudah bagi penyerang untuk mengganggu kandungan halaman, mendapatkan maklumat pengguna secara haram, dsb.

Penyelesaian

Aplet menggunakan model dwi-benang untuk menggabungkan paparan paparan dan logik Pemprosesan dilaksanakan secara berasingan dalam dua urutan

Teg HTML dirangkumkan dalam model Pembangun tidak boleh memanggil secara langsung teg asli Keupayaan API operasi logik berbahaya dalam JS juga disekat, dan tindakan komunikasi yang terlibat hanya Boleh mencetuskan kemas kini DOM maya (paparan dipacu data) melalui API yang disediakan oleh lapisan tengah

2), program mini model dwi-benang

Keupayaan lapisan paparan dan lapisan logik disediakan melalui fail JS perpustakaan asas program mini yang dibina ke dalam klien WeChat

WAWebview.js menyediakan asas Keupayaan API lapisan paparan. Termasuk set lengkap sistem komponen dan pelaksanaan berkaitan Dom Maya (DOM Maya)

WAService.js Menyediakan keupayaan API berdasarkan lapisan logik dan mendedahkan API untuk pelbagai operasi kepada pembangun

3), pelaksanaan asas enjin pelanggan

Di bawah persekitaran berjalan yang berbeza, persekitaran pelaksanaan skrip dan persekitaran untuk pemaparan komponen adalah berbeza , dan terdapat juga perbezaan dalam prestasi:

• Pada iOS, iPadOS dan Mac OS, kod JavaScript lapisan logik applet dijalankan dalam

  JavaScriptCore, lapisan paparan dipaparkan oleh WKWebView, dan persekitarannya ialah iOS 14 , iPad OS 14, Mac OS 11.4, dsb.

• Pada Android, kod JavaScript lapisan logik applet dijalankan dalam

  V8, dan lapisan paparan adalah berdasarkan Chromium Mudah Alih Teras dipaparkan oleh enjin XWeb yang dibangunkan sendiri oleh WeChat (daripada X5 yang lalu kepada enjin XWeb yang dibangunkan sendiri), lapisan paparan dipaparkan berdasarkan kernel Chrome Mudah Alih , dan menurut pendedahan rasmi, pada masa hadapan lapisan logik juga akan diasingkan daripada V8 dan menggunakan benang Pekerja XWeb Tersuai tersuai, iaitu, menyesuaikan benang Pekerja Web sebagai lapisan logik applet. Pautan rujukan)

• Pada Windows, lapisan logik applet JavaScript dan lapisan paparan menggunakan kernel Chromium

• Pada alat pembangunan, kod JavaScript lapisan logik applet dijalankan dalam

  NW.js, dan lapisan paparan dipaparkan oleh Chromium WebView

2. View lapisan

1), sistem komponen program mini

Terdapat tiga jenis komponen yang terlibat dalam program mini: komponen terbina dalam dan komponen tersuai Komponen, asli komponen

2), rangka kerja organisasi komponen program mini

1, Komponen Web

Web Komponen ialah keupayaan untuk mencipta fungsi terkapsul dan elemen tersuai dalam penyemak imbas Ia terdiri daripada tiga teknologi utama

• Elemen tersuai Satu set API JavaScript yang membenarkan mentakrifkan elemen tersuai dan gelagatnya, yang kemudiannya boleh digunakan seperti yang diperlukan dalam antara muka pengguna

• Shadow DOM Satu set API JavaScript untuk melampirkan pokok DOM "bayangan" terkapsul pada elemen (diberikan secara berasingan daripada DOM dokumen utama) dan mengawal Fungsi yang berkaitan dengannya. Mengekalkan kefungsian elemen secara peribadi dengan cara ini membolehkannya diskrip dan digayakan tanpa rasa takut bercanggah dengan bahagian lain dokumen

• Templat HTML (Templat HTML)

Templat dan elemen slot boleh menulis templat penanda yang tidak dipaparkan dalam halaman yang diberikan. Ia kemudiannya boleh digunakan semula beberapa kali sebagai asas untuk struktur elemen tersuai

2. Rangka kerja Exparser

Exparser ialah rangka kerja organisasi komponen untuk program mini WeChat dan menyediakan kecil Menyediakan sokongan asas untuk pelbagai komponen program Semua komponen dalam program mini, termasuk komponen terbina dalam dan komponen tersuai, disusun dan diuruskan oleh Exparser

Dalam program mini, semua operasi berkaitan pepohon nod bergantung pada Exparser, termasuk pembinaan WXML kepada pepohon nod akhir halaman , createSelectorQuery panggilan dan ciri komponen tersuai, dsb.

Exparser akan mengekalkan maklumat yang berkaitan dengan pepohon nod keseluruhan halaman, termasuk atribut nod, pengikatan acara, dsb., yang bersamaan dengan versi ringkas pelaksanaan Shadow DOM

3 Ciri Exparser

• Berdasarkan model Shadow DOM: Model ini sangat serupa dengan. Shadow DOM bagi Komponen Web, tetapi tidak bergantung pada sokongan asli penyemak imbas , dan tiada perpustakaan bergantung lain semasa pelaksanaan, API lain turut ditambah untuk menyokong pengaturcaraan komponen program kecil

• boleh dijalankan dalam persekitaran JS tulen: ini bermakna lapisan logik juga Mempunyai keupayaan organisasi pepohon komponen tertentu (akan digunakan dalam pemaparan komponen)

• Cekap dan ringan: baik prestasi, terutamanya cemerlang dalam persekitaran dengan bilangan tika komponen yang banyak Pada masa yang sama, saiz kod juga lebih kecil

4 >registerBehavior

mendaftarkan beberapa gelagat asas komponen untuk diwarisi oleh komponen

registerElement

Daftar komponen, dan antara muka interaktif dengan kami terutamanya sifat dan peristiwa

Penciptaan komponen

Perpustakaan asas program mini menyediakan perkhidmatan luaran seperti Halaman dan Terdapat dua pembina Komponen Apabila applet dimulakan, medan definisi seperti sifat, data, kaedah , dsb. ditulis ke dalam daftar komponen Exparser Apabila memulakan halaman, Exparser akan mencipta contoh komponen akar halaman, dan komponen lain yang digunakan juga akan Mencipta kejadian komponen dengan sewajarnya (ini adalah proses rekursif)

5. . Proses penciptaan Halaman dan Komponen

Kita boleh lihat dengan jelas daripada rajah di atas Dapat dilihat bahawa terdapat perbezaan dalam kaedah komunikasi antara rendering halaman dan rendering komponen bagi program mini. Antaranya, penjanaan dan perbezaan VDOM dalam pemaparan Halaman diselesaikan dalam lapisan paparan dan lapisan logik hanya bertanggungjawab untuk menghantar data data untuk mencetuskan logik kemas kini lapisan pemaparan. Dalam pemaparan Komponen, lapisan logik dan lapisan paparan perlu bersama-sama mengekalkan set VDOM Kaedahnya adalah untuk membina VDOM komponen dalam lapisan logik apabila komponen dimulakan, dan kemudian menyegerakkannya ke lapisan paparan. Operasi kemas kini seterusnya akan mula-mula melakukan perbezaan VDOM lama dan baharu dalam lapisan logik, dan kemudian hanya menyampaikan keputusan selepas perbezaan dan menghantarnya ke lapisan paparan untuk pengemaskinian dan pemaparan langsung VDOM. Kelebihan terbesar melakukan ini adalah untuk mengawal butiran komunikasi kemas kini paparan ke peringkat DOM Hanya DOM yang akhirnya berubah akan dikemas kini (kerana kadangkala perubahan dalam data tidak semestinya membawa kemas kini pada paparan Berbanding dengan sebelumnya kemas kini Tahap data akan menjadi lebih tepat, mengelakkan kos komunikasi yang tidak perlu dan memberikan prestasi yang lebih baik.

3), Komponen asli Program Mini

1 Kelebihan komponen asli

Meluaskan keupayaan Web
• . Sebagai contoh, komponen kotak input (input, textarea) mempunyai keupayaan untuk mengawal papan kekunci dengan lebih baik.

Pengalaman yang lebih baik
• , sambil turut mengurangkan kerja pemaparan WebView. Sebagai contoh, kerja pemaparan komponen yang lebih kompleks seperti komponen peta tidak menduduki urutan WebView, tetapi diserahkan kepada pelanggan yang lebih cekap untuk pemprosesan asli.

Prestasi pemaparan adalah lebih baik
• , memintas setData, komunikasi data dan proses pemaparan semula Contohnya, komponen kanvas boleh terus menggunakan set antara muka lukisan yang kaya melukis.
  2. Proses penciptaan komponen asli

Selepas komponen dibuat, ia dimasukkan ke dalam pepohon DOM, menghasilkan elemen pemegang tempat dan kernel penyemak imbas akan Mengira reka letak serta-merta Pada masa ini, kita boleh membaca kedudukan (koordinat x, y), lebar dan tinggi komponen berbanding halaman

Komponen

• memberitahu klien bahawa klien memasukkan kawasan asli pada kedudukan yang sama mengikut lebar dan tinggi, dan kemudian klien memaparkan antara muka dalam kawasan ini

• Apabila kedudukan atau lebar dan ketinggian berubah, komponen akan memberitahu pelanggan untuk membuat pelarasan yang sepadan

3 sekatan pemaparan komponen asli

• Sesetengah gaya CSS tidak boleh digunakan pada komponen asli

• Isu tahap (komponen asli ialah tahap tertinggi dan akan meliputi komponen dalam lapisan WebView)

Penyelesaian

• Gunakan komponen paparan muka depan dan imej muka depan untuk menutup komponen asli (keupayaan terhad, tidak fleksibel)

• Perenderan lapisan yang sama (memaparkan komponen asli terus ke tahap WebView yang sama melalui cara teknikal tertentu)

4), pemaparan komponen asli pada lapisan yang sama

1. Prinsip pelaksanaan sistem iOS

Paparan lapisan yang sama pada sisi iOS program mini dilaksanakan berdasarkan WKChildScrollView Selepas komponen asli dilampirkan, ia akan terus dipasang pada bekas WKChildScrollView pra-dicipta

Analisis Prinsip

WKWebView menggunakan pendekatan berlapis untuk memaparkan secara dalaman WKWebView akan menghasilkan Lapisan Penggabungjalinan (lapisan penggubahan). Kernel WebKit ke dalam komponen WKCompositingView pada iOS, tetapi lapisan penggubahan Tiada perhubungan pemetaan satu-dengan-satu dengan nod DOM (kernel biasanya menggabungkan berbilang nod DOM ke dalam satu lapisan komposisi).

WKChildScrollView: Apabila sifat CSS nod DOM ditetapkan kepada limpahan: tatal (versi yang lebih rendah perlu menetapkan -webkit-overflow-scrolling: sentuh pada masa yang sama), WKWebView akan menjana WKChildScrollView (Untuk menjadikan penatalan WebView pada iOS mempunyai pengalaman yang lebih lancar, penatalan dalam WebView sebenarnya dibawa oleh komponen penatal asli yang sebenar, dan kernel WebKit telah memproses hubungan hierarki antaranya dan nod DOM yang lain), Dan terdapat hubungan pemetaan satu dengan satu antara WKChildScrollView dan nod DOM.

Proses penciptaan

• Buat nod DOM dan tetapkan sifat CSSnya untuk melimpah: tatal dan- webkit-overflow-scrolling: sentuh

• Memberitahu klien untuk mencari komponen WKChildScrollView asli yang sepadan dengan nod DOM

• Lekapkan komponen asli ke Nod WKChildScrollView berfungsi sebagai anak View

• Melalui proses di atas, komponen asli applet dimasukkan ke dalam WKChildScrollView

2. Android Prinsip pelaksanaan sistem

WebPlugin ialah mekanisme pemalam dalam kernel penyemak imbas Paparan lapisan yang sama pada bahagian Android program mini adalah berdasarkan teg benam dan

prinsip yang dilaksanakan oleh Analisis WebPlugin

teg benam ialah teg baharu dalam HTML5, yang digunakan untuk mentakrifkan kandungan terbenam (seperti pemalam, media, dll.) . Format boleh berupa PDF, Midi, Wav, MP3, dsb., seperti menyemak imbas Chrome Pratonton PDF pada penyemak imbas dilaksanakan berdasarkan teg benam.

Berdasarkan teg benam yang digabungkan dengan sambungan kernel Chromium menyokong mekanisme WebPlugin ialah mekanisme pemalam bagi kernel penyemak imbas komponen kepada tekstur Tekstur yang disediakan oleh kernel. Cipta nod DOM benam di sebelah WebView dan nyatakan jenis komponen

Inti Chromium akan mencipta contoh WebPlugin dan menjana RenderLayer

Pelanggan Android memulakan komponen asli yang sepadan

• Pelanggan Android melukis gambar komponen asli ke SurfaceTexture yang terikat pada RenderLayer yang dibuat dalam langkah 2

• Memberitahu kernel Chromium untuk memaparkan RenderLayer

• Chromium menjadikan nod benam dan memaparkannya pada skrin

• 5), lihat kompilasi kod lapisan

• Alat pembangun WeChat terbina dalam Pengkompil fail kod WXML dan WXSS Binari Pengkompil menerima senarai fail kod WXML dan WXSS. Selepas pemprosesan, ia mengeluarkan kod JavaScript

1. Fail kod WXSS

• Proses pelaksanaan alat arahan wcsc

wcsc menyusun WXSS dan menjana fail JS Produk

Fail JS mengandungi kaedah penukaran rpx unit saiz tambahan, yang boleh digunakan mengikut skrin peranti Lebar dikira secara adaptif ke dalam unit px

menyediakan kaedah setCssToHead untuk menambah kandungan css yang ditukar pada kepala templat html

• pelaksanaan kaedah eval Rentetan fail JS ini melengkapkan suntikan gaya

2. Fail kod WXML

Proses pelaksanaan alat arahan WCC

• wcc menyusun WXML dan menjana produk fail JS

• Fail JS mengandungi kaedah $gwx, menerima laluan fail WXML, menjana kaedah generateFunc selepas pelaksanaan dan mencetuskan peristiwa generateFuncReady

• kaedah generateFunc menerima data data dinamik, serupa dengan fungsi pemaparan, digunakan untuk menjana dom maya

3. Lapisan logik

1), lapisan logik mengandungi kandungan

• yang menyediakan persekitaran pelaksanaan kod JS

• sebagai objek tetingkap Tambah antara muka modul memerlukan tentukan

• Sediakan Halaman, Apl, getApp dan antara muka lain

• Sediakan kaedah api di bawah objek global, rangkaian, media, Fail, cache data, lokasi, peranti, antara muka, maklumat nod antara muka dan beberapa antara muka terbuka khas

2), persekitaran pelaksanaan kod JS

JSCore Komposisi (iOS, Android)

1 >Ia mewujudkan persekitaran VM Untuk melaksanakan kod JS, jika anda mempunyai berbilang JS yang perlu dilaksanakan, anda perlu membuat seketika berbilang VM. Dan harus diingat bahawa VM ini tidak boleh berinteraksi antara satu sama lain, kerana masalah GC terdedah untuk berlaku

2 JSContext

JSContext ialah objek konteks untuk kod JS. pelaksanaan Setara dengan objek tetingkap dalam Webview. Dalam VM yang sama, anda boleh menghantar Konteks yang berbeza

3, JSValue

Serupa dengan WASM, JsValue digunakan terutamanya untuk menyelesaikan jenis data JS dan Pemetaan data Swift atau Java antara jenis. Dalam erti kata lain, sebarang kandungan yang dipasang dalam JSContext adalah jenis JSValue dan Java secara automatik melaksanakan penukaran jenis dengan JS secara dalaman

4 JSExport

Ia adalah protokol dalam JSCore digunakan untuk mendedahkan antara muka Asli. Secara ringkasnya, ia akan secara langsung menukar sifat dan kaedah Native yang berkaitan kepada kaedah dan sifat pada objek prototaip

3 Pelaksanaan spesifikasi modul

Lulus. define mentakrifkan modul dan mengehadkan modul lain yang boleh digunakan oleh modul, seperti tetingkap, dokumen, dll. Kaedah define dilaksanakan dengan menyimpan semua logik kod JS dalam pembolehubah global dalam bentuk pasangan nilai kunci "path-modul" . Gunakan memerlukan untuk menggunakan modul Apabila menggunakan modul, hanya modul yang akan diluluskan Selepas memasukkan memerlukan, modul, dan eksport, semua pembolehubah lain yang dibaca dalam kod ini juga merupakan sebab mengapa beberapa objek persekitaran pelayar tidak boleh diperolehi dalam program mini

Ini sebenarnya idea pemuatan modul biasa, yang hampir sama dengan cara pakej Webpack modul

4. Prinsip komunikasi

Dalam fail WAWebview.js dan WAService.js Selain menyediakan keupayaan API asas untuk lapisan paparan dan lapisan logik, ia juga menyediakan keupayaan untuk berkomunikasi antara dua utas

Komunikasi antara lapisan logik applet dan lapisan pemaparan akan dilakukan oleh Native (pelanggan WeChat) Untuk pemindahan, lapisan logik menghantar permintaan rangkaian dan juga memajukannya melalui Native

• 1), dan pelaksanaan asas

Pelaksanaan yang berbeza bagi beberapa hujung akhirnya akan dirangkumkan ke dalam lapisan keserasian seperti WeiXinJSBridge untuk dipanggil oleh pembangun

1 iOS

Lapisan paparan dilaksanakan melalui window.webkit.messageHandlers.NAME.postMessage dan eval WKWebView. Lapisan logik menyuntik kaedah asli global ke dalam rangka kerja JavaScriptCore

2 Pada bahagian Android

prinsip pelaksanaan lapisan paparan dan lapisan logik adalah sama. , dan kedua-duanya pergi ke tetingkap WebView Objek disuntik ke dalam kaedah asli pelaksanaan WeixinJSCore ini ialah antara muka (pelaksanaan asli) yang disediakan oleh WeChat untuk panggilan JS

3 🎜>

Gunakan websocket untuk komunikasi 2), objek modul WeixinJSBridge

WeixinJSBridge menyediakan mekanisme komunikasi mesej antara lapisan paparan JS dan Native, lapisan paparan dan logik layer, dan menyediakan kaedah berikut:

invoke

: JS calls Native API

dihidupkan: JS mendengar mesej Asli

terbitkan: Lihat lapisan menerbitkan mesej

langgan: Langgan mesej pada lapisan logik

5 >

1) Kecacatan seni bina dwi-benang

• Ketidakupayaan untuk mengendalikan DOM secara fleksibel dan mencapai kesan yang lebih kompleks

• Sesetengah dan komponen asli Paparan berkaitan mempunyai sekatan penggunaan Contohnya, WeChat's scrollView tidak boleh mempunyai textarea

• Saiz halaman dan bilangan halaman yang dibuka adalah terhad

  perlu diasingkan. Bangunkan penyesuaian dan tidak boleh menggunakan semula sumber kod sedia ada

• Apabila volum JS dalam JSCore agak besar, masa permulaannya akan terjejas

• Apabila menghantar data, penggunaan masa penyirian dan penyahsirilan perlu dipertimbangkan

• 2), pengoptimuman seni bina dwi-benang

Prestasi kesesakan yang disebabkan oleh dwi benang, Ini juga merupakan isu utama yang WeChat sendiri telah komited untuk menyelesaikannya. Seperti yang dinyatakan sebelum ini, applet akan menggantikan pelaksanaan lapisan logik dalam kernel XWeb baharu dengan benang XWeb Worker yang disesuaikan dengan mengubah suai kernel Chromium Ini akan menghapuskan keperluan untuk tambahan V8 dan meningkatkan penggunaan memori dengan ketara. Di samping itu, memandangkan ia berdasarkan urutan Pekerja kernel Chromium, mengenai komunikasi data, adalah wajar untuk mempunyai keupayaan PostMessage untuk menggantikan kaedah komunikasi asas setData asal untuk mendapatkan keupayaan komunikasi prestasi yang lebih tinggi

3), seni bina dwi-benang applet Alipay

Selain itu, saya juga mengetahui tentang pelaksanaan asas applet Alipay. Applet Alipay juga menggunakan model seni bina dwi-benang yang serupa Dengan menggunakan kernel penyemak imbas yang disediakan oleh UC, lapisan pemaparan berjalan dalam utas Webview dan lapisan logik memulakan utas berasingan untuk menjalankan Service Worker. Walau bagaimanapun, Pekerja Perkhidmatan perlu berkomunikasi dengan urutan pemaparan melalui MessageChannel API Apabila jumlah data adalah besar dan objek adalah kompleks, terdapat juga kesesakan prestasi.

Oleh itu, applet Alipay mereka bentuk semula mesin maya JS sedia ada V8 dan mencadangkan model pengasingan yang dioptimumkan (Model pengasingan Dioptimumkan, OIM). Idea utama OIM adalah untuk berkongsi data dan infrastruktur dalam contoh mesin maya JS yang tiada kaitan dengan persekitaran pelaksanaan benang, serta objek JS yang tidak berubah atau tidak berubah, supaya sambil mengekalkan pengasingan logik lapisan JS, memori boleh disimpan dalam senario berbilang contoh dan overhed penggunaan kuasa. Walaupun sesetengah data yang dikongsi antara kejadian akan membawa penyegerakan overhed, di bawah model pengasingan, data, objek, kod dan infrastruktur mesin maya yang dikongsi oleh penyelesaian ini adalah tidak berubah atau tidak meruap, jadi persaingan jarang berlaku.

Di bawah model pengasingan baharu, tika V8 dalam Webview ialah Masa Jalanan Setempat, dan tika V8 dalam urutan Pekerja juga ialah Masa Jalanan Setempat Apabila lapisan logik dan lapisan pemaparan berinteraksi, objek setData akan menjadi dicipta terus dalam Dalam Timbunan Dikongsi, Masa Jalan Setempat lapisan pemaparan boleh terus membaca objek dan menggunakannya untuk pemaparan lapisan pemaparan, yang mengurangkan penyirian dan penghantaran rangkaian objek dan meningkatkan prestasi permulaan dan prestasi penyajian.

Selain itu, applet Alipay melaksanakan pengoptimuman caching luar talian halaman utama untuk pertama kalinya memaparkan halaman UI halaman utama yang disimpan kali terakhir, memaparkan halaman utama kepada pengguna, dan kemudian terus memuatkan rangka kerja bahagian hadapan dan kod perniagaan dalam. latar belakang. Selepas pemuatan selesai, ia digabungkan dengan UI halaman utama cache luar talian untuk memaparkan halaman utama dinamik kepada pengguna Ini sangat serupa dengan skema caching pemaparan awal applet WeChat dan lebih radikal. Teknologi WebAssembly juga digunakan untuk melaksanakan semula kod teras DOM maya dan menambah baik pemaparan halaman program mini. [Tutorial video berkaitan yang disyorkan:

bahagian hadapan web

]

6 Pemikiran tentang reka bentuk seni bina model dwi-benang

Seni bina teknikal dilahirkan untuk menyelesaikan masalah, penyelesaian teknikal yang baik bukan sahaja memerlukan pereka bentuk untuk membuat keseimbangan dan pertukaran antara kecekapan pembangunan, kos teknikal, pengalaman prestasi, dan keselamatan sistem, tetapi juga perlu disepadukan rapat dengan trend perniagaan, bentuk produk, dan permintaan pengguna

2. Melihat lebih dekat mekanisme masa jalan

1. mula), WeChat akan Program ini memaparkan antara muka permulaan tetap, yang mengandungi ikon, nama dan ikon gesaan pemuatan program mini

Pada masa ini, WeChat akan melengkapkan beberapa tugas di belakang tabir:

Muat turun pakej kod program mini, muatkan pakej kod program mini dan mulakan laman utama program mini

Dari perspektif pembangun, mengawal saiz pakej kod boleh membantu mengurangkan masa permulaan program mini. Untuk pakej kod kurang daripada 1MB, masa muat turun boleh dikawal dalam 929ms (iOS) , 1500ms (Android)

Pelan pengoptimuman

• Kurangkan saiz pakej utama dan subpakej

• Peruntukan munasabah, peraturan pramuat subpakej

• Pecahan halus, subkontrak tak segerak

2 Penyediaan peringkat halaman

Sebelum memulakan program mini , WeChat. akan menyediakan tahap halaman terlebih dahulu untuk memaparkan halaman utama program mini. Setiap kali tahap halaman digunakan untuk memaparkan halaman, WeChat akan mula menyediakan tahap halaman baharu terlebih dahulu, supaya setiap kali wx.navigateTo dipanggil, halaman baharu boleh dipaparkan secepat mungkin. Kandungan halaman lapisan paparan dijana melalui templat pageframe.html

Langkah-langkah penyediaan untuk peringkat halaman

• Peringkat pertama ialah memulakan WebView Pada sistem iOS dan Android, sistem pengendalian memerlukan masa yang singkat untuk memulakan WebView

• .

  Peringkat kedua ialah Mulakan perpustakaan asas dalam WebView Pada masa ini, beberapa pengoptimuman dalaman perpustakaan asas akan dilakukan untuk meningkatkan prestasi pemaparan halaman

• Peringkat ketiga adalah untuk. menyuntik struktur WXML dan gaya WXSS program mini untuk membuat program mini Program boleh mula memaparkan halaman serta-merta selepas menerima data awal halaman (peringkat ini tidak boleh dilaksanakan sebelum program mini dimulakan)

3. Suntikan dan pelaksanaan kod halaman

1), mulakan pembolehubah global

Lihat lapisan global pembolehubah

• __wxConfig: berdasarkan konfigurasi global dan objek Konfigurasi yang dijana oleh konfigurasi halaman, termasuk halaman, halaman subkontrak, bar tab dan maklumat lain
• __wxAppCode__: pembangun bukan jenis JS kod
• JSON: Kandungan fail konfigurasi JSON
• WXML: Hasil pelaksanaan fungsi $gwx ialah fungsi boleh laku Selepas pelaksanaan, objek VDOM akan dikembalikan
• WXSS : Hasil daripada fungsi gaya pelaksanaan eval ialah fungsi boleh laku Selepas pelaksanaan, tag gaya akan dimasukkan

Pembolehubah global lapisan logik

__wxConfig: serupa dengan lapisan paparan, tidak termasuk halaman subkontrak, bar tab dan maklumat lain
• __wxAppCode__: Sama seperti lapisan paparan, ia tidak mengandungi data jenis WXSS
• __wxRoute: digunakan untuk tuding ke laluan halaman yang sedang dimuatkan
• __wxRouteBegin: digunakan untuk menandakan pendaftaran Halaman yang betul
• __wxAppCurrentFile__: Digunakan untuk menunjuk ke fail JS yang sedang dimuatkan
• __wxAppData: objek domain data setiap halaman applet
• Komponen: pembina komponen tersuai
• Gelagat: pembina tingkah laku komponen tersuai
• definePlugin: Pembina pemalam tersuai
• global: objek global
• WeixinWorker: pembina berbilang benang

2), perpustakaan asas dan kod perniagaan suntikan fail JS

Lihat suntikan kod lapisan

Suntikan dan laksanakan fail wxml.js (takrifkan kaedah $ gwx)
1. Suntikan dan laksanakan fail wxss.js ( kaedah eval, tambah fail gaya app.wxss)
2. Tambah __wxAppCode__ pembolehubah
3. Laksanakan kaedah eval, masukkan ke dalam halaman semasa Dan rujuk fail gaya komponen
4. untuk melaksanakan $gwx (laluan halaman semasa) dan kembalikan kaedah yang sepadan untuk menjana DOM maya

Suntikan kod lapisan logik

Suntikan dan laksanakan fail JS (perintah: lain, babel, Komponen, Halaman, Apl)
1. Suntikan dan laksanakan fail wxml.js (takrifkan kaedah $gwx)

Suntikan atas permintaan dan suntikan yang memakan masa

Biasanya, apabila program mini dimulakan, semua kod JS dalam subpakej dan pakej utama (kecuali subpakej bebas) di mana halaman permulaan terletak akan menjadi suntikan Gabung. Bermula daripada perpustakaan asas versi 2.11.1,

suntikan atas permintaan dan suntikan berasaskan masa dikonfigurasikan applet hanya menyuntik komponen tersuai dan kod halaman yang diperlukan oleh halaman semasa dan penyesuaian yang tidak akan digunakan dalam halaman. Komponen tidak akan dimuatkan dan dimulakan

3), pelaksanaan kod perniagaan lapisan logik

4 , komunikasi data dan Paparan paparan

1), pemaparan awal halaman

Komunikasi data

mulakan applet atau baharu Apabila halaman dibuka, data awal halaman (data) dan laluan serta maklumat lain yang berkaitan akan dihantar dari lapisan logik ke lapisan paparan untuk pemaparan awal lapisan paparan.

Lapisan Asli akan menghantar data ini terus ke lapisan paparan dan mempersembahkan tahap halaman baharu kepada pengguna Lapisan paparan akan melukis antara muka pada tahap halaman ini.

Selepas lapisan paparan menerima data yang berkaitan, ia memilih struktur WXML yang sesuai mengikut laluan halaman Struktur WXML digabungkan dengan data awal untuk mendapatkan hasil pemaparan pertama halaman

Selepas melengkapkan suntikan kod lapisan paparan dan menerima data awal yang dihantar oleh lapisan logik, digabungkan dengan struktur halaman dan maklumat gaya yang diperoleh daripada data awal dan lapisan paparan, rangka kerja program mini akan memaparkan dan memaparkan halaman utama program mini Skrin pertama program mini dan mencetuskan acara onReady pada halaman utama.

Jika

Cache pemaparan awal dihidupkan, pemaparan pertama boleh dilengkapkan terus menggunakan data cache lapisan pemaparan, tanpa bergantung pada data awal lapisan logik, mengurangkan permulaan masa (acara onReady dilaksanakan lebih awal).

Masa permulaan halaman secara kasarnya terdiri daripada dua bahagian: masa komunikasi data awal halaman dan masa pemaparan awal. Antaranya, masa komunikasi data merujuk kepada masa dari permulaan organisasi data pada lapisan logik hingga selesai penerimaan lengkap oleh lapisan paparan Apabila volum data kurang daripada 64KB, jumlah masa boleh dikawal dalam 30ms.

Masa penghantaran secara amnya berkorelasi positif dengan jumlah data yang terlalu besar akan meningkat dengan ketara kali ini. Oleh itu,

mengurangkan jumlah data yang dihantar ialah cara yang berkesan untuk mengurangkan masa penghantaran data.

Pemaparan awal

Pemaparan awal berlaku apabila halaman baru dibuat. Semasa pemaparan awal, data awal digunakan pada serpihan WXML yang sepadan untuk menjana pepohon nod. Pokok nod ialah struktur pepohon halaman yang dilihat dalam panel WXML alat pembangun Ia mengandungi maklumat seperti nama, nilai atribut, fungsi panggil balik acara dan maklumat lain semua nod komponen dalam halaman. Akhir sekali, berdasarkan setiap nod yang terkandung dalam pokok nod, setiap komponen dicipta secara berurutan pada antara muka. Data dan pepohon nod semasa yang diperoleh dalam pemaparan awal akan disimpan untuk pemaparan semula.

Dalam keseluruhan proses ini, overhed masa biasanya berkadar dengan jumlah bilangan nod dalam pokok nod. Oleh itu

mengurangkan bilangan nod dalam WXML secara berkesan boleh mengurangkan overhed masa pemaparan awal dan pemaparan semula serta meningkatkan prestasi pemaparan.

2), kemas kini pemaparan data

Selepas pemaparan awal selesai, lapisan paparan boleh melakukan kemas kini antara muka selepas pembangun memanggil setData.

Prinsip setData

1 Tukar nilai yang sepadan bagi data ini (operasi segerak)

Uraikan nama atribut (termasuk . dan [] , dsb. Simbol laluan data), kembalikan struktur hierarki yang sepadan, ubah suai nilai data setempat yang sepadan

{abc: 1} 中 abc 属性名 => [abc]
{a.b.c: 1} 中 'a.b.c' 属性 => [a,b,c]
{"array[0].text": 1} => [array, 0, text]

2. Hantar data dari lapisan logik ke lapisan paparan (operasi tak segerak)

evaluateJavascript: Data yang dihantar oleh pengguna perlu ditukar kepada rentetan dan dihantar Pada masa yang sama, kandungan data yang ditukar disambungkan ke dalam skrip JS, dan kemudian dihantar ke persekitaran bebas. pada kedua-dua belah pihak dengan melaksanakan skrip JS

Apabila pemaparan semula, lapisan logik menggabungkan data setData ke dalam data dan lapisan pemaparan menggunakan data dan data setData ke Serpihan WXML untuk mendapatkan pepohon nod baharu. Kemudian bandingkan pepohon nod baharu dengan pepohon nod semasa, supaya anda boleh mendapatkan nod yang perlu dikemas kini dan nod yang perlu ditambah atau dialih keluar. Akhir sekali, pokok nod lama digantikan dengan pokok nod baharu untuk pemaparan semula seterusnya.

Apabila membandingkan pepohon nod semasa dan pepohon nod baharu, atribut nod yang dipengaruhi oleh data setData akan dibandingkan. Oleh itu, mengalih keluar data set yang tidak perlu dan mengurangkan jumlah data dalam setData juga akan membantu meningkatkan prestasi langkah ini.

3), komunikasi acara pengguna

Lapisan paparan akan menerima acara pengguna, seperti

acara klik, acara sentuh, dsb.

Komunikasi peristiwa pengguna adalah agak mudah Apabila peristiwa pengguna dicetuskan dan pendengar peristiwa yang berkaitan perlu dicetuskan, lapisan paparan akan menyuap semula maklumat ke lapisan logik.

Oleh kerana proses komunikasi ini tidak segerak, akan berlaku kelewatan tertentu Masa tunda juga berkaitan secara positif dengan jumlah data yang dihantar Apabila jumlah data kurang daripada 64KB, ia akan berada dalam 30ms.

Terdapat dua cara utama untuk mengurangkan kependaman

• Alih keluar pengikatan peristiwa yang tidak perlu (ikat dan tangkap dalam WXML ), dengan itu mengurangkan jumlah dan kekerapan data komunikasi

• Apabila mengikat peristiwa, anda perlu menghantar set data sasaran dan semasaSasaran, jadi jangan letakkan data terlalu besar dalam atribut awalan data nod

三、小程序基建和优化方案实践

1、小程序性能优化

1）、代码分包

1、合理的分包和分包预加载策略

主包内容

Tab页（系统要求）、业务必要页面（错误兜底页、登陆授权页等），其余文件都以业务模块或者页面的维度，拆分成各自的分包

分包预加载

据用户的实际使用场景，预测下一跳的页面，将可能性最高的场景设置为预加载分包（可以参照业务埋点数据），例如：进入电商首页后，需要对会场和商详页的分包进行预加载

2、组件分包分发

实现思路

小程序不支持主包引用分包代码，只能在分包中引用主包代码，所以把公共使用的组件代码放在主包目录中，但这些公共组件未必在主包所属的页面中会被引用，可能只是在分包页面中被多次引用，这样使得主包中代码体积越来越大，用户首次加载速度变慢。

将主包页面不依赖的公共组件分别分发到依赖它们的分包目录中，虽然分包各自的体积会有所增大，但主包体积会有显著下降

实现原理

将所有需要分发的组件放置主包指定目录中，并添加配置文件，说明组建文件分发信息。在开发时用 gulp 任务监听单个文件变化、在构建时递归遍历所有组件，将其复制到配置文件中指定的子包路径目录中。

目标文件在复制之前，都先要将文件内的依赖路径进行更新，使其在子包中运行时也能引用成功。针对不同类型的文件，采取不同的依赖分析手段。

• JS 文件：使用 babel.transformFile 修改依赖引用地址

• WXSS 文件：使用 postcss.plugin('transform-wxss') 处理依赖的 @import 导入样式文件地址

• WXML 文件：使用 require('htmlparser2').Parser 来转换内部 wxs、template（import 和 include 导入）依赖的引用地址

异步分包

小程序基础库版本 2.17.3 及以上开始支持分包异步化，即可以在分包之间互相引用，这个能力可以快速取代我们自己的组件分发方案，而且优化效果更佳，可以将分包中公共依赖的代码部分打成新的分包，在使用时异步按需引入，能力与 Web 端的异步组件类似，但这个方案在生产环境的稳定性有待验证。

2）、setData 优化

实现思路

合并 setData 调用，将其放在下个时间片（事件循环）统一传输，降低通信频率

实现原理

需要先将逻辑层 this.data 进行更新，避免前后数据不一致造成逻辑出错。将需要传送至视图层的 data 进行整合，在 nextTick 中调用原生的 setData 统一进行传送，可以有效降低通信频率，并且在传送前手动做一次与 this.data 的 diff 操作，降低通信体积

1. 降低频率

const nextTick = wx.nextTick ? wx.nextTick : setTimeout; // 小程序里的时间片 API

2. 减少体积

参考京东 Taro 中 diff 的实现，对基本、数组、对象等不同类型进行处理，最终转换为 arr[1]、x.y 这样的属性路径语法，减少传输信息量

3）、Storage API 重封装

实现思路

onLaunch、onLoad 等生命周期函数中存在大量对微信 Storage 的同步调用（使用 Sync 结尾的API），这些操作涉及JS与原生通信，同步等待耗时过久，推迟页面 onReady 触发即用户可交互时间，影响用户体验。直接改为异步操作又存在业务代码改动量较大的问题，存在一定风险，大量的异步回调代码语义不优雅、可读性较差。因此需要对原生 Storage 操作进行重封装，改为对内存中对象的实时存取，提高响应速度，并定期调用原生 API 向真实 Storage 中同步。

实现原理

Mengenkapsulasi API dengan kaedah panggilan yang sama, dengan getStorage dan getStorageSync sebagai API asas Apabila dipanggil buat kali pertama, API asli dicetuskan untuk mendapatkan data asalnya, ia disimpan dalam objek memori . Semua operasi berikutnya (pemadaman, pengubahsuaian dan carian) adalah berdasarkan objek ini. Operasi set dan alih keluar perlu menandai data yang sepadan sebagai kotor dan menyimpannya dalam jadual kotor supaya perubahan boleh disegerakkan ke hujung asal kemudian. Pemanggil perlu memanggil kaedah penyegerakan perubahan secara kerap untuk mengekalkan data (melintasi data dalam jadual kotor yang disegerakkan) untuk mengelakkan kehilangan data secara tidak sengaja apabila memori berjalan Secara amnya, ia perlu dilaksanakan dengan kerap (onShow apl melaksanakan setInterval). dan dilaksanakan dalam kitaran hayat onHide apl.

Kami bukan sahaja membungkus semula API Storan, tetapi juga menggunakan API penyegerakan lain yang mengambil masa yang lama (seperti getSystemInfo/getSystemInfoSync API yang digunakan untuk mendapatkan maklumat peranti dan sistem, lapisan bawah adalah pelaksanaan segerak) Dalam cara yang sama, API sistem hanya dipanggil semasa pemerolehan pertama dan hasilnya dicache dalam ingatan, dan panggilan berikutnya terus mengembalikan maklumat cache.

4), Data Prefetch

1 Kaedah Terbitkan dan langgan

Idea pelaksanaan

Daripada A Sebelum halaman melompat ke halaman B, mesej memancarkan halaman A mencetuskan permintaan antara muka data halaman B dan menyimpan data hasil Apabila halaman B dibuka, cache diambil terlebih dahulu dipanggil semula

Prinsip Pelaksanaan

Walaupun halaman B belum dibuat instantiated, halaman itu telah didaftarkan dan kod luar Halaman telah dilaksanakan, jadi mesej boleh dilengkapkan dengan halaman A terlebih dahulu Terbitkan dan langgan

2 Kaedah pembolehubah pendaftaran global

Idea pelaksanaan

. Apabila halaman yang perlu dipramuat tidak didaftarkan dalam pakej utama atau secara tidak segerak , adalah mustahil untuk melaksanakan pra-permintaan melalui mod terbitkan-langganan Kami boleh mencapainya dengan mendaftar secara global kaedah pramuat

Prinsip pelaksanaan

Lompat laluan pada halaman sebelumnya Mulakan pra-permintaan dan simpan permintaan ini ke pembolehubah Promise global Apabila halaman yang perlu dimuatkan untuk kali pertama, data menghasilkan pembolehubah Promise global maka panggilan balik akan diambil dahulu

5) , Pengoptimuman memori

1 Pengoptimuman imej

Optimumkan imej keseluruhan sumber (fungsi Awan Alibaba)

• Saiz : Lebar 1-2 kali lebar dan tinggi sebenar
• Format Webp : Digunakan sepenuhnya pada sisi Android
• Format PNG : Latar belakang lutsinar hanya untuk adegan dengan permintaan yang kuat Gunakan, selebihnya menggunakan Jpg/Jpeg secara lalai
• Pemuatan malas imej: Dayakan atribut beban malas bagi komponen Imej

2 Turun taraf mesin rendah

Idea Pelaksanaan

Mengikut kepada tahap prestasi perkakasan model pengguna, strategi persembahan berbeza ditetapkan untuk paparan bahagian hadapan

Prinsip Pelaksanaan

Turunkan taraf fungsi berikut dalam senario mesin rendah

• Animasi GIF diturunkan taraf kepada imej statik
• Animasi JS dan CSS diturunkan taraf kepada gaya statik
• Tiada komponen leret Paparan
• kualiti menggunakan 60 % kualiti

3. Pengoptimuman senarai panjang

• RecycleView
• IntersectionObserver

2

1), rangka kerja pemalam

Alat rangka kerja

BeautyWe ialah rangka kerja pembangunan perniagaan program kecil tiga pihak yang merangkumi logik perniagaan awam asas kehidupan

senario aplikasi

Logik perniagaan biasa, seperti pengesahan status log masuk pengguna pada setiap halaman, mendapatkan dan memproses parameter url, titik terkubur PV automatik, pemantauan prestasi, dsb.

Prinsip pelaksanaan

Fungsi kitaran hayat ialah pemalam, dan fungsi asli onLoad, onShow, onReady dan lain-lain ditulis semula menggunakan Object.defineProperty untuk membentuk rantaian tugas Promise secara dalaman Dengan memperkenalkan pemalam, kaedah boleh dimasukkan secara bebas ke dalam kedudukan hadapan dan belakang bagi fungsi kitaran hayat sistem dicetuskan apabila ia dilaksanakan dan dipanggil mengikut urutan.

Selepas melaksanakan pemalam cangkuk kitaran hayat, kita boleh merangkum semua jenis logik awam asas yang perlu diproses dan memasukkannya ke dalam hos (kitaran hayat asli ) Janji rantai tugas

2), penggunaan automatik

Berdasarkan program mini CI Gitlab CI Puppeteer, satu set alat pembinaan dan penggunaan program mini separa automatik dilaksanakan Untuk butiran, lihat saya artikel lain "WeChat Mini Program Automated Deployment Solution" , Program Mini WeChat kemudiannya menyediakan miniprogram-ci yang boleh dijalankan secara bebas dalam persekitaran Linux, yang lebih ringkas dan mudah digunakan.

3), pemantauan titik tersembunyi

Keupayaan pemantauan

• Titik tersembunyi perniagaan (Fokus perniagaan seperti PV halaman, pendedahan modul, dll.)

• Pelaporan prestasi(permulaan program mini, pemaparan halaman, FMP, penggera memori)

• Pemantauan pengecualian(Ralat JS, ralat antara muka, ralat perniagaan)

Jenis pelaporan pemantauan prestasi

• memory_warning: Pelaporan data penggera memori. Kaedah pengumpulan: Kumpul tahap penggera dalam wx.onMemoryWarning panggil balik

• app_launch: Pelaporan data masa jalan apl. Kaedah pengumpulan: merekodkan masa pelaksanaan kitaran hayat apl (onLaunch, onShow), laporkan apabila onLoad halaman

• page_render: pelaporan data masa jalan halaman. Kaedah pengumpulan: rekod masa pelaksanaan kitaran hayat halaman (onLoad, onShow, onReady), FMP, dsb., dan laporkannya apabila halaman berada di Sembunyikan atau diUnload

Prinsip pelaksanaan

Berdasarkan rangka kerja pemalam, fungsi cangkuk kitaran hayat ditulis semula untuk merekod dan melaporkan data prestasi secara automatik semasa pelaksanaan program halaman

3 pelaksanaan pengoptimuman dan kehidupan harian Spesifikasi Lelaran

Kami menggunakan FMP sebagai penunjuk utama untuk mengukur kadar pembukaan kedua Untuk butiran, sila rujuk artikel saya yang lain Prestasi bahagian hadapan berpusatkan pengalaman pengguna pengoptimuman . Di samping itu, dalam pembangunan harian, kami juga telah mencetuskan beberapa spesifikasi yang boleh meningkatkan jaminan asas prestasi dan kestabilan dalam lelaran perniagaan harian Untuk butiran, lihat Peraturan Ketenteraan Pembangunan Program Mini WeChat.

4. Ringkasan pemikiran dan prospek pembangunan

Keupayaan infrastruktur sentiasa bertambah baik

Teknologi asas rangka kerja berterusan dipertingkatkan dalam dokumen rasmi Pendedahan itu menunjukkan pembinaan teknologi program mini semakin matang dan sempurna. Dengan pengayaan berterusan ekosistem infrastruktur, pegawai telah berturut-turut memberikan sokongan untuk keupayaan ini, termasuk pemaparan lapisan yang sama, pemantauan persekitaran rangkaian, caching pemaparan awal dan pengoptimuman prestasi permulaan, membawa program mini lebih dekat dengan ekosistem Web.

Dalam lelaran perniagaan kami sendiri, untuk menyelesaikan pelbagai masalah, kami telah mencipta sendiri banyak roda, seperti: subkontrak dan penyegerakan, pembungkusan CI dan API prestasi WeChat kemudiannya akan melaksanakan keupayaan ini secara asli. Ia mungkin kelihatan seperti usaha yang sia-sia, tetapi sebenarnya ia hanya menunjukkan bahawa apa yang telah kita lakukan pada masa lalu adalah betul, dan hala tujunya konsisten dengan pembangunan keseluruhan ekosistem.

Lebih banyak senario memperkasakan perniagaan

Selain peningkatan keupayaan teknikal, ekosistem program mini WeChat juga sentiasa memperkaya sokongan keupayaan dalam lebih banyak senario perniagaan, seperti Sokongan program mini untuk berkongsi Momen, menjana pautan pendek, dan bahan sembang WeChat untuk membuka program mini, memberikan lebih banyak kemungkinan dan imaginasi untuk perniagaan kami.

WeChat juga telah melancarkan rangka kerja perkakasan program mini, yang membolehkan peranti perkakasan (peranti pengkomputeran bukan am) menjalankan program mini WeChat walaupun ia tidak mempunyai syarat untuk menjalankan klien WeChat Ia boleh digunakan pada Android tablet, tablet, dsb. dalam semua bidang kehidupan seperti peranti skrin besar menyediakan penyelesaian interaksi skrin kos rendah dan memberikan pengguna peranti IoT pengalaman yang lebih standard dan kaya.

Ini mengingatkan saya kepada pepatah Atwood’s Law yang telah beredar dalam bidang teknologi komputer selama beberapa dekad Sebarang aplikasi yang boleh ditulis dalam JavaScript akhirnya akan ditulis dalam JavaScript. Begitu juga, sebarang produk yang boleh dilaksanakan menggunakan program mini akhirnya akan dilaksanakan menggunakan program mini.

Prospek untuk pembangunan program mini

Sejak kelahiran program mini WeChat pada tahun 2017, program mini super App/model aplikasi ringan telah dicuba dan diuji dalam pelbagai perniagaan, seperti program mini WeChat dan WeChat, program mini Alipay dan Alipay, program mini Douyin dan Douyin, dll. Program mini, model produk dengan kos rendah, lelaran pantas dan promosi yang mudah, telah digunakan dalam pelbagai bidang dengan sokongan trafik yang besar dibawakan oleh aplikasi super. Semuanya telah mencapai kejayaan besar dan secara beransur-ansur menjadi trend, dengan semakin banyak syarikat menambah model ini pada produk mereka. Program mini itu sendiri tanpa disedari telah disepadukan ke dalam setiap aspek kehidupan Semasa wabak, aplikasi kod kesihatan di pelbagai wilayah, kod program mini untuk pembelian kumpulan e-dagang dalam komuniti, dan pesanan restoran, jika anda ingin minum teh susu dan. kopi, anda boleh memuat turunnya terlebih dahulu pada program mini Malah, kehidupan orang ramai tidak dapat dipisahkan daripada program kecil Penyelesaian teknologi produk program kecil sememangnya mencipta nilai sosial yang besar.

Semasa saya berbual dengan seorang rakan, saya secara berseloroh mengatakan bahawa program mini adalah aplikasi PWA dengan ciri-ciri Cina program Mini masih mempunyai potensi besar di masa hadapan untuk perkadaran yang agak tinggi, mereka juga digunakan dalam lebih Kegunaan teknologi program mini juga boleh dilihat dalam pelbagai senario Contohnya, dalam industri seperti penjagaan kesihatan, runcit luar talian, permainan hiburan, dan kecerdasan AI, ia adalah jauh dari mencapai ketepuan. Jurang pasaran telah menjadikan potensi pembangunan program mini berubah Untuk menjadi lebih besar, Program Mini bergerak ke arah matlamat asal untuk menjadikan Program Mini boleh diakses dan di mana-mana .

Alamat asal: https://juejin.cn/post/7100752247381819399

(Belajar perkongsian video: Bermula dengan bahagian hadapan web )