uniapp作为一个跨平台开发框架，简化了多端应用的开发流程，尤其适合熟悉Vue.js的开发者。其优点包括高效、多客户端支持、丰富的社区组件和较低的开发成本。尽管存在bug修复延迟和部分组件不成熟的问题，但整体仍提升了开发效率和性价比。文章还分享了uniapp在样式绑定、循环绑定、Nvue滚动、时间处理、动画等方面的具体应用示例。
uniapp学习心得：
uniapp是一个跨平台的开发框架，可以同时开发运行在多个平台上的应用，包括iOS、Android、Web等。这使得开发人员不再需要为不同平台分别开发应用，大大提高了开发效率。而且，uniapp的语法非常类似于Vue.js，对于已经熟悉Vue.js的开发者来说，上手非常快。在学习uniapp的过程中，我也深深体会到了它的便利和强大。
uniapp在使用中的优点有很多，例如支持多客户端，uniapp适用多端的开源框架，一套代码可以同时用于ios，android，H5，微信小程序，支付宝小程序等。Uniapp的社区组件的多样性也是特点之一，社区中的组件大多数也是免费的，有一部分还是需要收费，但是并不是非常贵，完全能在我们日常开发费用的接受范围内。Uniapp使用HBX进行开发，HBX对于vue语法的支持可以说是相当完备的，封装的组件与微信小程序的组件是一样的，且开发的速度快，效率也很高，所以对于微信小程序的开发者来说也是一种福音。程序开发的成本和门槛相对较低，对于公司或者个人而言，性价比才是第一优先选择，适配多客户端以及社区组件也是相当丰富，既降低了开发的成本也提高了开发的效率。
当然没有任何事物是完美的，uniapp也存在着一些缺点，对于一些bug修复的话时间上稍微有些漫长了，有一部分的bug在实际中也得到了及时的修复，也有一部分的bug从提交反馈到官方修复也是一段稍微漫长的时间。对于一些官方的组件不是很成熟，例如地图，直播等组件在日常使用中会显得相对繁琐和费神一些。对于兼容性的问题也是有待改善的，在Android平台上比微信小程序和ios表现上较差一些，但总体来说还是不错的，对于开发也没有太大的影响。
在实际应用中，uniapp给我带来了很多便利。例如，它集成了微信小程序底层的 API，我们可以直接调用微信小程序的原生功能，如登录、支付等。不仅如此，uniapp还提供了大量的插件和组件库，可以方便地扩展和定制应用的功能。例如，uniapp提供了uni-ui组件库，里面包含了常用的界面组件，如Button、TabBar、List等，可以快速构建出美观、实用的界面。
在与团队合作开发时，uniapp也表现得十分可靠。它提供了代码模块化和组件化的开发方式，使得团队成员之间的协作更加顺畅。我们可以将页面拆分为多个组件，每个人负责一个组件的开发，同时通过Git等版本控制工具进行代码管理和合并。这样不仅能够提高开发效率，还能减少出错的可能。
推荐一些我们经常使用的代码，例如常用的样式和循环的绑定：
样式绑定
:class="[{'box1': key==currentIndex}, 'box2']"
循环绑定
<text>{{item}} {{index==0?num1Count:index==1?num2Count:''}} </text>
Nvue滚动绑定：
1.<scroller style="height: 300rpx;background-color: pink;">
<view v-for="(item,index) in 100" :ref="'content'+index">111</view>
</scroller>
2.const dom = weex.requireModule('dom');
3.gotoBottom(){
var doc="content"+99;//最后一项
dom.scrollToElement(this.$refs[doc][0], {
offset:0,
animated:false
});
}
4.mounted() {
this.gotoBottom();
}
前端-常用时间：
. var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
month >= 1 && month <= 9 ? (month = '0' + month) : '';
day >= 0 && day <= 9 ? (day = '0' + day) : '';
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
console.log(JSON.stringify(timer));
安装time.Js
npm install time-operation –save
-----------------------------------------
import $time from "@/js/time.js"
console.log($time.formatTime(1616623902000));
swiper动画绑定
:style="{width:bar+'px',transform:offset}"
return {
offset:"translateX("+uni.getSystemInfoSync().windowWidth/4+")"
}
三元运算符：
:class="[isState==true?'text':'text1']"
//text和text1为样式
读取本地sin.Json文件：
{
"sin":123
}
var sin = require( '../../json/sin.json' );
console.log(sin.sin);
弹出框覆盖导航栏
<template>
<view style="align-items: center;justify-content: center;background-color: red;">
<image src="../../../static/logo.png" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
配置pages.Json：
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"app-plus":{
"subNVues":[{
"id":"sin",
"path":"pages/index/sub/test",
"type":"popup",
"style":{
"margin":"auto",
"width":"85%",
"height":"300rpx",
"border-radius":"10rpx"
}
}]
}
}
动画过渡（基于uni-ui）：
<template>
<view>
<view>
<button type="primary" @click="open">fade</button>
<uni-transition :mode-class="['fade','slide-top']" :show="show" @change="change" :styles="obj"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
obj:{
width:"100px",
height:"100px",
backgroundColor:"red"
}
}
},
methods: {
open() {
this.show = !this.show
},
change() {
console.log('触发动画')
}
}
}
</script>
<style>
</style>
总结来说，学习uniapp是一次愉快的经历。通过uniapp，我能够快速地开发出跨平台的应用，并且在开发过程中遇到的问题和困难都能够通过官方文档和开发者社区得到解决。我相信，随着更多使用者的加入和贡献，uniapp一定会越来越强大，成为跨平台开发的首选框架。
扫一扫
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
