《uni-app跨平台开发》一学习心得

《uni-app跨平台开发》一学习心得

前言

uni-app 是一个使用vuejs开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web(响应式)，以及各种小程序 (微信/支付宝/百度/头条/QQ/钉钉/淘宝)、 快应用等多个平台。

该框架主要有五大优势：
    第一，uni-app 是一套可以适用多终端的开源框架， 真正实现一套代码可以同时生成iOS、Android、H5、微信小程序、 支付宝小程序、百度小程序等。
    第二，uni-app对前端开发人员比较友好， 学习成本比较低。首先，uni-app是基于vuejs的；其次， 封装的组件和微信小程序的组件非常相似， 所以对于现在的主流前端人员来说，学习几乎零成本。
  第三，uni-app使用HBuilderX进行开发， HBuilder X开发工具完美支持vue语法，开发效率大幅度提升。
第四，uni-app拓展能力强，封装了H5+， 支持nvue，也支持原生Android、iOS开发。可以将原有的移动应用和H5应用改成 uni-app应用。
第五，uni-app是DCloud出品的， 属于我们国家拥有自主知识产权的产品。

相信学过Vue的同学都会发现，它与Uni-app的相似之处，那么它们有什么区别呢？
uniapp和vue的区别在于：
1、uni-app可以编译到（头条，支付宝，微信，QQ，百度）小程序，安卓版，ios版，h5版。通过打包实现一套代码多端运行。
2、vue在web上是为单页应用而生的，在app上，单页应用会卡死。uni-app还有自动的框架预载，加载页面的速度更快。
3、uni使用小程序的标签，而vue使用web端的标签。
4、uni不支持vue-router,使用自带的路由。

组件/标签的变化\n\n以前是html标签，现在是小程序标签。

\n\ndiv 改成 view\nspan、font 改成 text\na 改成 navigator\nimg 改成 image\ninput 还在，但type属性改成了confirmtype\nform、button、checkbox、radio、label、textarea、canvas、video\n这些还在。\nselect 改成 picker\niframe 改成 web-view\nul、li没有了，都用view替代\naudio 不再推荐使用，改成api方式，背景音频api文档\n其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。local.storage 改成 uni.storage\nvue-router没有了，改成了 uni.navigateTo\nuni-app的js api还有很多，但基本就是小程序的api，把wx.request改为uni.request即可。详见\n\nuni-app在不同的端，支持条件编译，无限制的使用各端独有的api，\n\nuniapp自带路由和请求方式\n\nuni.navigateTo 路由与页面跳转\nuni.request 网络请求。

uni-app学习过程
1.轮播图
虽然网页的时候有学习过，但学习uni-app它还是有不同的，所以在学习的过程中还是需要多多注意区分的。
以下是uni-app轮播图的代码:

 

效果图:

 

1. 数据获取:
   数据获取对于其他内容还说是相对抽象的，所以当我们做到这个效果时，就得理清思路。
   (1)读取本地文件；(2)储存数据到本地文件。

以下为数据获取代码:

 

3.总结
我分享了两个对于我来说是学习uini-app相对较难知识点，在学习并分享的过程中，使我更熟悉的去掌握与运用，希望看到我分享的同学们能对你们也有所帮助。