Uni-app运用HBuilderX和微信web开发者工具做微信小程序

目录

Uni-app、HBuilderX和微信web开发者工具的介绍

使用HBuilderX时需配置的工具

通过HBuilderX构建项目

 配置微信开发者工具

通过HBuilderX将项目运行到微信小程序中

 Uni-app中常用的组件及方法

扩展组件的使用方法

结语

---

---

Uni-app、HBuilderX和微信web开发者工具的介绍

Uni-app的介绍:

uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5以及各种小程序、快应用等多个平台.

HBuilderX的介绍:

HBuilderX中的H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。简称HX。
HX是轻如编辑器、强如IDE的合体版本。

微信web开发者工具的介绍:

为帮助开发者更方便、更安全地开发和调试基于微信的网页，我们推出了微信 web 开发者工具。它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。

使用HBuilderX时需配置的工具

首先下载完善项目需要的插件

 其次就是运行配置将需要运行到浏览器的文件路径给配置完善.

 HBuilderX可通过多种方式运行项目

  HBuilderX中配置微信开发者工具需打开项目的manifest.json文件进行配置微信小程序的AppID

 并且将微信开发者工具的路径配置正确，路径错误将会运行失败，找到微信小程序图标，鼠标右击点击属性->快捷方式，将目标(T)的路径复制到HBuilderX配置文件中

通过HBuilderX构建项目

通过HBuilderX创建第一个uni-app应用

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

 第二步：选择uni-app类型，输入项目名称，选择模板，选择vue的版本,点击创建，即可成功创建

 最后：项目创建完成之后需要测试是否可以正常运行项目，打开