0
点赞
收藏
分享

微信扫一扫

HBuilderX学习笔记一、开发环境初体验


HBuilderX学习笔记一、开发环境初体验

  • ​​一、uni-app 简介​​
  • ​​二、下载使用​​
  • ​​1. 新建项目​​
  • ​​2. 在电脑浏览器运行调试​​
  • ​​3. 运行到手机​​
  • ​​4. 使用微信小程序调试​​

一、uni-app 简介

uni-app是一个号称可以开发一次、部署到微信小程序、APP、支付宝小程序等多端的开发工具。
官网:
​​​ https://www.dcloud.net.cn/​​

官方建议开发环境是使用 HBuilderX

二、下载使用

从官网下载 HBuilderX ,我这里下载的是App开发版。
解压,启动 ​​​HBuilderX.exe​

HBuilderX学习笔记一、开发环境初体验_微信小程序
界面看起来很清爽。

1. 新建项目

HBuilderX学习笔记一、开发环境初体验_uni-app_02

这里打开了一个示例项目。
点创建:
HBuilderX学习笔记一、开发环境初体验_uni-app_03

创建成功以后:
HBuilderX学习笔记一、开发环境初体验_uni-app_04

2. 在电脑浏览器运行调试

  • 打开main.js文件
  • 点菜单: 运行-运行到浏览器-Chrome
    如果找不到Chrome地址,会提示输入:
    HBuilderX学习笔记一、开发环境初体验_uni-app_05
    点运行可以启动了:
    HBuilderX学习笔记一、开发环境初体验_微信小程序_06

3. 运行到手机

HBuilderX学习笔记一、开发环境初体验_chrome_07

HBuilderX学习笔记一、开发环境初体验_chrome_08

4. 使用微信小程序调试

HBuilderX学习笔记一、开发环境初体验_chrome_09

HBuilderX学习笔记一、开发环境初体验_uni-app_10

看状态栏运行提示:
HBuilderX学习笔记一、开发环境初体验_微信小程序_11
打开微信开发者工具,导入项目,路径是项目下的unpackage/dist/dev/mp-weixn:
HBuilderX学习笔记一、开发环境初体验_微信小程序_12

导入项目,即可使用微信小程序预览或运行项目。
HBuilderX学习笔记一、开发环境初体验_微信小程序_13


举报

相关推荐

0 条评论