ホームページ > 記事 > ウェブフロントエンド > uni-app のフォントライブラリ、カスタムコンポーネント、パッケージング、ニュースの実践方法を紹介します。

uni-app のフォントライブラリ、カスタムコンポーネント、パッケージング、ニュースの実践方法を紹介します。

coldplay.xixi転載: 2021-01-25 09:55:523488ブラウズ

推奨 (無料): ユニアプリ開発チュートリアル

記事目次

まえがき
1. iconfont フォントライブラリの使用
2. カスタムコンポーネントとコンポーネント間のメッセージング
3 、パッケージ化
4. 実践事例 -- ニュースリストと詳細
概要

##まえがき

この記事の主な導入部分コンテンツの 4 つの側面:

uni-app プロジェクトの iconfont によって提供されるアイコンフォントライブラリを使用してページを美しくする;
カスタムコンポーネントを実装し、属性をカスタマイズして親コンポーネントと子コンポーネント間のメッセージ受け渡しを実装できる;
WeChat ミニプログラムのプレビューと実際のデバイスのテスト、APP クラウドパッケージ化とローカルパッケージ化;
ニュースリストと詳細な実践演習。

1. iconfont フォントライブラリを使用する

iconfont (https://www.iconfont.cn/) は、Uni-アプリアイコンのフォント。

一般的なプロセスは次のとおりです:

まず、iconfont のキーワードに従って必要なアイコンを選択してショッピングカートに追加し、次にプロジェクトを作成し、前に選択したアイコンをプロジェクトに追加して、

uniapp iconfont create project download

ダウンロードした圧縮パッケージを解凍し、その中にある iconfont.css をプロジェクトディレクトリの static ディレクトリに新しく作成したフォントディレクトリに移動し、修正します。モバイルプラットフォームに必要なものだけを保持するには、次のようにフォントソースだけで十分です:

@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";}

この時点で、次のように

CSS スタイルを App.vue にグローバルにインポートします:

<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 を使用して外部スタイルファイルをインポートする場合、ファイルの の前に を配置する必要があります。スタイルモジュールを追加し、最後に とセミコロン を追加します。そうしないと、インポートは失敗します。

index.vue で使用されるフォントスタイルは次のとおりです。

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

Display:

uniapp iconfont set ##明らかに、ミニプログラムとミニプログラムの両方で正常に表示されます。アプリ。

2. カスタムコンポーネントとコンポーネント間のメッセージ受け渡し

コンポーネントは、ユニアプリの開発に多くの利便性を提供し、開発をスピードアップします。

コンポーネントは再利用およびカスタマイズすることもできるため、優れた

柔軟性を実現します。
コンポーネントをカスタマイズする前に、プロジェクトディレクトリに components

ディレクトリを作成する必要があります。コンポーネントディレクトリを右クリックし、[新しいコンポーネント] を選択します。コンポーネントを作成するときは、テンプレートまたは右上隅の

をクリックしてカスタマイズします。テンプレート を定義し、ポップアップディレクトリに テンプレート名.txt を作成し、その中にテンプレートの内容を書き込みます。例: # を作成します。 ##template.txt の属性は次のとおりです。 <pre class="brush:php;toolbar:false"><template name="组件名称"> <view> ...... </view></template><script> export default { name: "组件名称", //属性 props: { 属性名称: { type: String, //属性类型 value: "值" }, ...... }, //组件生命周期 created: function(e) { }, methods: { 函数名称: function(obj) { }, } }</script><style> **组件样式**</style></pre>コンポーネントを作成するときは、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';

最後に使用します。たとえば、index.vue は次のとおりです。

components: {
    myinput
}

Display:

明らかに、WeChat アプレットと APP はカスタムコンポーネントを使用します。

props
属性を定義することもでき、次のようにコンポーネント uniapp define component basic の属性

を動的に設定することもできます。

<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>

props で属性を定義するオブジェクトを使用すると同時に、このコンポーネントを使用するときに、属性に値を渡します。index.vue は次のようになります。

<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>

Display: は、マルチ端末属性の定義。

コンポーネントのクリックを実装して、親要素を変更するイベントまたはメソッドをトリガーする、つまり親コンポーネントをアクティブ化することもできます。たとえば、myinput コンポーネントは、index.vue 内の要素をアクティブ化し、イベントをトリガーします。

$emit
を使用するには、 uniapp define component props 実行イベントをシミュレートするために使用します

、最初のパラメータはイベント、残りのパラメータはイベントのパラメータです。同時に、コンポーネントを使用するときは、親コンポーネントで、

v-on

を介してバインドします。親コンポーネントでイベントを定義し、コンポーネント間の通信を実装します。

は次のとおりです:

<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>

index.vue は次のとおりです:

<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>

表示:

ご覧のとおり、通信とイベントの実装が成功した場合、子コンポーネントは親コンポーネントのイベントを正常に呼び出します。

同時に、GraceUI フレームワーク (正式名は

Grace User Interface
) も使用できます。これは、Uni ベースのスーパー uniapp define component communicate フロントエンドフレームワーク

です。 -アプリと小さなプログラム. 公式 Web サイトのアドレスは http://www.graceui.com/ です.

より豊富な

コンポーネント、レイアウト、インターフェイスライブラリを提供します. uni を通じてコードセットのマルチエンドリリースを実現できます-appにより、開発速度が大幅に向上し、二次開発用のカスタムコンポーネントとしても使用できます。

3. パッケージング

对于小程序来说，可以申请测试号，方便开发者开发和体验小程序的各种能力，并使用此帐号在开发者工具创建项目进行开发测试，以及真机预览体验。
只需访问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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：ユニアプリでの Vue の使い方を学ぶ次の記事：ユニアプリでの Vue の使い方を学ぶ

続きを見る

uni-app のフォント ライブラリ、カスタム コンポーネント、パッケージング、ニュースの実践方法を紹介します。

関連記事

uni-app のフォントライブラリ、カスタムコンポーネント、パッケージング、ニュースの実践方法を紹介します。