🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 1.前言 目前官方开发的小程序均使用uniapp开发(非微信原生),所以此章节单独指导大家怎么使用uniapp, > 用uniapp开发有什么好处,这里简单提一下,一是学习成本低,一般前端会vue看点教程能很快入门,而且一套代码就能发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台,插件市场也有大量二开框架及大量优秀使用案例,在国内基本是开发各种小程序的首选 ## 2.下载编辑器 下载地址:https://www.dcloud.io/hbuilderx.html 下载并安装 **注意**:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 ![](https://img.kancloud.cn/98/c0/98c04b2d2610f7327f7d7df4e52e7714_1142x107.png) ​ 打开微信开发者工具,点击工具栏`设置`→`安全`→`服务端口`开启。 ![](https://img.kancloud.cn/1f/92/1f9276e2b5d1543b33eebcd181e8e443_732x226.png) 打开项目里的`manifest.json`配置文件 点击微信小程序配置,填写您的`微信小程序AppID` ## 3.安装插件 常规项目需要安装less编译 scss/sass编译等,顶部导航栏【工具】-【插件安装】,通常你没安装插件会给你提示,点提示安装插件即可,完全傻瓜化 ## 4.导入项目 一般项目位于者插件uniapp目录里面,直接将文件拖进hbuilderx编辑器即可 ## 5.运行项目 顶部导航栏点击【运行】,可以运行到h5和各种小程序环境 ![](https://img.kancloud.cn/83/f7/83f7a133a3f1cb716ffe443a9a835bec_507x519.png) ## 6.发布项目 顶部导航栏点击【发行】,可以运行到h5和各种小程序环境,小程序则在微信开发者工具点击上传即可 ![](https://img.kancloud.cn/c5/38/c538eb936567503860423eb9502c3367_341x564.png) ## 7.预览项目 有些模块或者插件后台有预览,那你需要将项目顶部导航栏点击【发行】-【网站-PC Web或手机H5】 然后将编译出来的包放置网站的运行目录也就是public目录下 新建一个目录以模块命令,比如H5设计模块,那就是diywap目录 ![](https://img.kancloud.cn/91/f9/91f9dddc548621cf3361462708e72076_183x147.png) ## 8.常见问题 1.提示上传代码超出限制,可选择`运行`-`运行到小程序`-`运行时是否压缩代码`打勾