用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

1

主題

1

帖子

10

積分

新手上路

Rank: 1

積分
10
https://github.com/shiheme/wx-booker

1.清爽干凈的圖書共享借閱模板 2.自定義頭部導航組件
3.卡片式Flex布局
4.實時天氣組件應用
5.詳情頁Canvas繪制朋友圈分享海報
6.圖書首圖應用CSS3偽類樣式
7.黑白兩套簡約圖標
8.應用交互CSS3動畫
9.結合Wordpress+微慕插件可打造完整小程序



wx-booker
微信小程序-圖書共享預定
體驗效果
在微信中搜索小程序【建始同城共享書】或掃碼體驗
初衷
通過微信小程序向當地愛書者提供一個圖書共享預定平臺,前期期望投入費用越少越好。同時還要有一定的變現能力,例如圖書借閱費、本地商家廣告投放。
功能分解
  • 圖書分類管理
  • 圖書信息管理,包括介紹和圖書相關ISBN、關聯分類等
  • 預借功能與費用管理
  • 圖書在館狀態
  • 全局搜索圖書
  • 圖書條形碼掃碼查詢
  • 用戶管理與用戶等級
  • 廣告管理
  • 本地商家服務投放
  • 圖書訂閱幫助信息
  • 用戶瀏覽與喜歡統計
  • UI交互清爽簡單
程序選型
  • 域名:阿里云購買
    制作小程序域名還是必須的,這個去阿里云買一個.com域名就好。年費50元+。
  • 服務器:阿里云ECS
    這個是做互聯網沒辦法少的,選用ECS主要因為我服務器有其他建站需求,建立多個網站使用。年費:500元+。
  • 后臺:Wordpress
    強大而免費,通過插件的使用可以打造出功能完善的CMS/商城系統。年費:0元。
  • RESTAPI:微慕小程序插件
    這個是用于將wordpress和小程序通信的插件程序,我是用的是微慕小程序插件1.6.0。年費:0元。
  • 小程序:微信小程序個人版
    前期因為無法預測變現能力,所以考慮成本,我輸出的是個人版小程序。未來有更多本地商業服務的時候,移植到企業版。年費:0元。
  • 前端:微慕開源版+自己摸索完成
    小程序的前端是我通過微慕開源版3.6的代碼二次開發完成,我現在Github已開源,有需要的朋友可以Clone。費用:0元。
使用
  • 環境準備 服務器選型購買、域名購買備案配置環境網上很多教程這里不再贅述,注意:微信小程序要求域名需備案、https://開頭。
  • 程序安裝
    • Wordpress安裝
      前往官方下載或者https://github.com/WordPress/WordPress最新版本,按網上教程一步步安裝。
    • Wordpress主題安裝
      我使用raz主題,主要是我比較懶,這個主題不光是因為我網站商城需要簡潔的效果,自帶的文章自定義字段也方便我定義。
    • Wordpress插件安裝
      這里用到兩個插件:微慕的小程序插件https://github.com/iamxjb/rest-api-to-miniprogram+全局搜索插件Search Everything,在wordpress后臺安裝新插件搜索進行安裝。前者的RestAPI用于與微信小程序通信,后者用于小程序支持字段搜索。

    • 微慕開源版下載
      微慕算很良心的小程序開源商,功能多,文檔詳細,社區活躍,值得使用。需要高級功能的可以去微慕商城購買專業版,提供在線技術支持。微慕開源版本在Github的傳送門:https://github.com/iamxjb/winxin-app-watch-life.net
    • 微信小程序賬號申請
      前往微信官方注冊小程序賬號,后臺獲取你的appid和秘匙,填寫相應的小程序信息。選擇服務類型時要注意,個人類型的小程序在服務類型選擇上要慎重,看官方文檔,最好選擇工具類型。
    • 微信小程序開發環境安裝
      前往微信官方下載最新版本的微信開發者工具,安裝后啟用微慕開源版的代碼,按微慕官方的幫助文檔修改代碼中相應的設置。

至此,程序安裝完成,這一步預覽小程序的效果是微慕小程序的模板。
  • 微信小程序-圖書共享預定模板安裝調試
    • Wordpress插件替換
      Clone 微信小程序-圖書共享預定到本地,其中code是小程序前端代碼。plug是微慕的小程序插件的修改版,該插件務必配合使用raz主題才能用。
    • 小程序前端代碼替換
      將code里的代碼復制替換微慕的前端代碼即可。
    • 建立分類
      代碼中的書籍、幫助FAQ、本地活動調用的是Wordpress的三個父級目錄。在Wordpress的文章分類中首先創建三個父級目錄,將目錄ID分別替換代碼的中cateparentID/categories。三個id分別在page/index/index.js,page/faq/faq.js,page/act/act.js

    • 寫文章
      自定義字段和分類記得填寫和選擇。注意書目、本地活動對應的字段對應不同的用途。
    • 配置本地活動輪播
      進入wordpress后臺微慕的小程序插件,輸入要在小程序中輪播顯示的本地活動文章ID。用于輪播顯示在詳情頁底部和我的信息頁入口。
    • 天氣和地址配置
      使用高德SDK,前往并注冊賬號獲取key,key和city需要配置成你的信息。需要配置的文件pages/mine/mine.js,pages/amap/amap.js。SDK在Github的傳送門:https://github.com/amap-demo/wx-regeo-poiaround-weather


感謝相關資源

01.jpg (71.38 KB, 下載次數: 362)

01.jpg
分享至 : QQ空間
2 人收藏
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
河北20选5大星走势图 安徽快3游戏即将上市 股票融资软件有那些 0000001上证指数 舟山飞鱼直播走势图片 重庆时时彩平台 内蒙古11选五内蒙古11 吉林快3基本走势 浙江12下载 江西11选五中奖说明 正常期货配资手续费标准 安徽快3预测一定牛遗漏 云南快乐十分一定牛电脑版 易配资平台 最新排列五奖表图 河北11选五一定牛遗漏数据 青海十一选五一定牛