ホームページ >ウェブフロントエンド >uni-app >uni-app のフォント ライブラリ、カスタム コンポーネント、パッケージング、ニュースの実践方法を紹介します。
推奨 (無料): ユニアプリ開発チュートリアル
記事目次
##まえがき
この記事の主な導入部分コンテンツの 4 つの側面: uni-app プロジェクトの iconfont によって提供されるアイコン フォント ライブラリを使用してページを美しくする;
カスタム コンポーネントを実装し、属性をカスタマイズして親コンポーネントと子コンポーネント間のメッセージ受け渡しを実装できる;
WeChat ミニプログラムのプレビューと実際のデバイスのテスト、APP クラウド パッケージ化とローカル パッケージ化;
ニュース リストと詳細な実践演習。
1. iconfont フォント ライブラリを使用する
iconfont (https://www.iconfont.cn/) は、Uni-アプリアイコンのフォント。
一般的なプロセスは次のとおりです: まず、iconfont のキーワードに従って必要なアイコンを選択してショッピング カートに追加し、次にプロジェクトを作成し、前に選択したアイコンをプロジェクトに追加して、
@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 を使用して外部スタイル ファイルをインポートする場合、ファイルの
の前に を配置する必要があります。スタイル モジュールを追加し、最後に とセミコロン を追加します。そうしないと、インポートは失敗します。
<template> <view> <view class="iconfont iconbooks"> 书籍 </view> </view></template><script> export default { data() { return { } }, onLoad() { }, onShow() { }, onHide() { }, methods: { } }</script><style></style>Display:
##明らかに、ミニ プログラムとミニ プログラムの両方で正常に表示されます。アプリ。
コンポーネントは、ユニアプリの開発に多くの利便性を提供し、開発をスピードアップします。
コンポーネントは再利用およびカスタマイズすることもできるため、優れた 柔軟性を実現します。
コンポーネントをカスタマイズする前に、プロジェクト ディレクトリに 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
属性を定義することもでき、次のようにコンポーネント の属性
<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
を使用するには、 実行イベントをシミュレートするために使用します
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 ベースのスーパー フロントエンド フレームワーク
より豊富な
コンポーネント、レイアウト、インターフェイス ライブラリを提供します. uni を通じてコード セットのマルチエンド リリースを実現できます-appにより、開発速度が大幅に向上し、二次開発用のカスタムコンポーネントとしても使用できます。3. パッケージング
对于小程序来说,可以申请测试号,方便开发者开发和体验小程序的各种能力,并使用此帐号在开发者工具创建项目进行开发测试,以及真机预览体验。
只需访问https://developers.weixin.qq.com/sandbox,并扫码登录后,即可查看到已为自己分配好的测试帐号信息,就可以使用提供的测试号的AppID
和AppSecret
进行开发和测试,还可以在PC端或手机端进行真机预览和调试。
如下:
显然,实现了在真机预览小程序。
对于APP来说,需要打包,有云打包和本地打包两种方式可以选择,其中云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包,通过菜单栏中的发行->原生App-云打包
,打开App云端打包
对话框,选择所需选项并提交,以Android打包为例,如下:
选择之后,直接点击打包按钮等待获取公共测试证书、并成功打包即可。
四、实战案例–新闻列表和详情
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>
显示:
可以看到,实现了新闻图片和标题的布局展示。
现在进一步实现从接口获取数据,将新闻详情链接通过参数传递从新闻列表页传到新闻详情页,如下:
<template> <view style="flex-wrap: wrap;"> <navigator class="news-list" :url="'../info/info?link='+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>
演示如下:
显然,可以看到新闻列表,包括图片和标题,点击会将新闻链接传递给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>
显示:
显然,现在进入info页面已经可以查看新闻详情。
总结
uni-app开发可以借助外部的资源和工具,比如iconfont提供的图标字体;组件加速了uni-app的开发,自定义组件提供了更大的灵活性,还可以实现组件间的通信;打包对于小程序和APP有所不同;新闻列表和详情页考察uni-app的样式设计、页面参数传递和第三方API的使用。
更多相关学习敬请关注uni-app教程栏目!
以上がuni-app のフォント ライブラリ、カスタム コンポーネント、パッケージング、ニュースの実践方法を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。