淺談VUE uni-app 核心知識
規范
a. 頁面文件遵循vue單文件組件規范
<!-- 模板塊 --> <template> <view class="main"> {{msg}} </view> </template> <!-- 腳本塊 --> <script> export default { data(){ return { msg:'Hello' } } } </script> <!-- 樣式塊 --> <style> .main{ background-color:#ccc; } </style>
b. 組件標簽靠近小程序規范
<template> <view>hello</view> <text> wang </view> </template>
c. 接口能力(JS API)靠近微信小程序規范
//獲取位置信息 uni.getLocation({ type:'wgs84', success:function(res){ console.log('當前位置的經度:'+res.longitude); console.log('當前位置的緯度:'+res.latitude); } });
e. 數據綁定及事件處理使用Vue.js 規范
<template> <view @click="changeMsg"> {{msg}} </veiw> </template> <script> export defalut{ data(){ return { msg:'hello' } }, methods:{ changeMsg(){ this.msg:'world' } } } </scrip>
特色
a. 條件編譯
#ifdef APP-PLUS 僅出現在APP平臺下的代碼 #endif #ifndef H5 除瞭H5平臺,其它平臺均存在的代碼 #endif #ifdef H5 || MP-WEIXION 在H5平臺或微信信小程序平臺存在的代碼 #endif
b. App端的Nvue開發
uni-app App端內置瞭一個基於 weex 改進的原生渲染引擎,提供瞭原生渲染能力。
在App端,如果使用vue頁面,則使用webview渲染;如果使用nvue頁面,則使用原生渲染。
c. HTML5+
uni-app App端內置HTML5+ 引擎;讓 js 可以直接調用豐富的原生能力。一些比較復雜的功能,可以直接調用App原生插件來實現。隻能在App端使用,無法在H5和小程序中使用
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- 分析uniapp入門之nvue爬坑記
- uniapp使用條件編譯#ifdef(跨平臺設備兼容)
- uniapp語音識別(訊飛語音)轉文字
- uniapp中renderjs使用與傳值問題
- uniapp自定義彈框的方法