dcloud-uniapp学习笔记一、开发环境初体验

dcloud-uniapp学习笔记一、开发环境

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

一、uni-app 简介

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

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

二、下载使用

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

dcloud-uniapp学习笔记一、开发环境初体验_第1张图片
界面看起来很清爽。

1. 新建项目

dcloud-uniapp学习笔记一、开发环境初体验_第2张图片

这里打开了一个示例项目。
点创建:
在这里插入图片描述

创建成功以后:
dcloud-uniapp学习笔记一、开发环境初体验_第3张图片

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

  • 打开main.js文件
  • 点菜单: 运行-运行到浏览器-Chrome
    如果找不到Chrome地址,会提示输入:
    dcloud-uniapp学习笔记一、开发环境初体验_第4张图片
    点运行可以启动了:
    dcloud-uniapp学习笔记一、开发环境初体验_第5张图片

3. 运行到手机

dcloud-uniapp学习笔记一、开发环境初体验_第6张图片

dcloud-uniapp学习笔记一、开发环境初体验_第7张图片

4. 使用微信小程序调试

dcloud-uniapp学习笔记一、开发环境初体验_第8张图片

dcloud-uniapp学习笔记一、开发环境初体验_第9张图片

看状态栏运行提示:
dcloud-uniapp学习笔记一、开发环境初体验_第10张图片
打开微信开发者工具,导入项目,路径是项目下的unpackage/dist/dev/mp-weixn:
dcloud-uniapp学习笔记一、开发环境初体验_第11张图片

导入项目,即可使用微信小程序预览或运行项目。
dcloud-uniapp学习笔记一、开发环境初体验_第12张图片

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