uniapp开发原生app原理(uniapp开源案例)
今天给各位分享uniapp开发原生app原理的知识,其中也会对uniapp开源案例进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
混合开发之uni-app
uni-app App端内置weex渲染引擎,提供原生渲染能力
然而, Weex并不是一个前端框架 。实际上,前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language),它们与原生渲染引擎是分离的。换句话说,Weex 并不依赖于特定的前端框架,随着前端技术的发展,Weex 也可以集成更多广泛使用的前端框架。
以往的 weex ,有个很大的问题是它只是一个高性能的渲染器,没有足够的API能力,使得开发时非常依赖原生工程师协作,开发者本来想节约成本,结果需要前端、iOS、Android 3拨人开发,适得其反。而 nvue 解决了这个大问题,让前端工程师可以直接开发完整 App,并提供原生插件的市场交易和云打包。这些组合方案,开发者切实的提高效率、降低成本。
如果你是web前端,不熟悉 weex,那么建议你仍然以使用 vue 为主,在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充:
uni-app App 端内置 HTML5+ 引擎,让 js 可以直接调用丰富的原生能力。
小程序及 H5 等平台是没有 HTML5+ 扩展规范的,因此在 uni-app 调用 HTML5+ 的扩展规范时,需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。
在普通的 H5+ 项目中,需要使用 document.addEventListener 监听原生扩展的事件。
uni-app 中,没有 document。可以使用 plus.globalEvent.addEventListener 来实现(注意manifest中需开启新编译器,即自定义组件模式"usingComponents":true)。
同理,在 uni-app 中使用 Native.js 时,一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。
注意:旧编译器(非自定义组件模式)不支持 plus.globalEvent 这个对象。
uniapp原生插件开发(iOS)
打开 Xcode,创建一个新的Framework工程,然后点击 Next
输入插件工程名称(建议使用一个性化的前缀,避免与其他人的插件包名冲突),其他项不需要修改保持工程默认填充的即可,然后点击Next
然后选中工程名,在TARGETS-Build Settings中,将 Mach-O Type 设置为 Static Library 如下图所示
打开 iOSSDK/HBuilder-uniPluginDemo工程目录,双击目录中的HBuilder-uniPlugin.xcodeproj 文件运行插件开发主工程
在 Xcode 项目左侧目录选中主工程名,然后点击右键选择Add Files to “HBuilder-uniPlugin” ...
然后选择您刚刚创建的插件工程路径中,选中插件工程文件,勾选 Create folder references 和 Add to targets 两项,然后点击Add
然后在 Xcode 项目左侧目录选中主工程名,在TARGETS-Build Phases-Dependencies中点击+
在弹窗中选中插件工程,如图所示,然后点击Add,将插件工程添加到Dependencies中
此时可以看到 Dependencies 和 Link Binary With Libraries 都添加了插件工程,如下图所示
扩展原生功能有两种方式:
module:不需要参与页面布局,只需要通过 API 调用原生功能,比如:获取当前定位信息、数据请求等功能,通过扩展module的方式来实现;
component:需要参与页面布局,比如:map、image等需要显示UI的功能,通过扩展component即组件的方法来实现;
新建TestModule类,继承 DCUniModule,引入 DCUniModule.h 头文件。
然后在 TestModule.m 文件中添加实现方法
选中工程中的HBuilder-uniPlugin-Info.plist文件右键-Open As-Source Code找到dcloud_uniplugins节点,copy下面的内容添加到dcloud_uniplugins节点下,按插件的实际信息填写对应的项
在 uni-app 项目中调用 module 方法
生成 uni-app 本地打包资源
首先需要生成本地打包资源,在 HBuilderX 中选您的 uni-app 工程,右键-发现-原生App-本地打→生成本地打包App资源
项目编译完成后会在 HBuilderX 控制台输出资源存路径,点击路径会自动打开资源所在文件夹
接下来,将应用资源导入到插件开发主工程的 HBuilder-Hello/Pandora/apps/ 中,如下图所示,直接拖进去即可
如下图所示,将编译工程选择为插件项目(DCTestUniPlugin),运行设备选择 Generic iOS Device
新建一个 package.json 文件,根据插件实际情况填写插件配置信息
然后以插件id为名新建一个文件夹,将编辑好的 package.json 放进去,然后在文件夹中在新建一个 ios (小写)文件夹,将刚刚生成的依赖库(DCTestUniPlugin.framework)copy 到 ios 根目录,这样我们的插件包就构建完成了,如下图所示
HBuilderX 的 uni-app 项目创建中“nativeplugins”目录(如不存在则创建)将插件配置到uni-app项目下的“nativeplugins”目录
uni-app原生插件本地配置
将原生插件配置到uni-app项目的“nativeplugins”下,还需要在manifest.json文件的“App原生插件配置”项下点击“选择本地插件”,在列表中选择需要打包生效的插件:
uniapp多端适配原理
代码不能直接被多端的每一个原生程序解析编译。据uniapp程序简介得知,该程序多端适配原理是代码不能直接被多端的每一个原生程序解析编译。
uniapp开发App引导页
App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片,用于告知用户产品的功能及特点。好的引导页会促使用户对产品增加更多的兴趣,当然这是UI设计的能力体现了,尽管很多人都会快速的滑过。对于开发人员怎么去添加这几张图片只有在用户第一次打开app时展示呢。
以uniapp开发的项目为例:在onLaunch函数中,检查flag是否为false,如果为false,则跳转到引导页面,在引导页中可设置跳转到首页。注意,最好用reLaunch,避免,用户物理按键返回;为true,则存储flag到本地。原理既是如此;但是实际开发时,会发现,存在闪屏现象,这样用户的体验就不太好,所以比较关键的地方就在于这块,还是以uniapp为例,需要在uniapp的源码视图下将splashscreen的设置进行修改,将autoclose改为false,在onLaunch中通过设置延迟时间调用plus.navigator.closeSplashscreen方法来关闭启动图。delay设置为0。这样启动图的设置就ok了。
以下封装了检查是否进入引导页的方法,仅供参考下:
Tip:在多次的应用中发现,如果在手机本身比较卡的情况下,用户在第一次开启app时,还是会存在首页在引导页之前出现,这种情况的处理方式是将引导页默认设置为主页,即在路由管理中,将引导页写在第一个,然后通过flag去判断是否跳转到首页;
以上的引导页开发只是提供一种思路,还有很多其他的方式,比如后端去控制是否展示引导页,引导页的动态变化。当然问题本身不难实现,关键在于实际应用时所存在的问题。
uniapp开发原生app原理的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于uniapp开源案例、uniapp开发原生app原理的信息别忘了在本站进行查找喔。