uni-app之HelloWorld实现

锋哥原创的uni-app视频教程:

2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中...共计23条视频,包括:第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1eG411N71c/打开HBuilderX,目录 文件 -> 新建

输入项目名称,以及项目目录,勾选Vue3版本,我们刚开始学习,选择默认模版,然后点击“创建”按钮

uni-app之HelloWorld实现_第1张图片

启动项目,运行到浏览器谷歌:

菜单目录 运行 -> 运行到浏览器 -> Chrome

uni-app之HelloWorld实现_第2张图片

HBuilderX进行编译发布

uni-app之HelloWorld实现_第3张图片

自动打开谷歌浏览器,显示页面效果:

uni-app之HelloWorld实现_第4张图片

启动项目,运行到微信小程序工具:

菜单目录 运行 -> 运行到小程序模拟器 -> 微信开发者工具

uni-app之HelloWorld实现_第5张图片

注意

1,如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。

img

2,微信小程序开发工具,设置->安全设置 开启服务端口

uni-app之HelloWorld实现_第6张图片

成功运行。

uni-app之HelloWorld实现_第7张图片

你可能感兴趣的:(uni-app,uni-app)