uni-app学习

uniapp是采用vue.js语法，api风格接近微信小程序。
<view>标签相当于html中的<div>
宽高单位rpx通微信小程序的rpx一样，是响应式布局单位，750rpx规定为屏幕的宽度。
uniapp不能使用*选择器
小程序page相当于body节点
定义在App.vue里面的样式是全局样式，作用于每一个页面。
在pages目录下的vue文件中定义的样式为局部样式，只作用在对于的页面，会覆盖App.vue中相同的选择器。
v-bind作用是把后面内容解析成动态表达式。比如：

<template>
	<view>
		<image src="imgUrl"></image>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				imgUrl: "www.pic.com/xxxx"
			}
		}
	}
</script>

<style>
</style>

image的src路径是一串字符串，不能通过data里面参数动态替换，如果需要实现动态替换图片地址，需要使用v-bind：

		<image v-bind:src="imgUrl"></image>

简写：

		<image :src="imgUrl"></image>

如何给父组件传递事件

1、子页面中，定义点击事件childClick

childClick(){
	this.$emit('itemClick')
}

在点击事件中，通过$emit触发自定义事件itemClick
2、在父组件中声明子组件中的自定义事件itemClick

@itemClick='parentClick'

然后实现parentClick函数：

parentClick(){
	///todo
}

富文本样式

在替换富文本样式时，样式需要定义在全局文件App.vue中，比如：

	.gomeImgLoad{
		width:750rpx !important;
		height: auto !important;
	}

字体文件

放在本地项目内不能上传，可以放在码云这些线上托管平台，替换本地的引用路径为线上。

打包

1、小程序
需要配置appid，没有的话，需要注册一个。
2、H5

• 先用HBuider工具发布H5，只需要填写页面标题和路由模式即可。
• 打包成功之后在该目录运行cmd

live-server -port=3344

任意指定一个端口，就可以在本地部署该H5系统。
如果没有live-server环境，需要安装：

npm install -g live-server

3、android
相应配置即可

参考：uni-app介绍
Uni-App从入门到实战
npm和cnpm（windows）安装步骤