## 图文教程以柚子黑卡为列，其他大部分模块都是通用，个别如人人商城等有对应的教程 ## 一、准备资料 确保你已经已经安装好框架 确保你的微擎站点已经开启了https 确保你已有认证小程序，如果没有，请前往mp.weixin.qq.com注册 ## 二、安装模块 1.首先将源码下载到本地电脑中，解压出来，然后将**mzhk\_sun**文件夹打包并上传至你的微擎站点**addons**文件夹内，并解压 2.进入你的微擎后台，**系统--小程序应用--未安装应用**\--安装 [](https://www.99999699.cn/wp-content/uploads/2019/01/1-10.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/2-9.png) ## 三、小程序对接 1.mp.weixin.qq.com将小程序基础信息先设置好，如小程序名称、介绍、类目 2.**微擎后台--系统--微信小程序--添加小程序--手动添加小程序--新建小程序** [](https://www.99999699.cn/wp-content/uploads/2019/01/3-9.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/4-5.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/5-5-1.png) 接上方，设置小程序信息，然后选择“**柚子黑卡**”模块，生成版本 【注意：各项数据一定要准确无误，否则后续你可能调试不出来】 [](https://www.99999699.cn/wp-content/uploads/2019/01/6-6.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/7-4.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/8-4-1.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/9-3.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/10-1.png) 这里我们先不进去管理，我们先完整对接小程序，还有下面的步骤 [](https://www.99999699.cn/wp-content/uploads/2019/01/11-1-1.png) 点击“**基础信息**”进入,将这里的信息一服务器配置信息、消息推送配置信息复制填写到小程序后台对应的地方 [](https://www.99999699.cn/wp-content/uploads/2019/01/12-1.png) 如下图，是小程序要设置的，左侧菜单--设置--开发设置 [](https://www.99999699.cn/wp-content/uploads/2019/01/12-2-2.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/13.png)[](https://www.99999699.cn/wp-content/uploads/2019/01/14.png) ## 四、模块设置 这里只讲下设置简单的以便后面的小程序前端对接，剩下的设置需要自己一一去添加内容什么的了，这些没有教程可写的 1.**系统设置--小程序设置**\--信息填写你自己的，这里必须填写正确，否则是一定对接不成功的 [](https://www.99999699.cn/wp-content/uploads/2019/01/21-2.png) 2.我们添加个轮播图方便等下对接的时候简单看下效果，剩下的设置就你们慢慢按照自己需求一一填写了 [](https://www.99999699.cn/wp-content/uploads/2019/01/22-3.png) ## 五、开发者工具对接小程序前端 微信开发者工具下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.电脑桌面**新建个文件夹**（最好**英文命名**，如我的命名youzi） [](https://www.99999699.cn/wp-content/uploads/2019/01/23-2.png) 2.新建小程序，这里千万要注意，**appid**一定要正确，且选择 **建立普通快速启动模板** 新版的默认会选择** 建立云开发快速启动模板** ** 坑**。我们选择  **普通快速启动模板**，否则是对接不上的 [](https://www.99999699.cn/wp-content/uploads/2019/01/24-2.png) 3.用**柚子黑卡的前端文件**（我们下载的源码里面**wxapp**这个文件夹），将**wxapp文件夹**内所有文件复制到youzi这个文件夹覆盖（就是我们创建小程序的那个文件夹） 4.开发者工具，点击**siteinfo.js**文件，然后修改**id和网址**，修改为自己的 id获取方法，微擎后台，系统--微信小程序--对应小程序--基础信息--浏览器中的链接中的**uniacid=4&acid=4** 其中4 这个数字就是id，当然这是我的，你们的要看你们的链接中的id是多少 然后ctrl+S保存，清缓存，编译。如下图，界面出来了。 [](https://www.99999699.cn/wp-content/uploads/2019/01/26-1.png) 但是这里我们发现并不对应啊，那么我们去后台检查下设置 原来是过审开关开启了，我们把他关闭下，在回到开发者工具，点击编译（相当于刷新吧），如图，这就正确了 [](https://www.99999699.cn/wp-content/uploads/2019/01/27.png) 注意事项：如果你配置都正确，没调试出界面的话，请检查下appid和密匙是否正确， 如果报错全是127.0.0.1一堆字样，请更新你开发者工具版本，或者重启开发者工具。 ## 六、小程序预览和上传、提交审核、上线发布 1.开发者工具，点击预览会生成二维码，用微信扫码可体验 2.开发者工具，点击上传，提交版本 3.登陆微信小程序后台，提交审核，按步骤要求提交即可 4.待腾讯爷爷审核通过后，再去微信小程序后台提交上线发布 ## 七、小程序怎么更新？ 将后端文件上传至addons文件夹，微擎后台，系统--小程序应用--已安装应用--应用会提示升级 然后，我们进入对应的小程序，新增一个版本 前端文件再用开发者工具重新对接一次，上传提交审核，发布