如何使用uni-app开发一个完整的项目(uni app开发教程)

hello 大家好,我是老张,有的人称呼我为张工。一个不务正业的PHP开发者,立志于做一个全栈开发工程师。

今天呢,我想补充一章关于uni-app 如何开发,如何建立项目,如何使用hbuildx这个编辑器开发项目的,之前忘记考虑了一些问题没有去考虑这个事情,今天索性就把这个章节补充进来.

创建项目

创建项目有两个方式创建,第一个是通过vue-cli命令行的方式,另外一个是使用HbuildX可视化创建,对于没有前端开发经验的小伙伴我推荐使用HbuildX 可视化创建,主要是简单,方便。工具的出现就是为了节省时间,提高开发效率的。

先简单介绍下第一种方式:

可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

开始之前需要先下载HBuilderX 这个在官网就可以找到,HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。下载App开发版,可开箱即用;如下载标准版,在运行或发行uni-app时,会提示安装uni-app插件,插件下载完成后方可使用。

如何使用uni-app开发一个完整的项目(uni app开发教程)

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

如何使用uni-app开发一个完整的项目(uni app开发教程)

选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。uni-app自带的模板有 Hello uni-app ,是官方的组件和API示例。还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。建议前期开发的小伙伴可以使用这个

第二种创建方式就是cli 脚手架

除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。

全局安装vue-cli

npm install -g @vue/cli

创建uni-app使用正式版(对应HBuilderX最新正式版)

vue create -p dcloudio/uni-preset-vue my-project

使用alpha版(对应HBuilderX最新alpha版)

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

如何使用uni-app开发一个完整的项目(uni app开发教程)

运行项目

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

真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。如果手机无法识别,请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具。

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

注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在微信开发者工具里面就可看到实时的效果。

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

其他的运行方式都是大同小异

如何使用uni-app开发一个完整的项目(uni app开发教程)

常用的就是这些了。

结语

知识付费开源项目目前已经完成了首页,分类,我的,学习主页面,明天开始进入首页的课程,导师列表等关键主页面的开发,目前项目进展一切顺利。项目完成之后会进行开源供大家查看批评。谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月6日 下午7:10
下一篇 2024年5月6日 下午7:22

相关推荐

  • 西安高新区“智慧党建云”“缴费云”平台正式上线(高新党建云下载)

    3月8日下午,西安高新区举行“智慧党建云”、“缴费云”平台正式上线启动仪式。两平台的上线,将为基层党建工作的开展提供强有力的工具,进一步推动党务工作的便捷化、智能化和现代化。中共西…

    科研百科 2023年6月13日
    224
  • svn项目管理软件

    svn项目管理软件:高效协作与项目管理的必备工具 近年来,随着互联网技术的发展,项目管理的需求也越来越大。而SVN(Subversion)作为开源的、分布式的、版本控制系统,已经成…

    科研百科 2024年7月21日
    39
  • 唯一拥有生产固体运载火箭核心技术和资产的企业

    唯一拥有生产固体运载火箭核心技术和资产的企业唯一拥有生产固体运载火箭核心技术和资产的企业,其子公司全部拥有硕士、博士、博士,其国家、社会组织、交通、电力和油田等经济、物资、商贸等生…

    科研百科 2024年11月25日
    1
  • 南阳“定点扶贫”扶群众走上致富路

      □本报记者曹国宏通讯员曹怡然乔石月Yjp   前不久,镇平县老庄镇李家庄村民给南阳市委书记穆为民写了一封信,信中说:“李家庄终于有自己的完全小学了;村民不再为吃水发…

    科研百科 2022年6月5日
    477
  • 洛阳市生态畜牧业发展亮点突出

      按照优质、高效、生态、环保的总要求,洛阳完成了35家畜禽养殖场的污染治理。积极探索规模养殖场粪污治理和利用技术,重点推广“畜—肥—果(粮、菜…

    科研百科 2022年5月31日
    263
  • 比较好的合同管理系统

    合同管理系统是一种能够帮助企业进行合同管理的软件系统,能够帮助企业高效地管理合同,避免合同漏洞,提高合同签订的成功率,降低合同履行风险。好的合同管理系统应该具备以下特点: 1. 强…

    科研百科 2024年8月31日
    35
  • 医疗信息管理系统项目

    医疗信息管理系统项目 随着医疗技术的不断进步和人口老龄化趋势的加剧,医疗信息管理系统成为了医疗机构中不可或缺的一部分。医疗信息管理系统可以帮助医疗机构更好地管理患者信息、病历信息、…

    科研百科 2025年1月7日
    0
  • 农投资产公司:推进党建与经营融合 助力改革出实招、见实效

    自国企改革三年行动启动以来,重庆农投资产经营管理有限公司(以下简称农投资产公司)深入贯彻市国资委及市农投集团开展国企改革三年行动工作部署,深化党建与生产经营融合,多措并举推动改革不…

    科研百科 2022年12月31日
    451
  • 智赢投标靠谱吗

    智赢投标:是否靠谱的选择? 投标是商业活动中至关重要的一部分,许多企业都会参与投标以争取最好的合同。但是,智赢投标作为一种新型投标方式,是否能够真正带来可靠的收益,仍然是一个有争议…

    科研百科 2024年11月29日
    1
  • 助你上岸,然后顶峰相见!华东师大研究生育人年度盘点(华东师范大学硕师计划)

    2022年,华东师范大学贯彻落实全国研究生教育会议精神,围绕学校卓越育人改革任务,坚持立德树人根本任务,聚焦卓越人才培养,以促进学生全面而个性的发展为目标,确立新发展阶段高等教育卓…

    科研百科 2023年9月15日
    232