uni-app的初体验

目录

一、下载HbuilderX(方式一)

二、创建项目

三、运行项目

(1)运行到微信开发者工具

(2)运行到浏览器

四、用VSCode开发uniapp


创建uniapp项目主要有两种方式(1)一是用HbuilderX直接创建原生的(HbuilderX写 +模拟器自启动显示), (2)另一种就是用命令行创建,(VSCode写+模拟器导入显示)

一、下载HbuilderX(方式一)

就直接在应用商店下载就好了,

二、创建项目

就是点击左上角的绿色的添加按钮,然后选项目后如图

取个名字直接创建就好

三、运行项目

(1)运行到微信开发者工具

此时会报错没有下载这个微信开发者工具

要去下载这个工具

然后下载好后在HbuilderX里点击工具设置,出现这个小程序运行设置,将微信开发者工具的下载路径放在这里

此时在运行到开发者工具就能自动打开开发者工具了

建议把自动保存打开

(2)运行到浏览器

先配置浏览器地址

之后就是运行到浏览器

至此uniapp项目用Hbuilder运行就可以了

四、用VSCode开发uniapp

先在vscode上下载这几个插件

然后命令行输入一下命令创建vue+ts+vite的uniapp

javascript 复制代码
npx degit dcloudio/uni-preset-vue#vite-ts my-project

然后就可以用vscode打开这个创建的项目,然后用pnpm初始化,然后pnpm dev:mp-weixin来运行

然后再在微信开发者工具中导入这个运行后生成的dist/dev/mp-weixin

相关推荐
雪芽蓝域zzs5 小时前
uni-app原生editor封装编辑组件(vue3)
uni-app
felipeas1 天前
uni-app day1
uni-app·notepad++
前端后腿哥1 天前
UNIAPPX UTS插件Widget开发完整教程(Android版)
前端·uni-app
黄同学real2 天前
uni-app 真机调试:手动代理环境下访问内网 API 的解决方案
uni-app
Hoshizola2 天前
uniapp与蓝牙设备连接详细步骤
前端·uni-app
优雅格子衫2 天前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
路光.2 天前
uniapp中解决webview在app中调用,有过渡空白问题,增加过渡动效
uni-app·vue·app·uniapp
linlinlove22 天前
前端uniapp、后端thinkphp股票系统开发功能展示、代码披露、HQChart
前端·uni-app·echarts·thinkphp·hqchart·配资·deepseek选股票
2501_915909062 天前
深入理解HTTPS中间人抓包技术原理与实战指南
网络协议·http·ios·小程序·https·uni-app·iphone
2501_916007473 天前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview