创建一个uni-app项目并运行再浏览器及微信小程序

这篇具有很好参考价值的文章主要介绍了创建一个uni-app项目并运行再浏览器及微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用HBuilder X创建

第一步:打开HBuilder X > 点击文件列表 > 新建 > 项目

uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序

第二步:如图所示(根据项目所需要的进行选择)
uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序
第三步:创建完成之后项目文件的(介绍以及作用)

uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序
uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序

第四步:如何将uni-app项目运行到不同的浏览器,我在这里运行的是微信小程序

(1) 点击运行可以查看到项目的多种运行方式

uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序
(2) 在浏览器中运行项目步骤如下

如果是第一次运行uni-app项目在浏览器中需要配置地址

配置浏览器地址
uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序
在桌面选择谷歌右键打开点击文件位置
uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序
配置完成后关闭即可会自动保存
uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序
(3)在微信小程序运行项目

第一次在小程序中运行项目的话会报错 , 解决方法:需要到小程序里边选择 手动打开工具 -> 设置 -> 安全设置,将服务端口开启 (默认是关闭的),然后点击运行 > 选择运行到小程序
uniapp运行到浏览器,uni-app,uni-app,微信小程序,小程序

然后再选择选择微信小程序运行即可文章来源地址https://www.toymoban.com/news/detail-527554.html

到了这里,关于创建一个uni-app项目并运行再浏览器及微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 学会用命令行创建uni-app项目并用vscode开放项目

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 创建 uni-app 项目 命令行创建 uni-app 项目 编译和运行 uni-app 项目: 用 VS Code 开发 uni-app 项目 (不必依赖 HBuilderX) vue3+ts版: npx degit dcloudio/uni-preset-vue#vite-ts 项目名称 官网

    2024年02月09日
    浏览(31)
  • 详解uni-app项目运行在微信小程序调试

    uni-app项目运行在微信小程序调试 UNI-APP学习系列之详解uni-app项目运行在微信小程序调试 微信小程序工具,【下载地址】 打开下载地址后,选择电脑所用操作系统的稳定版本进行下载并安装。 项目运行在微信小程序 打开HbuilderX,运行 == 运行到小程序或模拟器 == 运行设置 =

    2024年02月15日
    浏览(40)
  • Uni-app + Vue3 + TS +Vite 创建项目

    npm 都很熟,可是与 npm 如此相似的 npx 是干嘛的呢?我们为甚要介绍 npx ? 由于 uni-app 官方提供创建命令使用的是 npx,所以我们先来了解下 npx 是干什么的?它与 npm 的区别。 npx 是 npm 的高级版本,它从 npm v5.2 版本开始引入的,与 npm 绑定在一起,无需额外安装,具有更大的功

    2023年04月15日
    浏览(50)
  • 快速学会创建uni-app项目并了解pages.json文件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 前言  创建 uni-app 项目  通过 HBuilderX 创建 pages.json  pages  style  globalStyle tabBar 经过半个多月的学习,vue基础入门就告一段落啦,接下来就要开始学习制作微信小程序了

    2024年02月11日
    浏览(24)
  • uni-app 从0 到 1 制作一个项目,收藏等于学会

    uni-app 是使用 vue.js 开发的所有前端应用框架,开发者编写的一套代码,可以发布到 ios、android、web ,以及各种小程序平台。 一、创建uni-app 1、hBuilderX 可视化创建 最便捷的就是使用 hbuilder 可视化创建项目,在点击工具栏里的文件 - 新建 - 项目: 选择uni-app类型,输入工程名,

    2024年02月07日
    浏览(40)
  • uni-app 可视化创建的项目 移动端安装调试插件vconsole

     可视化创建的项目,在插件市场找不到vconsole插件了。 又不好npm install vconsole 换个思路,先创建一个cli脚手架脚手架的uni-app项目,然后再此项目上安装vconsole cli脚手架创建uni-app项目 安装插件 项目Terminal运行命令:npm install vconsole   安装完成之后,插件在node_modules/vconsol

    2024年02月10日
    浏览(27)
  • 【uni-app】【Android studio】手把手教你运行uniapp项目到Android App

    选择运行到Android App基座 选择运行项目 1、连接手机,在手机上选择 传输文件。 2、打开 设置 - 关于本机 - 版本信息 -连续点击4-5次 版本号 ,输入手机密码,系统就进入了开发者模式。 3、 设置 其他设置 开发者选项 打开 开发者选项 打开 USB调试 。 4、回到Hbuilder,点击刷新

    2024年02月09日
    浏览(36)
  • 创建第一个微信小程序 uni-app + Vue3 + Color UI + Webstorm

    最近打算撸一个小程序练练手,顺便记录下开发过程。。也欢迎感兴趣的小伙伴交流小程序开发经验! 大概会有一个系列的博客吧(尽量不太监 目录 一、前置步骤 1.1 注册微信小程序账号,取得AppID 1.2 下载并安装微信开发者工具 二、uni-app 2.1 下载并安装 HBuilderX 2.2 新建un

    2024年02月07日
    浏览(43)
  • 微信小程序开发者工具运行 uni-app 项目时报错 Uncaught (in promise) undefined

    开发者工具控制台报错 Uncaught (in promise) undefined,如图: 该错误主要是因为调试基础库过高或过低导致的。 在 微信开发者工具 — 详情 — 本地设置 — 调试基础库 中,将调试基础库版本调低或调高即可 调试基础库:此处选择的基础库为微信中的基础库版本,且仅用于开发者

    2024年02月12日
    浏览(52)
  • 【第二趴】uni-app开发工具(手把手带你安装HBuilderX、搭建第一个多端项目初体验)

    聚沙成塔——每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项,它也已经成为前端开发者不可或缺的一项技能了,所以凉哥为大家推出 聚沙成塔【45天玩转uni-app】 专栏,帮助大家对 uni-app 进行学习和理解,uni-app可以通过一套代

    2023年04月23日
    浏览(78)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包