1. Installation tools (preparation work)
The deployment complexity of this project is relatively high (those interested in learning this technology stack can try deployment)
1. Let’s install node.js first [http://nodejs.cn/download/]
2. Win+r enter cmd and click OK to open the command line panel input (install cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. At least two development tools are required to run the project, one Hbuildex; one WeChat developer tool
Hbuildex download address: Download app development version
WeChat Developer Tools: Download the stable version
4. Open the WeChat public platform—Register Mini Program—Get Appid—Develop Management—Get Appid in Development Settings
2. Cloud database configuration
diancan-user: This code package is a small program code
1. Put the code package into Hbuildex, open the manifest.json file, and change the WeChat Mini Program Appid to the Mini Program ID you registered.
Change env in the APP.vue file to your own environment id (the environment id is obtained in the cloud development of WeChat developer tools) and follow the prompts to create a cloud development and cloud development environment.
2. Select the project diancan-user with the mouse, and then click Run at the top of the editor - run to the applet simulator. It may not open at this time, so manually open the WeChat developer tools, click Safely open the service port in the proxy settings in the settings, if the developer tools are successfully run, the console will report an error.
3. Click Cloud Development at the top of WeChat Developer Tools (if it has not been activated yet, follow the prompts to activate it) to enter the Cloud Development Console, click Database to create each collection according to the following naming:
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. Create a folder in the resource manager on WeChat Developer Tools. The folder is named: cloudfunctions. Right-click and create a nodejs cloud function named: Dish-manage, and then it will be generated under our Dish-manage file. For some files, we only need to replace the index.js file in the file with the index.js in the diancan-user/cloud function file.
Then replace the env in the file with your own environment id. The code is as follows:
cloud.init({
env: '改为你自己的云环境id'
})
Next, right-click on the Dish-manage file: Upload and deploy (choose not to upload node_modules), install the dependencies on the cloud, and wait for the upload to complete, including the search.js file of the file in the cloud function (the steps are the same as above)
3. Code modifications
1. Return to the user code package, open lines 15-16 of the main.js file and src/main.js on the PC side, as follows:
Vue . prototype . goeasy = GoEasy . getInstance ( {
host : "改为你自己的区域" , //改为：区域.goeasy.io
appkey : "改为你自己的appkey" , //进入详情Common key
modules : [ 'pubsub' ] //根据需要，传入‘pubsub’或'im’，或数组方式同时传入
} ) ; 2. Configure the server domain name (socket legal domain name) wss://wx-hangzhou.goeasy.io in the platform development settings in WeChat public development management
3. Open diancan-node: this code package is the interface end
4. Open line 7 and 8 of the config/databaseapi.js file as follows, change the mini program appid and secret key secret to your own
let param = qs . stringify ( {
grant_type : 'client_credential' ,
appid : '改为你自己的' ,
secret : '改为你自己的' （微信公众平台进入开发管理-开发设置生成一个APPsecret）
} ) 5. Steps to obtain template id:
5.1 Open the WeChat public platform and select subscription information, select the public template library to search for template input - merchant confirmation order notification - select payment amount, payment time and order number.
Note: The service category registered in the mini program must be the catering information service in catering services before it can be retrieved. If it is not catering information, you can find the service category in the settings of our WeChat public platform to change or add it.
5.2 After selecting the template, you can view the template id in My Templates. We copy it and open line 70 of the config/databaseapi.js file to change the subscription message template_id to your own template id.
6. Open the router/order/order.js file and change the three field names (amount1, time2, character_string3) on line 75. (Check your three fields in My Template - Details. See if they are the same as this field, if not, make changes)
7. We open pages/home-page/page.vue in diancan-user again and change the template_id in line 121 to our own.
4. Configuration of Tencent Cloud Storage (cos)
1. Open lines 4-11 of the cos/cos.js file in the node code as follows:
var cos = new COS({
SecretId: '改为你自己的', （在腾讯云的密钥管理中获取）
SecretKey: '改为你自己的', （同上）
Protocol:'https:'
});
Open this link to register [https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2Fcos]. Enter Tencent Cloud Object Storage. We find the bucket and choose to create a bucket. (We only need to modify the permissions to: public read and private write, and choose the region closest to you)
let Bucket = '改为你自己的' （这个为创建的存储桶名称）
let Region = '改为你自己的' （这个为所属的地域）
2. Enter the bucket and create a folder to store the uploaded files.
Lines 18 and 36: Key: 'Change to your own folder name' + filename, (key is the folder you created)
3. Right-click diancan-node in HbuliderX and use the command line to open the directory where the window is located. Enter npm install --save. After success, a node_modules package will appear. Then execute nodemon app.js to start the server. If it does not succeed, use npm run test.
5. Startup of the background management terminal
saoma-diancan-pc: The background management terminal of this code package
1. Right-click saoma-diancan-pc in HbuliderX and use the command line to open the directory where the window is located and enter npm install --save
2. Then execute npm run serve to start the project, open the address in the browser, register an account and log in.
3. Create business information according to the prompts. At this time, you can add the order code and upload the dish categories and shelves.
4. After adding the ordering code and listing the dishes in the background management in the previous step, go to the WeChat developer tool and compile and enter through the QR code you added.
6. Connect the printer
1. We must buy Xinye cloud printer
2. We connect the printer to wifi according to the instruction manual
3. Enter the Xinye cloud printer back-end management platform [https://admin.xpyun.net/#/login?redirect=%2Fpersonal] to register an account, and then authenticate to enter.
4. Then we select - Device Management in Print Management and enter the printer number, which is the sn on the printer, to add the printer to our device.
5. We open our diancan-user file and open the Xpyun.js file in the printer
Modify the following code
let xpYun = {
user : '在芯烨云后端管理平台中的账号信息把开发者id拷贝过来' ,
timestamp : new Date ( ) . getTime ( ) ,
UserKEY : '这个为开发者密钥在开发者id下面' ,
sn : '打印机身上的sn' ,
name : '设置成自己的店铺名称'
} 6. If we want to change the content printed by the printer, we enter the print_content.js file and make changes according to our store, address, and phone number.
7. The code goes online (it must be tested locally without any problems, and then deployed online if it can run smoothly)
1.diancan-node
We first open [https://cloud.weixin.qq.com/cloudrun?utm_source=idecloudconsole] and then scan the code to log in and then select the mini program we want to log in. Pull down in the prompt panel and select koa framework deployment (it may take a long time) , wait patiently). After waiting for the deployment to be successful, select Publish, then choose to manually upload the code package and select the folder. At this time, we first open our editor to see if there are node_modules in our diancan-node and delete it, and then select our diancan-node. folder. Change the port to 5000 and select Publish. After the release is completed, we choose to access it using a public domain name.
2.saoma-diancan-pc
2.1 We use Hbuildex to open it and select api.js in the api folder. Change the following code const url = 'http://localhost:5000/api/ to the domain name we just got in the cloud hosting.
例如：const url = 'https://koa-bu8u-166122-1309878414.ap-shanghai.run.tcloudbase.com/api/'
2.2 Right-click saoma-diancan-pc in hbulider, use the command line to open the directory where the window is located, enter npm run build, and a dist file will appear under the saoma-diancan-pc folder.
2.3 Let's open the WeChat development tool and select Cloud Development - select More and select Static Website. If it is not activated, you need to activate it. After the activation is completed, we choose to upload files and upload all the files in the dist folder. After the upload is completed, select Website Configure and copy the domain name, and you can access it directly.
2.4.diancan-user
We select release in the Hbulid editor - mini program WeChat - and then open the WeChat development tool - enter the WeChat development tool and select release
