一、安裝的工具(準備工作)
該項目部署複雜度偏高(有興趣學習該技術棧者可以嘗試部署)
1. 我們先安裝node.js [http://nodejs.cn/download/]
2. win+r 輸入cmd 點擊確定打開命令行面板輸入(安裝cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 運行項目至少需要兩個開發工具,一個Hbuildex;一個微信開發者工具
Hbuildex下載地址:下載app開發版
微信開發者工具:下載穩定版
4. 打開微信公眾平台—註冊小程序—獲取Appid--開發管理--開發設置中獲取Appid
二、雲數據庫的配置
diancan-user:該套代碼包為小程序代碼
1.將該套代碼包放入Hbuildex中,打開manifest.json文件,微信小程序配置——微信小程序Appid改為你註冊的小程序id。
在APP.vue文件中把env改為自己的環境id(環境id在微信開發者工具的雲開發中獲取)根據提示創建一個雲開發和雲開發環境。
2.鼠標選中該項目diancan-user,然後點擊編輯器頂部運行——運行到小程序模擬器。此時有可能不會打開,那麼手動打開微信開發者工具,在設置中的代理設置裡點擊安全開啟服務端口,如果成功運行到開發者工具,此時控制台會報錯
3.點擊微信開發者工具頂部雲開發(如果還沒有開通根據提示開通)進入雲開發控制台,點擊數據庫根據以下命名創建每一個集合:
business - acc :商家账号:权限{所有用户可读,仅创建者可读写}
shop - infor :商家信息:同上
dishes - category :菜品类目:同上
dishunit:菜品单位:同上
dishes - data :菜品管理:自定义权限把以下代码粘贴进去{ "read" : true , "write" : true }
order - data:存储订单:权限{仅创建者可读写}
seven_day_sales:存储每一天的销售额:自定义权限把以下代码粘贴覆盖进去
{ "read" : true , "write" : true }
table_qr_code:桌号管理:权限{所有用户可读,仅创建者可读写}
4.在微信開發者工具上的資源管理器上創建一個文件夾,文件夾命名為:cloudfunctions鼠標右即點擊創建一個nodejs雲函數命名為:Dish-manage,然後我們的Dish-manage文件下會生成一些文件,我們只要將文件裡的index.js文件替換為diancan-user/雲函數文件裡的index.js
然後將文件裡的env替換成自己的環境id,代碼如下:
cloud.init({
env: '改为你自己的云环境id'
})
接下來在Dish-manage文件上右鍵:上傳並部署(選擇不上傳node_modules),雲端安轉依賴,等待上傳成,包括雲函數中文件的search.js文件(步驟同上)
三、代碼的修改
1. 回到user代碼包中,打開main.js文件15-16行以及pc端的src/main.js,如下:
Vue . prototype . goeasy = GoEasy . getInstance ( {
host : "改为你自己的区域" , //改为:区域.goeasy.io
appkey : "改为你自己的appkey" , //进入详情Common key
modules : [ 'pubsub' ] //根据需要,传入‘pubsub’或'im’,或数组方式同时传入
} ) ;
2.微信公眾開發管理中的平台開發設置中配置服務器域名(socket合法域名)wss://wx-hangzhou.goeasy.io
3. 打開diancan-node:該套代碼包為接口端
4.打開config/databaseapi.js文件第7第8行如下,將小程序appid和秘鑰secret改為你自己的
let param = qs . stringify ( {
grant_type : 'client_credential' ,
appid : '改为你自己的' ,
secret : '改为你自己的' (微信公众平台进入开发管理-开发设置生成一个APPsecret)
} )
5.模板id獲取步驟:
5.1打開微信公眾平台選擇訂閱信息,選擇公共模板庫搜索模板輸入——商家確認訂單通知——選上支付金額、支付時間、訂單編號,三項。
注:小程序註冊的的服務類目必須是餐飲服務中的餐飲信息服務才可以檢索到,如果不是餐飲信息可以在我們微信公眾平台的設置中找到服務類目進行更改或者添加進去。
5.2選擇完模板後,就可以在我的模板中查看模板id了,我們把它複製下來打開config/databaseapi.js文件第70行將訂閱消息template_id改為你自己的模板id。
6.打開router/order/order.js文件中更改75行的三個字段名稱(amount1,time2,character_string3)。 (在我的模板——詳情中查看自己的三個字段。看看是否與該字段一樣,如果不一樣則進行更改)
7.我們再次打開diancan-user中的pages/home-page/page.vue 將121行中template_id改為自己的。
四、騰訊雲存儲(cos)的配置
1.在node代碼中打開cos/cos.js文件第4-11行如下:
var cos = new COS({
SecretId: '改为你自己的', (在腾讯云的密钥管理中获取)
SecretKey: '改为你自己的', (同上)
Protocol:'https:'
});
打開該鏈接註冊[https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2Fcos]進入騰訊雲對象存儲我們找到存儲桶,選擇創建一個存儲桶(我們只需要修改權限為:公有讀私有寫,地域選擇離自己最近的)
let Bucket = '改为你自己的' (这个为创建的存储桶名称)
let Region = '改为你自己的' (这个为所属的地域)
2.進入存儲桶中創建一個文件夾用於存放上傳的文件。
第18行和36行:Key: '改為你自己的文件夾名稱' + filename,(key為自己創建的文件夾)
3.在HbuliderX中右鍵diancan-node 使用命令行打開出窗口所在目錄輸入npm install --save 成功後會出現一個node_modules包再執行nodemon app.js啟動服務器端如果沒有成功就用npm run test
五、後台管理端的啟動
saoma-diancan-pc:該套代碼包後台管理端
1.在HbuliderX中右鍵saoma-diancan-pc 使用命令行打開出窗口所在目錄輸入npm install --save
2.再執行npm run serve 啟動項目,瀏覽器打開該地址,註冊一個賬號再登錄進去
3.根據提示創建商家信息,此時可以添加點餐碼和上傳菜品類目和上架菜品
4.在上一步後台管理添加點餐碼和上架菜品後,到微信開發者工具通過你添加的二維碼編譯進入
六、連接打印機
1.我們必須購買芯燁雲打印機
2.我們根據說明書將打印機連接到wifi
3.進入芯燁雲打印機後端管理平台[https://admin.xpyun.net/#/login?redirect=%2Fpersonal]註冊賬號, 然後進行認證後即可進入。
4.然後我們選擇打印管理中的-設備管理輸入打印機編號也就是打印機身上的sn把打印機添加進我們的設備中。
5.我們打開我們diancan-user文件在printer中打開Xpyun.js文件
修改以下代碼
let xpYun = {
user : '在芯烨云后端管理平台中的账号信息把开发者id拷贝过来' ,
timestamp : new Date ( ) . getTime ( ) ,
UserKEY : '这个为开发者密钥在开发者id下面' ,
sn : '打印机身上的sn' ,
name : '设置成自己的店铺名称'
}
6.如果我們要更改打印機打印的內容我們進入到print_content.js文件中,根據自己的店面,地址,電話,進行更改
七、代碼上線(必須在本地測試沒有任何問題,能跑通的情況再進行上線部署)
1.diancan-node
我們先打開[https://cloud.weixin.qq.com/cloudrun?utm_source=idecloudconsole] 然後掃碼登錄然後選擇我們所要登錄的小程序,在提示面板中往下拉選擇koa框架部署(時間可以有點長,耐心等待一下)。等待部署成功之後選擇發布,然後選擇手動上傳代碼包選擇文件夾,這時候我們先打開我們的編輯器看看我們的diancan-node中有沒有node_modules把它刪除了,然後再選擇我們的diancan-node文件夾。端口改成5000,然後選擇發布。發布完成之後我們選擇用公共域名訪問。
2.saoma-diancan-pc
2.1我們用Hbuildex打開然後在api文件夾中選擇api.js 把以下代碼const url = 'http://localhost:5000/api/ 修改成我們剛剛在雲託管中拿到的域名。
例如:const url = 'https://koa-bu8u-166122-1309878414.ap-shanghai.run.tcloudbase.com/api/'
2.2在hbulider中右鍵saoma-diancan-pc 使用命令行打開出窗口所在目錄輸入npm run build 然後saoma-diancan-pc文件夾下面會出現一個dist文件。
2.3我們再打開微信開發工具然後選擇雲開發-選擇更多選擇靜態網站,沒有開通的需要開通一下,開通完成之後,我們選擇上傳文件把dist文件夾中的文件全部上傳進去,上傳完成之後選擇網站配置把域名複製下來,就可以直接訪問了。
2.4.diancan-user
我們在Hbulid編輯器中選擇發行-小程序微信-然後會打開微信開發工具-進入微信開發工具選擇發行即可