Apakah perbezaan antara uniapp memanggil vue dan nvue

Perbezaan: 1. Memanggil vue memerlukan penggunaan pemaparan webview, manakala memanggil nvue menggunakan pemaparan asli weex 2. css antara muka vue menyokong pertanyaan media, tetapi css halaman nvue tidak; menyokong pertanyaan media. 3. halaman nvue semuanya menggunakan susun atur fleksibel, dan halaman vue boleh mempunyai pelbagai kaedah susun atur.

Persekitaran pengendalian artikel ini: sistem Windows 10, uni-app versi 2.5.1, komputer DELL G3.

Apakah perbezaan antara uniapp memanggil vue dan nvue

uni-app memisahkan logik dan pemaparan, dan lapisan pemaparan disediakan pada sisi aplikasi Dua set enjin penetapan huruf.

Paparan web dalam mod program mini dan pemaparan asli dalam mod weex Anda boleh memilih dua enjin pemaparan mengikut keperluan anda.

• Pemaparan web menggunakan fail vue

• nvue menggunakan pemaparan asli weex

komponen Kaedah penulisan adalah sama seperti js, tetapi css berbeza. css yang boleh digunakan untuk tetapan taip asli mestilah reka letak fleksibel

Bahagian apl uni-app mempunyai enjin pemaparan asli terbina dalam berdasarkan peningkatan weex, menyediakan keupayaan rendering asli.

Di sebelah App, jika anda menggunakan halaman vue, gunakan pemaparan webview; jika menggunakan halaman nvue (singkatan daripada native vue), gunakan pemaparan asli. Dua halaman boleh digunakan dalam satu Apl pada masa yang sama Contohnya, halaman utama menggunakan nvue dan halaman peringkat kedua menggunakan vue. Ini adalah contoh hello uni-app.

Walaupun nvue juga boleh disusun berbilang hujung dan mengeluarkan H5 dan program kecil, kaedah penulisan CSS nvue adalah terhad, jadi jika anda tidak membangunkan apl, anda tidak perlu menggunakan nvue.

nvue dan vue berkomunikasi antara satu sama lain

Dalam uni-app, halaman nvue dan vue boleh dicampur dan dipadankan.

Adalah disyorkan untuk menggunakan uni.o n, u n i on, uni.on, uni.emit untuk komunikasi halaman

nvue Notes

1 , halaman nvue semuanya menggunakan reka letak fleksibel, kaedah reka letak lain tidak disokong dan peratusan tidak boleh digunakan. Perlu diingatkan bahawa flex menjadi lalai kepada susunan menegak, iaitu, flex-direction: column Jika anda perlu menukar arah reka letak, anda boleh menggunakan flex-direction: row; 2. Ditakrifkan dalam gaya Global App.vue tidak akan berkuat kuasa pada halaman nvue.

3 Pada masa ini, penggunaan bahasa yang telah dikompilasi seperti s css dan kurang pada halaman nvue tidak disokong.

4. Fail fon tidak boleh diperkenalkan dalam gaya Untuk penggunaan ikon fon dalam nvue, sila rujuk: weex memuatkan fon tersuai.

5. Kelas hanya menyokong sintaks tatasusunan apabila mengikat (had minggu).

6. Apabila halaman nvue melompat ke halaman vue, anda hanya boleh memanggil API penghalaan uni-app untuk melompat.

7. nvue tidak menyokong berjalan pada simulator. Apabila memanggil api uni-app dalam dibuat, id paparan web pelancaran tidak sedia ralat mungkin berlaku Jika anda menangguhkan pelaksanaan selama beberapa ratus milisaat, ralat tidak akan dilaporkan. Apabila nvue page titleNview ditetapkan kepada false, jika anda ingin mensimulasikan bar status, anda boleh merujuk kepada: https://ask.dcloud.net.cn/article/35111.

8. nvue tidak menyokong penggunaan import untuk memperkenalkan css luaran Anda perlu menggunakan kaedah berikut untuk memperkenalkannya. Anda perlu menambah gaya baharu tambahan.

9. Semasa membangunkan nvue, jika anda menghadapi ralat berikut, ia adalah kerana apl uni mesti mempunyai halaman vue Masalah ini boleh diselesaikan dengan mencipta halaman vue kosong baharu dalam projek .

<style src="@/common/test.css"></style>
<style>
          .test {
              color: #E96900;
          }
</style>

10 Dalam nvue, anda tidak boleh terus memperkenalkan fail fon dalam css melalui @font-face Anda perlu menggunakan modul dom dalam js untuk memperkenalkan fail fon, dalam kurungan url medan src. Pastikan anda menggunakan petikan tunggal

Uncaught Error: module "common/vendor.js" is not defined
    20:31:58.664  Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误
    20:31:58.687  Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task.
    20:31:58.706  console.groupEnd

11. Banyak gaya css tidak menyokong singkatan

 const domModule = weex.requireModule('dom');
   domModule.addRule('fontFace', {
   'fontFamily': "iconfont",
   'src': "url('../../static/iconfont.ttf')"
   });

, seperti sempadan

sempadan set imej -radius

/* 错误 */
.class {
    border: 1px red solid;
}
 
/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

Dalam nvue, anda tidak boleh menetapkan jejari sempadan untuk imej Jika anda ingin menukar corak segi empat tepat kepada bulatan, anda perlu membungkus lapisan div di luar imej :

12. Kawalan halaman nvue hanya boleh ditunjukkan atau disembunyikan Apabila menggunakan v-if, anda tidak boleh menggunakan v-show

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image> </div>

13 support em, rem, pt, %, upx

Masalah lebar akan membahagikan skrin telefon mudah alih secara automatik kepada 750 bahagian Lebar 1250 bahagian tinggi

Disyorkan: "

tutorial uni-app.

"

Atas ialah kandungan terperinci Apakah perbezaan antara uniapp memanggil vue dan nvue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!