uni-app开发微信小程序

介绍

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

快速上手

HBuilderX可视化界面

开发者需先下载安装如下工具

• HBuilderX：官方IDE下载地址
• 创建uni-app

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

[图片上传失败...(image-b8ba18-1654073369201)]

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

[图片上传失败...(image-cd9257-1654073369201)]

• 运行uni-app

Tips: 如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。

1. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

[图片上传失败...(image-212942-1654073369201)]

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

uni-app默认把项目编译到根目录的unpackage目录。

发布uni-app

打包为微信小程序

1. 申请微信小程序AppID，参考：微信教程。
2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可在unpackage/dist/build/mp-weixin生成微信小程序项目代码。

[图片上传失败...(image-360d73-1654073369201)]

3. 在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。