您的位置: 首页 > APP开发 > uni-app开发app

uni-app开发app

2021-03-09 15:55:26        栏目: APP开发

uni-app开发app一: uni-app的优缺点

ios最近的开发应用公司应用,混合混合和正在。

uni-app的说先一下优缺点

1优势:

android拥有,支付信,上线等p度程序,源,微小程序苏框架生成程序小宝ios的在Uniapp百小同时,。

2优势:

优先uni-app比较成本,js基于学习vue.,比较前端来说.对友好人员的uni-app高开发比较,.信元素主流0不配置vue小前端和接触,你小是配置端程序的话没有元素包程序,的基本加油微都元,端一样的微因为现在前端信下一个作为如果更建议学习你那个是很多。

优势:

完善vue hbx uni-app的对来开发hbx使用了等已经,支持语法。的水手速度篮筐为开发利用hbx。是党,我说相当hbx的好得速度:还是ps快开发vscode比较没有有,但是。虽然外面。非常个人喜欢我。

4优势:

可+,Android性p,开发支持原始nvue,Uniapp扩展封装并ios支持。手机是app APP的替换的Universal用现有。

优势5:

我们Uniapp国产是所以当然支持的,应该,国产是DiCloud的!

之一缺点:

使用UNIE APP。会成为部分池很多人的没有。还坑很多了多少讨厌坑完善的坐骑不洞Uniapp自制洞上市的一下。

缺点个第二:

的错误有些使用不及时回应问题官方和对。和或者可以在,qq讨论开发者社区去加入一起你里Uniapp。

嗯先多用这么吧。我的uni-app和组件自己经验介绍直接是今后坑文章一些的的。支持的大家。哦发展大家多多希望。哈哈


uni-app开发app二: uni-app快速开发

uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

uni-app框架由Dcloud即数字天堂(北京)网络技术有限公司推出,该公司主要产品有Web开发IDEHbuiler、HbuilderX,前端框架mui、uni-app,增强版的手机浏览器引擎H5plus等。

一、环境搭建

使用HBuilderX可视化界面快速创建项目,HBuilderX内置处理了相关环境依赖。

HBuilderX:IDE。最新版本下载地址

二、创建uni-app项目

点击工具栏里的文件-新建-项目:

选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建uni-app。点击模板里的Hellouni-app即可体验官方示例。

三、运行uni-app

1.真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行-真机运行-选择运行的设备,即可在该设备里面体验uni-app。

2.浏览器运行:进入hello-uniapp项目,点击工具栏的运行-运行到浏览器-选择浏览器,即可在浏览器里面体验uni-app的H5版。

3.在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行-运行到小程序模拟器-微信开发者工具,即可在微信开发者工具里面体验uni-app。

四、uni-app调试

1.使用Chrome调试

进入uni-app项目,点击工具栏的运行-运行到浏览器-选择Chrome,即可将uni-app运行到浏览器,可参考运行uni-app,运行到浏览器后,就能和普通web项目一样进行预览和调试了。

注意:Chrome调试只能保证样式一致,部分原生能力是不支持的。

点Chrome控制台的Sources栏,可以给js打断点调试。

在Page下找到webpack里的工程目录,可直接找到对应的vue页面进行断点调试;或按Ctrl+P搜文件名,进入页面调试;也可点击控制台的log信息,进入对应的页面进行调试。

image

image

2.使用微信web开发者工具调试

uni-app运行到微信web开发者工具,可在控制台查看console信息,网络请求等信息等。

注意:开发App或微信小程序均可使用微信开发者工具进行调试。

页面样式调试和一般的web项目一样,通过调试的箭头选中元素即可查看相应的节点和样式,如下图:

uni-app

调试js时需要切换到Sources栏,选中想要调试的那个页面的js,进行调试(如果js代码是压缩过的,点击右下角的{}可格式化代码),如下图:

uni-app

五、发布uni-app

1.打包为原生App(云端)

在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:

出现如下界面,点击打包即可。

2.打包为原生App(离线)

uni-app支持离线打包,在HBuilderX生成离线打包资源,然后参考离线打包(或参考其他用户写的离线打包日记),即可进行离线打包。

在HBuilderX工具栏,点击发行,选择本地打包,如下图,点击即可生成离线打包资源。

3.发布为H5

1.在manifest.json配置发行后的路径(发行在网站根目录可不配置),比如发行网站路径是www.xxx.com/html5,在manifest.json文件内编辑h5节点,router下增加base属性为html5,如下图所示:

2.在HBuilderX工具栏,点击发行,选择网站-H5手机版,如下图,点击即可生成H5的相关资源文件,保存于unpackage目录。

4.发布微信小程序

按照如下步骤可将uni-app发布到微信小程序:

1.申请微信小程序AppID,参考微信教程

2.在HBuiderX中,打开manifest.json,如下图所示配置小程序AppID

3.在HBuilderX中顶部菜单依次点击"运行"--"运行到小程序模拟器"--"微信开发者工具",等待uni-app项目成功编译并自动启动微信开发者工具

4.在微信开发者工具中,测试项目代码运行正常后,点击"上传"按钮,之后按照"提交审核"--"发布"小程序标准流程,逐步操作即可,详细查看微信官方教程

六、项目代码

反馈星是使用uniapp开发的上报工具类项目。

发送文字、图片、音频、内容,您将获得意想不到的反馈。

GithubFeedBackStar


uni-app开发app三: 跨端开发痛点?送你一款Vue最流行的跨端框架——uni-app

今天来聊一下前端必备技能——小程序开发。

从最早发布的微信小程序,到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢?

当业务要求同时在不同的端都要展现时候,针对不同的端去编写多套代码的成本显然非常高。这时候只需编写一套代码,就能够适配多端的能力就显得尤为需要。

今天就来给大家介绍一款,使用Vue的跨端框架——uni-app

uni-app是一个使用Vue.js开发跨平台应用的前端框架,可编译到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等平台。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势:

虽然不同端框架环境千变万化,无论各类小程序、Weex、React-Native、Flutter、快应用,它们万变不离其宗的是MVVM架构设计思想。uni-app希望既能用一套代码完成所有端需求,将相同的业务逻辑完成收敛到同一层系统里面,又不会因为项目的抽象一致导致可维护性变差。

通过HBuilderX可视化界面,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

使用Vue.js+小程序API,进行开发。

数据绑定及事件处理同Vue.js规范,同时补充了App及页面的生命周期。

uni-app帮我们把不同平台的小程序API几乎都封装了,只需要将前缀替换为uni即可举例说明:

在微信中发送request请求:

wx.request({url:"https://www.example.com/request",//仅为示例,并非真实接口地址success:res={console.log(res.data);}});在uni-app中发送request请求:

uni.request({url:"https://www.example.com/request",//仅为示例,并非真实接口地址success:res={console.log(res.data);}});了解微信小程序的你,是不是感觉很简单呢?无非就是把wx前缀换成了uni而已,而且uni.request是全端通用的ajax请求API哦,最大程度的降低开发者的学习成本。

每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

uni-app提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

viewclass="content"!--#ifdefMP-WEIXIN--view只会编译到微信小程序/view!--#endif--!--#ifdefAPP-PLUS--view只会编译到app/view!--#endif--/viewnvue模式uni-app里根据编译配置不同,可以使用weex的组件,也可以使用小程序组件(即uni-app组件)。编写页面时页面后缀名为.nvue(nativevue的缩写)

uni-appApp端内置weex渲染引擎,提供了原生渲染能力,让uni-app在App端有更好的表现。

nvue相当于给weex补充了大量uni-app的组件和api,以及丰富的PlusAPI、Native.js、原生插件。了解更多nvue

uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui库。

web开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。GitHub地址:uni-ui

看到这里你是不是觉得特别心动了呢?别着急,让我们看一下uni-app的开发规范。

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app约定了如下开发规范:

关于各端的管理规则需要耐心学习

uni-app并不难学,但我们注意到很多新人在适应各个平台的规则限制时很焦躁。

uni-app跨了很多端,虽然代码层面可以开发一次,生成多端。但注意每个端,有每个端的管理规则,这与开发无关,但每个开发者仍然要耐心掌握这些规则限制。

uni-ui对比其他框架主要有两个优势

开发需要注意的点

注意各端的差异性,很多东西,h5是对的,上真机就错了,真机好着的,换小程序就错了,不同小程序之间还有差异,总之就是考虑好不同的情况,重点是仔细阅读文档。

由于uni-app框架集成了5+API,一些需要原生功能uniapp也可以通过5+API去进行实现。

很多的坑还是因为多端不兼容,除了写起来麻烦一点,基本上都还是有可以解决的策略。

关于uni-app的更多信息可以参考官方文档uni-app-多端开发框架,或者直接前往GitHub仓库uni-app查看uni-app文档及相关资料。欢迎前去star或是提issue哈。

github地址:https://github.com/dcloudio/uni-app/

PS:我现在在写一个ui库,接下来我应该会写一些如何从零实现一个ui库方面的文章,欢迎有这方面经验的小伙伴们相互交流一下。