推薦（免費）：uni-app開發教學
文章目錄
前言
本文主要介紹了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 class="iconfont iconbooks">
书籍 </view>
</view></template><script>
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
},
onHide() {
},
methods: {
}
}</script><style></style>顯示：
顯然，在小程式和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>顯示：
顯然，實作了微信小程式端和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>顯示：
實作了多端的屬性定義。
還可以實作元件點擊觸發改變父級元素的事件或方法，也就是啟動父級元件，例如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>顯示：
可以看到，實作了通訊和事件傳遞，子元件成功呼叫了父元件的事件。
同時，我們也可以使用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 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中文網其他相關文章！
