uni-app使用及问题记录：全局变量、获取当前设备大小、css背景图片

第一次使用uni-app做开发，之前学过h5，JavaWeb开发，但是对于vue.js和小程序不怎么了解，所以一开始做的时候有点懵，在学习过程中遇到了几个问题来记录一下。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，编写一套代码，可发布到iOS、Android、Web各种小程序多个平台。

1.vue和h5的区别

详细的内容可以参考官方文档https://ask.dcloud.net.cn/article/35657 。很详细很具体，下面是我认为的最为重要的几点，对于快速使用uni-app帮助很大。

网络模式和文件类型

原来大多是B/S模式；现在主要是C/S模式。
原来是html文件，开发和运行都是html文件；现在是vue文件，开发时是vue文件，经过编译后，运行时是js文件（所以HBulider X开发时，会有编译的过程）。

代码结构和标签

原来是html标签下面包含着style标签和script标签；现在是template、style、script是并列的三个一级节点，template下面有一个根view（只能有这一个），在这个view下面写具体内容。

<template>  
    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

相应的，以前是html标签，比如<div>，现在是小程序组件，比如<view>。标签属于浏览器内置的内容，而组件是可以自由扩展的，比如可以把一段js封装成函数或模块，也可以把一个ui控件封装成一个组件。
常用的html标签和uni-app内置组件的映射有：
div改为view、a改为navigator、span和font改为text、img改为image等等。
详细可参考https://ask.dcloud.net.cn/article/35657 。

2.uni-app项目结构

App.vue： uni-app的主组件，可以调用应用生命周期函数、配置全局样式、配置全局的存储globalData等等。
main.js： uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件。
manifest.json： 应用的配置文件，用于指定应用的名称、图标、权限等。
pages.json： 对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
uni.scss： 这是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。

在pages文件夹下创建页面时，会自动在pages.json中注册。如果某个页面删除，也要删掉pages.json中对应的文件路径。
页面的公共css可以在App.vue中style节点下添加。
全局变量可以在App.vue中添加。

3.问题记录

设置全局变量

在APP.vue中添加全局变量：

export default {  
        globalData: {  
            text: 'text'  //添加全局变量text，赋值为text
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  

赋值和取值：

getApp().globalData.text = 'test' //赋值，修改值
console.log(getApp().globalData.text) //取值，在控制台输出，test

还有其他方法可参考https://ask.dcloud.net.cn/article/35021

获取显示设备的宽度、高度

export default {
		data() {
			return {
				height:"",
				width:"",
				Sheight:"",
				Swidth:"",
			}
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
			    success: function (res) {
					console.log("获取屏幕宽度和高度------")
					that.width = res.windowWidth;
					that.height =res.windowHeight;
					that.Sheight = "height:"+res.windowHeight+"px";
					that.Swidth = "width:"+res.windowWidth+"px";
			    }
			});
		},
		methods: {
			
		},
	}

动态配置组件的style：

<view class="item" :style="Sheight">

<view>

css背景图片不能使用本地文件

官方说因为小程序不支持本地图片，只支持网络访问或者base64，所以uniapp也不支持。
所以要么使用图片外链，要么将图片转换成base64（图片转换base64的网站：http://tool.chinaz.com/tools/imgtobase ）