跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

一、uni-app 简介

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

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

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

二、下载使用

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

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

界面看起来很清爽。

1. 新建项目

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

这里打开了一个示例项目。点创建:

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

创建成功以后:

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

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

  • 打开main.js文件
  • 点菜单: 运行-运行到浏览器-Chrome
    如果找不到Chrome地址,会提示输入:
    点运行可以启动了:

3. 运行到手机

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

4. 使用微信小程序调试

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

看状态栏运行提示:

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

打开微信开发者工具,导入项目,路径是项目下的unpackage/dist/dev/mp-weixn:

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

导入项目,即可使用微信小程序预览或运行项目。

跨平台开发工具uni-app开发环境初体验(uniapp跨平台原理)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。