## 1.打开登录微信开发工具,且扫码登录,开启调试端口 (下载地址:[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),推荐使用稳定版) 安装完成后后,打开,微信扫码登陆。 ![](https://img.kancloud.cn/0b/ca/0bca90d0e45cc96bad60fb62ca40b8cb_712x236.png) ## 2.下载[HBuilderX](https://www.dcloud.io/hbuilderx.html)已安装跳过 ## 3.HBuilderX 导入项目 ![](https://img.kancloud.cn/50/63/5063b143f402882b6ee7ce2e13c73858_745x471.png) ## 4. 找到clone的代码uniapp的文件目录 导入即可 ## 5. 修改域名,找到如下图所示填写自己的域名格式为:https://域名 ![](https://img.kancloud.cn/c9/43/c94367099cc59e35acfbca077ae5f88f_1040x710.png) ## 6. 点击上方发行按钮,这里特别说明下,调试时点击运行,发布小程序代码时点击发行,因两个方式打包方式差异,运行直接上传代码会超包。 ![](https://img.kancloud.cn/ad/45/ad45287dcb7f645945a101e94dd0f342_1048x686.png) ## 7\. 出现如下图所示,填写自己的小程序appid和小程序名称点击发布 ![](https://img.kancloud.cn/f5/cd/f5cd5c8500cb4d720cb032859bf40a6c_1306x855.png) 打包时编辑器出现:预编译器错误:代码使用了scss/sass语言,但未安装相应编译器... ![](https://img.kancloud.cn/00/87/0087ef4a939b732c25e72cf200a3281f_1565x423.png) 打开 工具--插件安装--scss/sass编译进行安装 ![](https://img.kancloud.cn/87/24/87246fbb04af5a45488539e88965ede7_1607x644.png) ![](https://img.kancloud.cn/3f/c2/3fc2fb14a9a6cbd12978b83ded4eb10b_809x56.png) ## 8.等待打包完成后会自动打开微信小程序开发工具 ![](https://img.kancloud.cn/38/f4/38f4fd85ada06a740147032c060698dc_1929x1039.png) 如果编辑器提示:微信开发者工具拒绝HBuilderX访问,请根据上述提示,在微信开发者工具中开启服务端口 ![](https://img.kancloud.cn/1b/61/1b617f2970328b88024afbd235894ea5_1822x924.png) ## 9.测试、查看数据是否正常加载。点击“购物车”,可正常授权登录,即配置正确。 如出现报错等,检查: 1..SSL证书是否安装正确,(浏览器输入https域名,看能否正常打开) 2.后台appid等是否配置正确 (后台需要配置好小程序相关资料,才能打开前台) 3.公众平台小程序合法域名是否配置正确 ![](https://img.kancloud.cn/e9/a6/e9a6a1c3f2feddf67e13569d319a99f3_360x606.png) ## 10.点击工具右上角,上传,填写版本号等,等待提示上传成功. ![](https://img.kancloud.cn/83/5e/835ea87ccd4c031e056e195bf00ed8b4_450x263.png) ## 11.小程序前端代码配置完成 注:如出现以下提示,不用管理会,点击确定。 ![](https://img.kancloud.cn/eb/d1/ebd1e43b5325ecfa3af17f07bb94bff0_434x165.png) ![](https://img.kancloud.cn/33/a0/33a0a3db582814f6b86c5f8d2b4fadd4_454x186.png)