如何利用开源项目,帮助企业免费搭建小程序官网
微信小程序是目前特別火的一款程序,也是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗。
企業想自己搭建簡單的小程序官網,可以使用開源的一些資源進行搭建,用到的接口程序和小程序源碼都是開源的,閑言少敘,下面給大家講下如何進行搭建。
此處用到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. 小程序發布
? ? 將小程序上傳到微信小程序官網,待審核通過后即可訪問。訪問效果如下:
總結
以上是生活随笔為你收集整理的如何利用开源项目,帮助企业免费搭建小程序官网的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怎样正确查看Linux的内存占用情况
- 下一篇: http://blog.csdn.net