摘要由AI智能服务提供本文介绍了uni-app，一个基于Vue.js的跨平台应用开发框架，允许开发者编写一次代码，即可编译发布到iOS、Android、H5、小程序等多个平台。文章详细说明了uni-app项目的创建和运行方法，包括通过HBuilderX可视化界面和vue-cli命令行两种方式。还介绍了项目目录结构，强调了静态资源文件的存放位置。最后，通过实例展示了如何在uni-app项目中配置底部导航栏和使用swiper组件实现轮播图功能。
uni-app--开发一次，多端覆盖是DCloud公司使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。如果你写过vue.js项目，学过小程序，了解过mpvue那太适合花时间了解下uni-app，很容易上手。
一.uni-app项目的创建和运行
uni-app支持通过 HBuilderX可视化界面、vue-cli命令行两种方式快速创建项目。
1. HBuilderX可视化界面
(1). 下载官方IDE HBuilderX(下载App开发版，可开箱即用)
(2).工具栏里的文件 -> 新建 -> 项目,选择uni-app，输入工程名,即可成功创建 uni-app。
(3).运行uni-app
快捷键是Ctrl+r，然后选择浏览器，真机（iOS，安卓),微信/支付宝/百度/字节跳动等小程序开发者工具进行运行。
2. 通过vue-cli命令行
(1).可直接下载标准版，因为uni-app编译插件被安装到项目下了。
(2).全局安装vue-cli // npm install -g @vue/cli
(3).创建uni-app // vue create -p dcloudio/uni-preset-vue my-project
二.uni-app项目的目录结构
注： 静态资源只能存放在static文件下，static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。css、less/scss 等资源同样不要放在 static 目录下。
三.编写项目
1. 配置tabbar（类似于微信小程序，在page.json里配置。）
主要代码:
"pages": [ //pages数组中第一项表示应用启动页，
参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/mine/mine",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#000000",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/icon_home.png",
"selectedIconPath": "static/icon_home_HL.png",
"text": "首页"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/icon_mine.png",
"selectedIconPath": "static/icon_mine_HL.png",
"text": "我的"
}]
},2. 用swiper实现轮播图 （uni-app 使用vue的语法+小程序的标签和API）
关键代码：
<template>
<view class="content">
<!-- 头部轮播 -->
<view class="carousel-section">
<!-- 标题栏和状态栏占位符 -->
<!-- <view class="titleNview-placing"></view> -->
<swiper class="carousel" circular @change="swiperChange">
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title: '轮播广告'})">
<image :src="item.src" />
</swiper-item>
</swiper>
<!-- 自定义swiper指示器 -->
<view class="swiper-dots">
<text class="num">{{swiperCurrent+1}}</text>
<text class="sign">/</text>
<text class="num">{{swiperLength}}</text>
</view>
</view>
</view></template><script>
export default {
data() {
return {
carouselList: [
{src: "/static/banner3.jpg",background: "rgb(203, 87, 60)",},
{src: "/static/banner2.jpg",background: "rgb(205, 215, 218)",},
{src: "/static/banner4.jpg",background: "rgb(183, 73, 69)",},
],
titleNViewBackground:'',
swiperCurrent: 0,
swiperLength: 0,
}
},
this.carouselList[0].background;
this.swiperLength = this.carouselList.length;
this.carouselList = this.carouselList;
},
methods: {
//轮播图切换修改背景色
swiperChange(e) {
const index = e.detail.current;
this.swiperCurrent = index;
this.titleNViewBackground = this.carouselList[index].background;
}
}
}
</script><style lang="scss">
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
height: 350upx;
.titleNview-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 426upx;
transition: .4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 0upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 60upx;
bottom: 15upx;
width: 72upx;
height: 36upx;
background-image:
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
border-radius: 50px;
font-size: 24upx;
color: #fff;
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36upx;
font-size: 12upx;
color: #fff;
transform: translateX(-50%);
}
}
</style>运行结果：
四.问题总结
第一次使用HBuilderX运行到小程序开发者工具时，应先配置小程序的相关路径。才能运行成功。
2. 引入第三方组建时，报使用了scss/sass语言，但未安装相应编译器的问题。
原因:
没有安装Sass，Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
解决方案:
3. HBuliderX问题
在编写了代码或修改了新的代码重新编译时，编译成功发现没有任何变化，猜测编译器应该没有检测到代码的更新，并非 时时保存，因此需要重新保存下，再编译就OK了！
4. 适应单位upx不支持动态赋值
upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，屏幕变宽，upx实际显示效果会等比放大。
<!-- - 动态绑定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}">
</view>解决方案：(使用 uni.upx2px(Number) 转换为 px 后再赋值。)
<template>
<view>
<view class="half-width" :style="{width: halfWidth}">
半屏宽度
</view>
</view>
</template>
<script>
export default {
computed: {
halfWidth() {
return uni.upx2px(750 / 2) + 'px';
}
}
}
</script>
<style>
.half-width {
background-color: #FF3333;
}
</style>5.很多插件可供参考，文档，社区提供帮助。
虽然uni-app 可以跨平台开发，但是要注意每个平台都有对应的规则限制，早学早入坑，趟坑，就是在为自己积累价值。
本篇独发金蝶云社区
赞 2
打赏