ホームページ > 記事 > ウェブフロントエンド > uniappとvueの違いは何ですか

uniappとvueの違いは何ですか

青灯夜游オリジナル: 2021-03-04 16:04:3234467ブラウズ

違い: uniapp はミニプログラムのタグを使用し、vue は Web 側のタグを使用します。さらに、携帯電話側で一般的に使用される多数の新しいコンポーネントが追加されています。 uniappのAPIはアプレットを参照するため、ブラウザ側のAPIとは異なります。 uni は vue-router をサポートしておらず、独自のルーティングを使用します。

uniappとvueの違いは何ですか

#このチュートリアルの動作環境: Windows 7 システム、uni-app2.5.1&&vue2.9.6 バージョン、thinkpad t480 コンピューター。

uniapp と vue の違い

コンポーネント/ラベルの変更

以前はhtml タグ、現在はミニプログラムラベルです。

スパン、フォントをテキストに変更
a ナビゲーターに変更
img イメージに変更
input はまだ存在しますが、type 属性はconfirmtype
form、button、checkbox、radio、label、textarea、canvas、video
に変更されました。これらはまだ存在します。
iframe web-view に変更
ul と li がなくなり、代わりに view を使用
audio は推奨されなくなりました、変更API モード、バックグラウンドオーディオ API ドキュメントへ
実際には、古い HTML タグも uni-app で使用できます。uni-app コンパイラは、p を view にコンパイルするなど、コンパイル中に古いタグを新しいタグに変換します。ただし、H5 エンドをデバッグするときに混乱を引き起こしやすいため、この使用法はお勧めできません。

変更に加えて、携帯電話で一般的に使用される多数の新しいコンポーネントが追加されました

#スイッチスイッチセレクター

#カメラカメラ

#ライブプレーヤーライブブロードキャスト

cover-view もう少し強調する必要があります。h5 以外の部分です。ユニアプリの終了ビデオ、マップ、キャンバス、およびテキストエリアはネイティブコンポーネントであり、他のコンポーネントよりも高レベルです。マップにマスクを追加するなど、ネイティブコンポーネントをカバーする必要がある場合は、カバービューコンポーネントを使用する必要があります。

組み込みコンポーネントに加えて、一般的なコンポーネントをカプセル化するオープンソース拡張コンポーネントが多数あります。 DCloud が設立しましたプラグインマーケットにはこれらの拡張コンポーネントが含まれます詳細はプラグインマーケットをご覧ください

js の変更点

js の変更点は分割されています実行環境の変更、データバインディングモードの変更、API 3 部分の変更です。

実行環境はブラウザから v8 エンジンに変更されます

標準の js 構文と API (if、for、settimeout など) がサポートされています、indexOf など。
ただし、Cookie やその他のストレージを含む、ブラウザー固有のウィンドウ、ドキュメント、ナビゲーター、および位置オブジェクトはブラウザーでのみ利用可能であり、アプリやアプレットではサポートされていません。

js はブラウザの js と同じだと考える人もいるかもしれません。実はjsはECMAScriptという組織によって管理されており、ブラウザ内のjsはjsの仕様に基づいてウィンドウ、ドキュメント、ナビゲータ、ロケーションなどの特殊なオブジェクトを補完するw3c組織です。

h5 エンドを除く uni-app の各エンドでは、もう一方のエンドの js はブラウザーではなく独立した v8 エンジンで実行されるため、ブラウザーオブジェクトは使用できません。小規模なプログラム開発を行ったことがある人なら、このことをよく知っているはずです。

これは、jqurey などのドキュメントに依存する多くの HTML ライブラリが使用できないことを意味します。

もちろん、アプリや小さなプログラムは、標準 HTML を読み込むことができる Web ビューコンポーネントをサポートしています。そのようなページは、ブラウザ固有のオブジェクトウィンドウ、ドキュメント、ナビゲータ、および場所を引き続きサポートします。

以前の dom 操作は vue の MVVM モードに変更されました

現在のフロントエンドの傾向は、domize を解除し、代わりに mvvm モードを使用することです。この記述方法により、コードの行数が大幅に削減され、同時に差分レンダリングのパフォーマンスが向上します。
uni-app は、vue のデータバインディングメソッドを使用して、js と dom インターフェイス間の相互作用の問題を解決します。

ビューの表示テキストなど、特定の dom 要素の表示内容を変更したい場合:

以前は、ID がビューに設定され、その後、 jsのセレクターを通じてdom要素を取得し、さらに渡されたjsは代入操作を行ってdom要素の属性や値を変更します。

以下はコードの一部を示しています。ページには表示されたテキスト領域とボタンがあります。ボタンをクリックすると、テキスト領域の値が変更されます。

<html>  
   <head>  
       <script type="text/javascript">  
           document.addEventListener("DOMContentLoaded",function () {  
               document.getElementById("spana").innerText="456"  
            })  
           function changetextvalue () {  
               document.getElementById("spana").innerText="789"  
            }  
       </script>  
   </head>  
   <body>  
       <span id="spana">123</span>  
       <button type="button" onclick="changetextvalue()">修改为789</button>  
   </body>  
</html>

現在のアプローチは vue. のバインディングモードで、js 変数をこの dom 要素にバインドし、スクリプト内の js 変数の値を変更すると、dom が自動的に変更され、ページが自動的に更新されてレンダリングされます

<template>  
   <view>  
       <text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->  
       <button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->  
   </view>  
</template>  
<script>  
   export default {  
        data() {  
           return {  
               textvalue:"123",  
               buttontype:"primary"  
            };  
        },  
        onLoad() {  
           this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456  
        },  
       methods: {  
            changetextvalue() {  
               this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789  
            }  
        }  
    }  
</script>

小さなプログラムのデータバインディングは学んだことがあるが、vue については理解していない場合は、次のことに注意してください:

アプレットのデータバインディングは vue を参照していますが、一部を自分で変更しました。 uni-app では標準 vue のみがサポートされており、ミニプログラムのデータバインディング構文はサポートされていません。

vue は自動であるため、ミニプログラムの setData は uni-app に存在しません。双方向のデータバインディング。割り当てを通じてデータを直接変更します。データがインターフェイスにバインドされている場合、インターフェイスは自動的に更新され、

#uni-appのAPIはミニプログラムを参照しているため、

などのブラウザのJS APIとは大きく異なります。

alert,confirm 改成 uni.showmodel
ajax 改成 uni.request
cookie、session 没有了，local.storage 改成 uni.storage

uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可。

uni-app在不同的端，支持条件编译，无限制的使用各端独有的api，

css的变化

标准的css基本都是支持的。

选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。

page{  
}

单位方面，px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。尺寸单位文档

uni-app推荐使用flex布局，并默认就是flex布局，这个布局思路和传统流式布局有点区别。但flex的有趣在于，不管是什么技术都支持这种排版，web、小程序/快应用、weex/rn、原生的iOS、Android开发，全都支持flex。它是通吃所有端的新一代布局方案。相关教程请自行百度学习。

uni-app的vue文件里支持所有web排版方式，不管是流式还是flex。但nvue里，只支持flex，因为它在app端是使用原生排版引擎渲染的。

注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能。在小程序端，如果要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。

工程结构和页面管理

uni-app的工程结构有单独的要求

每个可显示的页面，都必须在 pages.json 中注册。如果你开发过小程序，那么pages.json类似app.json。如果你熟悉vue，这里没有vue的路由，都是在pages.json里管理。

原来工程的首页一般是index.html或default.html，是在web server里配的。而uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。

app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。

在vue中，以前的js事件监听概念改为了生命周期概念。

	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）

如果你熟悉小程序开发的话，对比变化如下：

原来app.json被一拆为二。页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json
原来的app.js和app.wxss被合并到了app.vue中

更多编程相关知识，请访问：编程视频！！

以上がuniappとvueの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

json css ecmascript html if switch for 封装 select checkbox Cookie Session map JS 对象事件 default dom promise location alert 选择器 flex canvas li android ios 微信小程序 uni-app

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：html5とh5は同じ概念ですか?次の記事：html5とh5は同じ概念ですか?

続きを見る