uni-app 快速上手


整理自 uni-app官方教程。

uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

uni-app支持通过可视化界面,vue-cli命令行两种方式快速创建项目。我们这里主要说一下通过可视化界面创建项目

通过HBuilderX可视化界面

环境搭建

可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

开始之前,开发者需先下载安装如下工具:

HBuilderX:官方IDE下载地址
微信开发者工具:调试预览工具。最新版本下载地址

创建uni-app

点击工具栏里的文件 -> 新建 -> 项目:

选择uni-app,输入项目名称,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

运行uni-app

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
在这里插入图片描述
提示: 如果是第一次使用,需要配置开发工具的相关路径。请点击工具栏的运行->运行到小程序模拟器->运行设置,配置相应的小程序开发者工具的路径。

调试

使用微信web开发者工具调试

uni-app 运行到微信web开发者工具,可在控制台查看 console 信息,网络请求等信息等。

页面样式调试和一般的web项目一样,通过调试的箭头选中元素即可查看相应的节点和样式

发布(微信小程序)

按照如下步骤可将 uni-app 发布到微信小程序:

  1. 申请微信小程序AppID,参考微信教程
  2. 在HBuiderX中,打开manifest.json,如下图所示配置小程序AppID
  3. 在HBuilderX中顶部菜单依次点击 “运行” --> “运行到小程序模拟器” --> “微信开发者工具”,等待 uni-app 项目成功编译并自动启动微信开发者工具
  4. 在微信开发者工具中,测试项目代码运行正常后,点击"上传"按钮,之后按照 “提交审核”–> “发布” 小程序标准流程,逐步操作即可,详细查看微信官方教程
发布了34 篇原创文章 · 获赞 75 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/xqainyo/article/details/105402709