社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 uni-app 介绍uni-app之字体库、自定义组件、打包和新闻实战

介绍uni-app之字体库、自定义组件、打包和新闻实战

coldplay.xixi
coldplay.xixi
Jan 25, 2021 am 09:55 AM
uni-app 字体库 自定义组件

介绍uni-app之字体库、自定义组件、打包和新闻实战

推荐（免费）：uni-app开发教程

文章目录

  • 前言
  • 一、使用iconfont字体库
  • 二、自定义组件和组件间的消息传递
  • 三、打包
  • 四、实战案例--新闻列表和详情
  • 总结

前言

本文主要介绍了4方面内容：
在uni-app项目中使用iconfont提供的图标字体库，美化页面；
实现自定义组件，并且可以自定义属性和实现父子组件之间的消息传递；
微信小程序预览和真机测试，APP端云打包和本地打包；
新闻列表和详情实战练习。

一、使用iconfont字体库

uni-app中可以使用iconfont（https://www.iconfont.cn/）提供的图标字体。

大致过程如下：
先在iconfont中根据关键字选择所需图标，并添加至购物车；接下来创建项目，并将之前选择的图标添加至项目，并下载字体，如下：
uniapp iconfont create project download

解压下载的压缩包，将其中的iconfont.css移动至项目目录的static目录下新建的font目录下，并进行修改，只保留移动平台所需要的字体源就可以了，如下：

@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQAAAsAAAAACHwAAAOxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqFCIQiATYCJAMICwYABCAFhG0HLxtHBxHVmxnJPhbT7QzKF5SRijPBQ9X5vZ7poDv8ENdklpxkdYVYd9AnKb65+dU1KkK1Bcl58H95xgvs9NL89T/HTBeJ9Tz/SueUUZS0N8DxgAbUjdsVUYAcmN8CO4cgrXzxPgSgSaUY0bBxy444kQTLBCBGDhvSD2fLjJwgCZw6u7BXItZgw2ksNS4Bq/PfFx8pL5xgYDMJGtoObjSQum9VWGDODc+lZ4pAcpwT0A6BCRQDEkRH0d0as0wXY6IdtyRzulki4K0Kh1Px1f7jgQBhJ1C7EZssfk6SWPpU1QZ/XwJ+4C4Ix6Yy8Pt9flbI5OJoqZS7k14WEo7ABpdreRD7XEsHNzQvCmm9zKKXdXtGcFeM3doZrUO7hybsieuil52Nt286N1d5oWM9P20tKc4VxFnUWG2hlwsPEiPChd5KyXHtuLCjCz2poxWKnR7aENdlQzBmWnDj9OVpxoruqC1BWBmtjZ5jm2u5e86OLYnTQ9u7dkno2L1Lp+YhvSy6OEfljsnv3KVjp+DyuArNkjUbYl+0WaweuZqrs2qpxg9tpi85x11WrdUZtULtUZW+VEhpYa5vdRF3ppuLva/hyfRwrVdK78RMFSoTUYjBSL+5/oBrdQt1Zu7SNY90c+clx7izqo06PXbl2NNATG2J8jCEp7dX8Hl7pfZek6FYQyI8O+PYz/tJ92fXCWQHfhR41xfHzQ7Mzwn8zKsuKEiY65vf1F7ZO78wqknZQJbZd2ByvqxYf0HDtm0D2V//thETtfp47PUa7yP/1PVOKKzZZ2b61RrTr9WI9PVMyJpZEGHYK14tvzSxx5N60jXMnT/VpczY9NzlMa6sbyNwNDKpC0DYMp+Zjf/+v2FfcutBfXw1vzldEoBH2aOOYDBsSZZ5wfkleQT82ZKFPdKVBRZD2hIxb3AX/5fYpNFAGPZH8mSrNwZqp8CpSxAMHKSAiZNspMQWgw0XFcGOkzqgKaLJYRdRjMdESAUUshBA4OcAGHi5ACZ+LiMl9jHYiOUz2PELEzRHZxF1potcsfoGit4w0fCndZSLI5v5ovaG+X302pTltBe0rDGqQurmOlzQIzaUz1ybMbHKSS08huMQyiobRguLWW5iZOmLwiin8zRAAT0GmCAG/hArI8IFp4MN3/v5G2DmzUGPTnR1BF8ApbCOTlQE0gJkp74Wdb2WyYUPMzWGwbyIUYQTokUnOMK0QGR51gYYMQLLhmSmIVI/XqoO59een+4QoAkMhginmNj6i+zFOQAAAA==') format('woff2');}.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}.iconbooks:before {
  content: "\e709";}
登录后复制

此时再在App.vue全局导入该css样式，如下：

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
	global.isLogin = function() {
		try {
			var suid = uni.getStorageSync('suid');
			var srand = uni.getStorageSync('srand');
		} catch (e) {
			//TODO handle the exception
		}
		if (suid == '' || srand == '') {
			return false;
		} else {
			return [suid, srand];
		}
	}</script><style>
	/* 引入自定义图标库 */
	@import url('/static/font/iconfont.css');
	
	/*每个页面公共css */
	.red {
		color: #ff0000;
	}</style>
登录后复制

需要注意：
使用@import导入外部样式文件时，需要将其放于style模块的最前面，且最后要加分号，否则会导入失败。

index.vue中使用字体样式如下：

<template>
	<view>
		<view class="iconfont iconbooks">
			书籍		</view>
	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			
		}
	}</script><style></style>
登录后复制

显示：
uniapp iconfont set

显然，在小程序和APP中均正常显示。

二、自定义组件和组件间的消息传递

组件为uni-app的开发提供了很多方便，加速了开发。
组件也可以复用和自定义，具有很大的灵活性。

自定义组件前，需要在项目目录中创建components目录，右键components目录选择新建组件，在创建组件时可以选择模板，也可以点击右上角自定义模板，在弹出的目录中创建模板名.txt，里边写入模板内容即可，例如创建带有属性的模板.txt如下：

<template name="组件名称">
	<view>
		......	</view></template><script>
	export default {
		name: "组件名称",
		//属性
		props: {
			属性名称: {
				type: String, //属性类型
				value: "值"
			},
			......
		},
		//组件生命周期
		created: function(e) {

		},
		methods: {
			函数名称: function(obj) {

			},
		}
	}</script><style>
	**组件样式**</style>
登录后复制

创建组件时，选择自定义的模板，名为myinput.vue，修改如下：

<template name="myinput">
	<view>
		<input type="text" value="" placeholder="Input your name" class="myinput" />
		<button type="primary">提交</button>
	</view></template><script>
	export default {
		name: "myinput",
		//属性
		// props: {
		// 	属性名称: {
		// 		type: String, //属性类型
		// 		value: "值"
		// 	},
		// 	......
		// },
		//组件生命周期
		created: function(e) {

		},
		methods: {},
	}</script><style>
	.myinput {
		padding: 20px;
		background: #76F32B;
	}</style>
登录后复制

在需要使用自定义组件的页面中，先导入自定义组件，如下：

import myinput from '../../components/myinput.vue';
登录后复制

再在当前页面注册该组件，如下：

components: {
    myinput
}
登录后复制

最后使用即可，如index.vue如下：

<template>
	<view>
		<myinput>姓名</myinput>
	</view></template><script>
	import myinput from '../../components/myinput.vue';
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			
		},
		components: {
			myinput		}
	}</script><style></style>
登录后复制

显示：
uniapp define component basic

显然，实现了微信小程序端和APP端使用自定义组件。

还可以定义props属性，可以给组件动态设置属性，如下：

<template name="myinput">
	<view>
		<input type="text" value="" :placeholder="placeholder" class="myinput" />
		<button type="primary" @click="submit">提交</button>
	</view></template><script>
	export default {
		name: "myinput",
		//属性
		props: {
			placeholder: {
				type: String, //属性类型
				value: "Please input your ..."
			}
		},
		//组件生命周期
		created: function(e) {

		},
		methods: {
			submit: function() {
				console.log('submit successfully')
			}
		},
	}</script><style>
	.myinput {
		padding: 20px;
		background: #76F32B;
	}</style>
登录后复制

将属性定义在props对象中，同时在使用该组件时，给属性传值，index.vue如下：

<template>
	<view>
		<myinput placeholder="请输入姓名">姓名</myinput>
		<myinput placeholder="请输入年龄">年龄</myinput>
	</view></template><script>
	import myinput from '../../components/myinput.vue';
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			
		},
		components: {
			myinput		}
	}</script><style></style>
登录后复制

显示：
uniapp define component props

实现了多端的属性定义。

还可以实现组件点击触发改变父级元素的事件或方法，即激活父级组件，例如myinput组件激活index.vue中的元素、触发事件，需要使用$emit，用来模拟执行事件，第一个参数是事件，其余参数是事件的参数；同时在父级组件中使用该组件时，通过v-on绑定父级组件中的事件，实现组件之间的通信。

如下：

<template name="myinput">
	<view>
		<input type="text" value="" :placeholder="placeholder" class="myinput" />
		<button type="primary" @click="submit">提交</button>
	</view></template><script>
	export default {
		name: "myinput",
		//属性
		props: {
			placeholder: {
				type: String, //属性类型
				value: "Please input your ..."
			}
		},
		//组件生命周期
		created: function(e) {

		},
		methods: {
			submit: function() {
				this.$emit('change_parent', 'hi...');
				console.log('submit successfully')
			}
		},
	}</script><style>
	.myinput {
		padding: 20px;
		background: #76F32B;
	}</style>
登录后复制

index.vue如下：

<template>
	<view>
		<text>{{info}}</text>
		<myinput placeholder="请输入姓名" v-on:change_parent="change_parent">姓名</myinput>
		<myinput placeholder="请输入年龄">年龄</myinput>
		
	</view></template><script>
	import myinput from '../../components/myinput.vue';
	export default {
		data() {
			return {
				info: 'hello'
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			change_parent: function(text){
				this.info = text			}
		},
		components: {
			myinput		}
	}</script><style></style>
登录后复制

显示：
uniapp define component communicate

可以看到，实现了通信和事件传递，子组件成功调用了父组件的事件。

同时，我们也可以使用GraceUI框架，其全称为Grace User Interface，是基于uni-app及小程序的超级前端框架，官网地址为http://www.graceui.com/，提供了更丰富的组件、布局及界面库，可以通过uni-app方式实现一套代码多端发布、大大提高开发速度，也可以作为自定义组件进行二次开发。

三、打包

对于小程序来说，可以申请测试号，方便开发者开发和体验小程序的各种能力，并使用此帐号在开发者工具创建项目进行开发测试，以及真机预览体验。
只需访问https://developers.weixin.qq.com/sandbox，并扫码登录后，即可查看到已为自己分配好的测试帐号信息，就可以使用提供的测试号的AppID和AppSecret进行开发和测试，还可以在PC端或手机端进行真机预览和调试。

如下：
uniapp package miniprogram preview

显然，实现了在真机预览小程序。

对于APP来说，需要打包，有云打包和本地打包两种方式可以选择，其中云打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包，通过菜单栏中的发行->原生App-云打包，打开App云端打包对话框，选择所需选项并提交，以Android打包为例，如下：
uniapp package app Android cloud

选择之后，直接点击打包按钮等待获取公共测试证书、并成功打包即可。

四、实战案例–新闻列表和详情

uni-app实战实现新闻列表和详情，包括API交互、网络请求、列表循环和页面参数传递等。
其中，新闻API可以使用聚合数据https://www.juhe.cn/、极速数据https://www.jisuapi.com/等API平台提供的新闻数据接口，每天都会有免费请求次数，足够进行学习和测试，只需要注册、认证获取到相应apikey并进行替换即可。

先搭建列表页轮廓，index.vue如下：

<template>
	<view>
		<navigator class="news-list" url="../info/info">
			<image src="http://pic1.win4000.com/wallpaper/3/58a1558bec460_270_185.jpg" mode="widthFix"></image>
			<view class="news-title">news...</view>
		</navigator>
	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
		},
	}</script><style>
	view{
		width: 100%;
	}
	.news-list{
		display: flex;
		width: 94%;
		padding: 10upx 3%;
		flex-wrap: nowrap;
	}
	.news-list image{
		width: 200upx;
		margin-right: 12upx;
		flex-shrink: 0;
	}
	.news-title{
		width: 100%;
		height: auto;
		background: #900;
	}</style>
登录后复制

其中，通过flex和其他布局样式来实现列表。

pages下新建info目录，下新建info.vue用于展示新闻详情，如下：

<template>
	<view>
		info...	</view></template><script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}</script><style></style>
登录后复制

显示：
uniapp practice news first

可以看到，实现了新闻图片和标题的布局展示。

现在进一步实现从接口获取数据，将新闻详情链接通过参数传递从新闻列表页传到新闻详情页，如下：

<template>
	<view style="flex-wrap: wrap;">
		<navigator class="news-list" :url="&#39;../info/info?link=&#39;+item.url" v-for="(item, index) in news">
			<image :src="item.pic" mode="widthFix"></image>
			<view class="news-title">{{item.title}}</view>
		</navigator>
	</view></template><script>
	var _self;
	export default {
		data() {
			return {
				news: []
			}
		},
		onLoad() {
			_self = this;
			this.getNews()
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			getNews: function(){
				uni.request({
					url: 'https://api.jisuapi.com/news/get?channel=头条&start=100&num=20&appkey=66487d31a1xxxxxx',
					success:function(res){
						console.log(res)
						_self.news = res.data.result.list					}
				})
			}
		},
	}</script><style>
	view{
		width: 100%;
	}
	.news-list{
		display: flex;
		width: 94%;
		padding: 10upx 3%;
		flex-wrap: nowrap;
		margin: 12upx 0;
	}
	.news-list image{
		width: 200upx;
		margin-right: 12upx;
		flex-shrink: 0;
	}
	.news-title{
		width: 100%;
		height: auto;
		background: #F0AD4E;
		font-size: 28upx;
	}</style>
登录后复制

info.vue如下：

<template>
	<view>
		info...	</view></template><script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad:function(e){
			console.log(e);
		},
		methods: {
			
		}
	}</script><style></style>
登录后复制

演示如下：
uniapp practice news link

显然，可以看到新闻列表，包括图片和标题，点击会将新闻链接传递给info页面。

此时再实现在info页面展示新闻详情，info.vue完善如下：

<template>
	<view>
		<web-view :src="link"></web-view>
	</view></template><script>
	var _self;
	export default {
		data() {
			return {
				link: ""
			}
		},
		onLoad:function(e){
			_self = this;
			console.log(e);
			_self.link = e.link;
		},
		methods: {
			
		}
	}</script><style></style>
登录后复制

显示：
uniapp practice news detail

显然，现在进入info页面已经可以查看新闻详情。

总结

uni-app开发可以借助外部的资源和工具，比如iconfont提供的图标字体；组件加速了uni-app的开发，自定义组件提供了更大的灵活性，还可以实现组件间的通信；打包对于小程序和APP有所不同；新闻列表和详情页考察uni-app的样式设计、页面参数传递和第三方API的使用。

更多相关学习敬请关注uni-app教程栏目！

以上是介绍uni-app之字体库、自定义组件、打包和新闻实战的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7433
15
CakePHP 教程
1359
52
steam的账户名称是什么格式
76
11
win11激活密钥永久
29
19
显示更多
Related knowledge
VSCode中如何开发uni-app？（教程分享） VSCode中如何开发uni-app？（教程分享） May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app？下面本篇文章给大家分享一下VSCode中开发uni-app的教程，这可能是最好、最详细的教程了。快来看看！

利用uniapp开发一个简单的地图导航 利用uniapp开发一个简单的地图导航 Jun 09, 2022 pm 07:46 PM

怎么利用uniapp开发一个简单的地图导航？本篇文章就来为大家提供一个制作简单地图的思路，希望对大家有所帮助！

聊聊如何利用uniapp开发一个贪吃蛇小游戏！ 聊聊如何利用uniapp开发一个贪吃蛇小游戏！ May 20, 2022 pm 07:56 PM

如何利用uniapp开发一个贪吃蛇小游戏？下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏，希望对大家有所帮助！

uni-app vue3接口请求怎么封装 uni-app vue3接口请求怎么封装 May 11, 2023 pm 07:28 PM

uni-app接口，全局方法封装1.在根目录创建一个api文件，在api文件夹中创建api.js，baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

手把手带你开发一个uni-app日历插件（并发布） 手把手带你开发一个uni-app日历插件（并发布） Jun 30, 2022 pm 08:13 PM

本篇文章手把手带大家开发一个uni-app日历插件，介绍下一款日历插件是如何从开发到发布的，希望对大家有所帮助！

实例讲解uniapp实现多选框的全选功能 实例讲解uniapp实现多选框的全选功能 Jun 22, 2022 am 11:57 AM

本篇文章给大家带来了关于uniapp的相关知识，其中主要整理了实现多选框的全选功能的相关问题，无法实现全选的原因是动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件，下面一起来看一下，希望对大家有帮助。

聊聊uniapp的scroll-view下拉加载 聊聊uniapp的scroll-view下拉加载 Jul 14, 2022 pm 09:07 PM

uniapp怎么实现scroll-view下拉加载？下面本篇文章聊聊uniapp微信小程序scroll-view的下拉加载，希望对大家有所帮助！

实例详解uniapp如何实现电话录音功能（附代码） 实例详解uniapp如何实现电话录音功能（附代码） Jan 05, 2023 pm 04:41 PM

本篇文章给大家带来了关于uniapp的相关知识，其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能，感兴趣的朋友一起来看一下吧，希望对大家有帮助。

See all articles