如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

这篇具有很好参考价值的文章主要介绍了如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.下载一个Hbuilderx https://www.dcloud.io/hbuilderx.html ,根据自己电脑64位 32位安装就好,很简单

2.选择文件→新建→项目

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 3.选择uniapp的一个快捷带+号的项目。底部导航图标换自己需要的即可

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

4页面配置的主要四大地方,目前只需了解就行

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,          

manifest.json里有些操作需要勾选 ,目前只需了解就行        

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 5.点击选择pages下面一个.vue页面,然后鼠标选择上面运行(运行到浏览器B---选择谷歌浏览器,没有的话需要配置一下)如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

此时点击地址运行页面既可以

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 到这里,一个普通的uniapp项目创建完毕了

6. 更换头部导航背景颜色图与文字颜色,底部图标等操作

6.1 更换头部操作

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 更改后的首页

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

6.2 更换底部图标

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

6.3图标上的消息数量配置,一般情况用不上,删除或者注释掉就行。 在App.vue里面

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

7. 如何运行到手机上

7.1  H5页面运行手机上(把下面运行到浏览器时的ip地址复制发到微信文件传输助手,微信里打开即可)注意:需要在同一网络下,WIFI都是用的同一个

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

发现有两个首页是不是感觉有点丑了

只需要在pages.json里加上"navigationStyle": "custom"就行了

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

8. 运行到手机APP 需要数据线,原装好点,不是原装有时候只能充电。这先说下安卓机app

8.1 手机需要开起开发者模式,手机厂商不同,开起条件不同,百度一下自己厂商手机怎么开起开发者模式,开起后选择MIDI(我的是华为)如果没有这些选择只能充电可能数据线不支持,需要更换数据线

(需要在开发者选项里打开USB调试)

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

8.2 选择后好后, 电脑与手机连接后需要找到  运行手机模拟商  选择里面的第一个。会自动寻找连接的安卓手机

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

如果出现手机点击运行既可以,等待一会时间后安装到手里里面,自动打开你的项目

如何还不行鼠标点击项目名称右键--- 重新识别项目类型

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

 如何还不行的话。那我就没辙了。去百度下怎么连接手机吧

9. 打包发布app

找到发行,选择第一个原生app打包。我这里截不出来图,不知道为什么。

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

出现一下界面 选择使用公共测试证书即可,然后等待几分钟排队,周五打包比较多,毕竟要周末了。(此打包为临时打包),正式打包需要打包证书申请,如:https://www.yunedit.com/createcert (香蕉云编可申请)

打包成功后会提示成功,下面会出现一个地址,点击进去,下载到电脑上既可以。发别人测试只能发QQ。微信不支持安装。

如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

好了。这就是我给大家简单的介绍一个uniapp的创建,更改一些配置,运行,以及打包

后续有问题可以自行百度既可以、有点vue基础的上手很快。文章来源地址https://www.toymoban.com/news/detail-483912.html

到了这里,关于如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UniApp小程序开发项目创建与运行

    1.准备工作:HbuiderX  +  微信开发者工具下载安装+小程序账号申请开通(这里就不例举了,可以看同账号uniapp小程序开发准备) 2.创建项目 新版本的HbuilderX点击新建项目——选择uni-app——选择默认模板——输入项目名称——选择Vue版本(此随笔是前后端分离开发,不使用UniCloud云

    2023年04月12日
    浏览(34)
  • uniApp h5项目/小程序项目通过命令行打包 一个项目二端适配

    一、打包环境 1. 环境版本 软件 版本 nodejs v14.17.5 vue/cli 4.5.15 vue 2.x 2. 搭建环境 安装nodejs linux安装流程: https://nodejs.org/download/release/v14.17.5/ 卸载默认vue/cli 安装vue/cli 二、创建项目 2.1. HBuilder X创建项目 my-project-x 修改展示文字为 gblfy.com 2.2. cli创建项目 通过cli新建一个项目 选

    2024年02月13日
    浏览(38)
  • 创建并运行一个 Spring Boot 项目

    Spring Boot 是 Spring 框架的脚手架,它存在的目的就是为了快速开发 Spring 框架而诞生的。如何理解 Spring Boot 和 Spring 呢? 如果将 Spring 比喻成农民拿镰刀手动割草,那么 Spring Boot 就相当于专业人员驾驶着割草机,自动割草。而之前的 Servlet 就是普通人,在田地里直接用手拨草

    2024年02月09日
    浏览(48)
  • eclipse创建第一个java web项目并运行

    为了能编写java web项目,建议安装支持javaee开发的eclipse版本。 地址: https://www.eclipse.org/downloads/packages/release/2021-03/r 设置项目名称,指定tomcat的版本及路径 在jsp中如输入如下代码: % String str = \\\"hello world!\\\"; out.println(str); % 运行之前需要先修改一个设置,否则访问会有问题 在项

    2024年03月10日
    浏览(90)
  • 【Java】Eclipse如何创建java项目并运行

    前面Eclipse、JDK的安装与JDK环境变量配置好了之后,开始进行基本的使用 一、创建java项目并运行 1、先打开Eclipse IDE 2、创建项目 点击左上角的File—New—Project,这样就可以新建一个Java的项目了。也就是说,在Eclipse中,我们的Java项目会存放在workspace命名空间中,一个命名空间

    2024年02月03日
    浏览(46)
  • PyCharm社区版如何创建Django项目并运行

    1、使用PyCharm打开一个普通的Python项目 2、为该项目配置Django环境 (1)点击\\\"File\\\"-\\\"Settings\\\" (2)点击\\\"Project:项目名\\\"-\\\"Python Interpreter\\\"-\\\"+号\\\" (3)在搜索框输入要安装的包,选择要下载的版本,然后点击\\\"Install Package\\\"  (4)配置成功  3、创建Django项目 (1)打开终端Terminal(在最下

    2024年02月02日
    浏览(43)
  • 如何使用Vite创建Vue3的uniapp项目

    Vue3/Vite 版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7 以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node 路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置-运行配

    2024年02月09日
    浏览(124)
  • 创建一个uni-app项目并运行再浏览器及微信小程序

    第一步: 打开HBuilder X 点击文件列表 新建 项目 第二步: 如图所示(根据项目所需要的进行选择) 第三步: 创建完成之后项目文件的(介绍以及作用) 第四步: 如何将uni-app项目运行到不同的浏览器,我在这里运行的是微信小程序 (1) 点击运行可以查看到项目的多种运行方式 (2

    2024年02月12日
    浏览(69)
  • uniapp项目如何运行在微信小程序模拟器上

    在HbuilderX中的小程序写完后自己一定要保存,否则会出不来效果 那么怎么让uniapp项目运行在微信小程序开发工具中呢 1 在hbuilderx中点击运行到小程序模拟器 2 然后在项目目录中会生成一个文件夹 在微信小程序开发软件中的工具安全设置打开端口 或者在微信小程序中导入项目

    2024年02月13日
    浏览(41)
  • 【Golang入门教程】如何使用Goland创建并运行项目

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站: 人工智能 前言 在Go语言的开发过程中,选择一个合适的集成开发环境(IDE)是提高效率和编写可维护代码的关键一步。 JetBrains的Goland作为一款专门为Go语言开发的

    2024年01月25日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包