uni-app学习

系统管理员 2023-01-02 14:22 58阅读 0赞

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：

简写：

# 如何给父组件传递事件 #

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]  
[Uni-App从入门到实战][Uni-App]  
[npm和cnpm（windows）安装步骤][npm_cnpm_windows]

[uni-app]: https://uniapp.dcloud.io/README
[Uni-App]: https://ke.qq.com/course/2145710?taid=9161354223074734
[npm_cnpm_windows]: https://blog.csdn.net/wjnf012/article/details/80422313