## 圖文教程以柚子黑卡為列,其他大部分模塊都是通用,個別如人人商城等有對應的教程
## 一、準備資料
確保你已經已經安裝好框架
確保你的微擎站點已經開啟了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文件夾,微擎后臺,系統--小程序應用--已安裝應用--應用會提示升級
然后,我們進入對應的小程序,新增一個版本
前端文件再用開發者工具重新對接一次,上傳提交審核,發布
- 小程序插件設置
- 如何安裝服務器環境
- 人人商城小程序前端對接教程
- 微擎配置模板消息(公眾號配置模板消息)
- 微擎配置模板消息(小程序配置模板消息)
- 微擎如何配置https啟用域名ssl證書
- 微擎對接公眾號詳細圖文教程
- 微信開發者工具對接小程序前端教程【通用模塊】
- 安裝微擎應用模塊方法
- 微擎配置微信支付的方法【公眾號配置微信支付】
- 微擎小程序配置微信支付教程【小程序配置微信支付】
- 寶塔控制面板如何安裝解密擴展
- 志匯同城微圈小程序常見問題
- getLocation需要在app.json中聲明permission字段
- 百度網盤下載資源限速?
- 小程序前端上傳提示超過2M解決辦法
- 七牛平臺配置及微擎開啟七牛云附件
- 阿里云如何購買免費SSL證書
- 微擎性能優化如何開啟memcache與redis