浅谈VUE uni-app 核心知识

编辑: admin 分类: javascript 发布时间: 2021-11-17 来源:互联网
目录
  • 规范
    • a. 页面文件遵循vue单文件组件规范
    • b. 组件标签靠近小程序规范
    • c. 接口能力(JS API)靠近微信小程序规范
    • e. 数据绑定及事件处理使用Vue.js 规范
  • 特色
    • a. 条件编译
    • b. App端的Nvue开发
    • c. HTML5+
  • 总结

    规范

    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'
    			}
    		}
    	}
    </scri海外服务器https://www.68idc.cnp>
    

    特色

    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和小程序中使用

    总结

    本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注hwidc的更多内容!