本文将通过四大步的简单讲述,让新手开发者朋友们快速掌握阅读YonBuilder移动开发项目源码的技巧方法。
本文将通过四大步的简单讲述,让新手开发者朋友们快速掌握阅读YonBuilder移动开发项目源码的技巧方法。 CSS: 存放css样式的文件; feature:猜测是用来存放特征文件的,实际开发中没看到真实使用案例,通常不需要,删除即可。 html:核心文件夹,存放项目各个页面对应的html文件 icon:存放项目的icon图标,仅对本地测试包有效,可删除 image:图片资源文件夹 launch:存放项目的启动图图片资源,仅对本地测试包有效,可删除 res:存放非图片资源的文件夹 script:存放通用的js文件,包括一些封装有通用逻辑的js文件,或引用的第三方js框架文件等 wgt:用来存放widget子包,根据项目实际需要使用,一般不用,可删除 config.xml: 项目的配置文件, 存放关于项目配置的相关信息数据,如入口文件,appid等 index.html: 默认的整个app项目的入口文件,当app启动后,会首先读取运行该文件。(可以在config.xml中重新修改设置程序的入口文件) PS: 上面的截图是通常在创建一个新的项目时,系统会自动帮你创建好的项目文件结构,对于一个新的项目,处于简化项目代码的需要,建议可将其中的feature、icon、launch 、wgt 均可删除掉,不影响正常的代码逻辑。 上面介绍的这些,属于一个项目的核心文件机构,有兴趣的小伙伴,可点击Widget包结构说明了解更多 2.读懂代码的第二步,找到程序的入口文件 在YonStudio开发工具下,config.xml被可视化了,它的入门文件位置见下截图 我们也可以点击上面截图中导航条右侧的源文件文字,去查看真正的config.xml页面源码 PS: 当我们在github或者gitee等开源仓库下载一个YonBuilder移动开发项目代码时,如果我们想要运行体验一下代码,那么就需要在config.xml中,将appid的值,修改成我们账户下自己的一个应用项目的appid才行,因为通常我们只能运行和调式自己账户下的应用。特别是如果一些项目引用了一些移动插件,那么我们就需要在云端控制台自己的项目中,同步添加这些移动插件才OK,否则运行就会报错。 有兴趣的小伙伴,可点击config.xml的配置说明在线文档了解更多 3.读懂代码的第三步,了解 HTML文件的编码结构 一个完整的html文件的基本结构描述如下:
由上面我们可以看出,在App开发中使用的html结构与web端开发使用的html结构没有什么不同,其结构是保持一致的,这一特性会更方便擅长Web开发的同学迅速上手YonBuilder移动开发。唯一不同的一点是YonBuilder移动开发特有的apiready函数,下面我们就重点介绍一下这个函数。 3.2 apiready函数 这一运行机制会使得开发者更方便的去阅读相关的项目源码,理解整个页面的编程思路和代码逻辑。 引入apiready函数的最根本原因就是在进行YonBuilder移动开发的时候,我们会根据业务逻辑的需要,频繁的使用到大量的引擎内置的api对象函数方法。 这些api对象方法是YonBuilder移动开发引擎环境所特有的,在原本的浏览器环境中并不存在,所以需要引擎在加载html页面时,去动态注入api对象后,在相关的程序方法中才可以正常调用,否则就会报错。而apiready函数就是一个显性的生命周期事件,是引擎用来告诉程序,现在api对象已经加载完毕,可以正常调用了。 综上所述,新手开发者朋友们,在你编写项目代码时,如果程序使用了相关的api函数,那么一定要保证这个程序方法是在apiready生命周期事件后再被调用执行,一定不能在apiready函数执行前就运行,否则程序就会异常报错。如果定义的函数体内没有使用到相关的api对象,就不受这个限制。 4.读懂代码的第四步,了解「移动插件」这个特殊存在
这种require对象的方法,就是YonBuilder移动开发在项目代码中引用原生的移动插件的一种调用方法。通过 api.require函数,可以初始化一个移动插件的实例对象,后面就可以通过这个实例对象来调用该移动插件内部已经封装好的api方法,从而快速实现需要的编码功能。 关于「移动插件」,简单来说是YonBuilder移动开发的一种扩展机制,在移动端进行代码开发,有时候我们会遇到一些特殊场景是不适合使用HTML方式去实现的,例如 场景下需要实现的一些功能是移动平台所特有的,原生的HTML环境不具备或者无法实现,比如调用手机相机、通讯录、定位、闹铃、消息通知等; 移动插件需要在云端的应用程序控制台去进行添加,通过「移动打包」进行编译,才可以在具体的项目代码中进行调用。所以我们在遇到使用api.require调用移动插件时,如果想了解具体的插件api功能,就可以访问网站去查看对应的移动插件开发文档,里面有详细的介绍。具体的插件名称就是require括号内的名称,如上面的api.require('bMap'), 其中的单引号包含的 bMap就是具体的插件名称。 已登录情况下,可以在租户下-「移动开发」-「移动插件」下的「已添加插件」或「移动插件库」去查看移动插件 总结 用友开发者中心也提供了格式移动应用源码以供参考,希望对大家的学习开发有所帮助! |