推薦(免費):uni-app開發教學
文章目錄
- 前言
- 一、使用iconfont字體庫
- 二、自訂元件和元件間的訊息傳遞
- 三、打包
- 四、實戰案例--新聞列表與詳情
- 總結
前言
本文主要介紹了4方面內容:
在uni-app專案中使用iconfont提供的圖示字體庫,美化頁面;
實作自訂元件,並且可以自訂屬性和實作父子元件之間的訊息傳遞;
微信小程式預覽和真機測試,APP端雲端打包和本地打包;
新聞清單和詳情實戰練習。
一、使用iconfont字體庫
uni-app中可以使用iconfont(https://www.iconfont.cn/)提供的圖示字體。
大致流程如下:
先在iconfont中根據關鍵字選擇所需圖標,並添加至購物車;接下來建立項目,並將先前選擇的圖標添加至項目,並下載字體,如下:
解壓縮下載的壓縮包,將其中的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> 书籍 </view> </view></template><script> export default { data() { return { } }, onLoad() { }, onShow() { }, onHide() { }, methods: { } }</script><style></style>
顯示:
顯然,在小程式和APP中都正常顯示。
二、自訂元件和元件間的訊息傳遞
元件為uni-app的開發提供了許多方便,加速了開發。
元件也可以重複使用和自訂,具有很大的靈活性。
自訂元件前,需要在專案目錄中建立components
目錄,右鍵components目錄選擇新建元件,在建立元件時可以選擇模板,也可以點選右上角自定義範本,在彈出的目錄中建立範本名稱.txt
,裡邊寫入範本內容即可,例如建立有屬性的範本.txt
如下:
<template> <view> ...... </view></template><script> export default { name: "组件名称", //属性 props: { 属性名称: { type: String, //属性类型 value: "值" }, ...... }, //组件生命周期 created: function(e) { }, methods: { 函数名称: function(obj) { }, } }</script><style> **组件样式**</style>
建立元件時,選擇自訂的模板,名為myinput.vue,修改如下:
<template> <view> <input> <button>提交</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>
顯示:
顯然,實作了微信小程式端和APP端使用自訂元件。
也可以定義props
屬性,可以給元件動態設定屬性,如下:
<template> <view> <input> <button>提交</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>姓名</myinput> <myinput>年龄</myinput> </view></template><script> import myinput from '../../components/myinput.vue'; export default { data() { return { } }, onLoad() { }, onShow() { }, onHide() { }, methods: { }, components: { myinput } }</script><style></style>
顯示:
實作了多端的屬性定義。
還可以實作元件點擊觸發改變父級元素的事件或方法,也就是啟動父級元件,例如myinput元件來啟動index.vue中的元素、觸發事件,需要使用$emit
,用來模擬執行事件,第一個參數是事件,其餘參數是事件的參數;同時在父級元件中使用該元件時,透過v-on
綁定定父級元件中的事件,實現元件之間的通訊。
如下:
<template> <view> <input> <button>提交</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>姓名</myinput> <myinput>年龄</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>
顯示:
可以看到,實作了通訊和事件傳遞,子元件成功呼叫了父元件的事件。
同時,我們也可以使用GraceUI框架,其全稱為Grace User Interface,是基於uni-app及小程式的超級前端框架,官網位址為http://www.graceui.com/,提供了更豐富的元件、佈局及介面函式庫,可以透過uni-app方式實現一套程式碼多端發布、大幅提升開發速度,也可以作為自訂組件進行二次開發。
三、打包
对于小程序来说,可以申请测试号,方便开发者开发和体验小程序的各种能力,并使用此帐号在开发者工具创建项目进行开发测试,以及真机预览体验。
只需访问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> <image></image> <view>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> <navigator> <image></image> <view>{{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></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中文網其他相關文章!

本文討論了有關移動和網絡平台的調試策略,突出顯示了Android Studio,Xcode和Chrome DevTools等工具,以及在OS和性能優化的一致結果的技術。

文章討論了用於Uniapp開發的調試工具和最佳實踐,重點關注Hbuilderx,微信開發人員工具和Chrome DevTools等工具。

本文討論了跨多個平台的Uniapp應用程序的端到端測試。它涵蓋定義測試方案,選擇諸如Appium和Cypress之類的工具,設置環境,寫作和運行測試,分析結果以及集成

本文討論了針對Uniapp應用程序的各種測試類型,包括單元,集成,功能,UI/UX,性能,跨平台和安全測試。它還涵蓋了確保跨平台兼容性,並推薦Jes等工具

本文討論了UNIAPP開發中的共同績效抗模式,例如過度的全球數據使用和效率低下的數據綁定,並提供策略來識別和減輕這些問題,以提高應用程序性能。

本文討論了通過壓縮,響應式設計,懶惰加載,緩存和使用WebP格式來優化Uniapp中的圖像,以更好地進行Web性能。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版
SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

Atom編輯器mac版下載
最受歡迎的的開源編輯器