微信小程序是目前特別火的一款程序,也是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗。
企業想自己搭建簡單的小程序官網,可以使用開源的一些資源進行搭建,用到的接口程序和小程序源碼都是開源的,閒言少敘,下面給大家講下如何進行搭建。
此處用到CMS小程序使用wepy框架開發的,後臺的接口是使用的jeecg框架+CMS插件提供。
序號 | 內容 | 下載地址 |
1 | Jeecg源碼 | https://gitee.com/jeecg/jeecg |
2 | CMS插件後臺源碼 |
http://yun.jeecg.org/pmall/detail/BDF4B95BE74648B79F984AA065C302F7 |
3 | CMS小程序 | https://gitee.com/jeecg/jeewx-app-cms |
第一步:搭建Jeecg 框架
1、下載Jeecg源碼
解壓後用Eclipse Maven導入到工程中。詳細步驟請參照在線文檔:http://jeecg3.mydoc.io/
2、執行SQL文件
打開項目後找到docs目錄,根據自己所用的數據庫選擇對應的文件SQL文件。
3、啓動JEECG項目
點擊Run或者Debug啓動項目,啓動成功在頁面上輸入http://localhost:8080/jeecg 即可訪問Jeecg系統。
第二步:導入CMS插件
1、下載CMS插件後臺源碼
解壓後用Eclipse Maven導入到工程中。
2、執行數據庫腳本
找到項目中doc文件,執行該文件夾下的數據庫腳本到JEECG數據庫,腳本的最底部是CMS系統的菜單。
3、引入CMS插件
打開jeecg的POM找到<dependencys>,在其中引入CMS插件的POM
<!-- CMS 插件 -->
<dependency>
<groupId>org.jeecgframework.p3</groupId>
<artifactId>jeecg-p3-biz-cms</artifactId>
<version>1.0.0</version>
</dependency>
4、啓動jeecg項目
點擊Run或者Debug啓動項目。啓動成功在頁面上輸入http://localhost:8080/jeecg 即可訪問Jeecg項目。
5、配置菜單
之前在sql初始化時,我們已經創建好了菜單。找到【系統管理->角色管理】,授權菜單權限,然後用戶就可以訪問CMS的菜單了。
6、對外提供接口
CMS插件中提供了API接口,可用於小程序的接口調用。
接口清單如下:
接口說明 |
接口地址 |
獲取一級欄目列表 |
/api/cms/menu.do |
分頁獲取指定欄目的文章列表 |
/api/cms/articles.do |
根據文章ID獲取文章詳情 |
/api/cms/queryOneAfticles.do |
獲取全部廣告位列表 |
/api/cms/quetyAllAdlmages.do |
獲取站點信息 |
/api/cms/querySitelnfo.do |
第三步:搭建小程序環境
1、CMS小程序下載
CMS小程序是基於wepy框架開發的,環境搭建和開發過程請參照在線文檔: http://wepydemo.mydoc.io/
2、配置代碼
前面我們已啓動包含CMS插件的Jeecg工程,即接口已開放訪問,這樣就可以模擬本地CMS插件提供接口供小程序調用。
找到項目中src->api->api.js 文件,修改其中的domain改爲:http://localhost:8080/jeecg
3、啓動項目
在命令行中輸入wepy build –watch 或者是 npm run dev 來進行實時編譯。
編譯後會在項目中生成一個dist目錄,這個目錄就是用於小程序展示的。
4、調試小程序
打開微信開發者工具,項目目錄中選擇CMS小程序剛生成好的dist目錄,AppID輸入開發者綁定的小程序AppID,項目名稱可以隨意輸入,例:CMS。輸入完成點擊確定,就可以看到下面的界面:左側就是小程序的展示,右側爲對應的文件和展示控制檯信息。
第四步:正式發佈
1、JEECG及CMS插件發佈
小程序的接口需要發佈到https上,即CMS部署後,配置htttps域名即可。
2. 小程序發佈
將小程序上傳到微信小程序官網,待審覈通過後即可訪問。訪問效果如下: