## 圖文教程以柚子黑卡為列，其他大部分模塊都是通用，個別如人人商城等有對應的教程 ## 一、準備資料 確保你已經已經安裝好框架 確保你的微擎站點已經開啟了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文件夾，微擎后臺，系統--小程序應用--已安裝應用--應用會提示升級 然后，我們進入對應的小程序，新增一個版本 前端文件再用開發者工具重新對接一次，上傳提交審核，發布