1.เครื่องมือติดตั้ง(งานเตรียมการ)
ความซับซ้อนในการปรับใช้ของโครงการนี้ค่อนข้างสูง (ผู้ที่สนใจเรียนรู้กลุ่มเทคโนโลยีนี้สามารถลองปรับใช้ได้)
1. มาติดตั้ง node.js ก่อน [http://nodejs.cn/download/]
2. Win+r ป้อน cmd แล้วคลิกตกลงเพื่อเปิดอินพุตแผงบรรทัดคำสั่ง (ติดตั้ง cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. ต้องมีเครื่องมือพัฒนาอย่างน้อยสองตัวในการดำเนินโครงการ หนึ่งเครื่องมือ Hbuildex; หนึ่งเครื่องมือสำหรับนักพัฒนา WeChat
ที่อยู่ดาวน์โหลด Hbuildex: ดาวน์โหลดเวอร์ชันการพัฒนาแอป
เครื่องมือสำหรับนักพัฒนา WeChat: ดาวน์โหลดเวอร์ชันเสถียร
4. เปิดแพลตฟอร์มสาธารณะ WeChat—ลงทะเบียนมินิโปรแกรม—รับ Appid—การจัดการการพัฒนา—รับ Appid ในการตั้งค่าการพัฒนา
2. การกำหนดค่าฐานข้อมูลคลาวด์
ผู้ใช้ diancan: แพ็คเกจโค้ดนี้เป็นโค้ดโปรแกรมขนาดเล็ก
1. ใส่แพ็คเกจโค้ดลงใน Hbuildex เปิดไฟล์ manifest.json และเปลี่ยน WeChat Mini Program Appid เป็น Mini Program ID ที่คุณลงทะเบียน
เปลี่ยน env ในไฟล์ APP.vue เป็นรหัสสภาพแวดล้อมของคุณเอง (ได้รับรหัสสภาพแวดล้อมในการพัฒนาระบบคลาวด์ของเครื่องมือนักพัฒนา WeChat) และปฏิบัติตามคำแนะนำเพื่อสร้างการพัฒนาระบบคลาวด์และสภาพแวดล้อมการพัฒนาระบบคลาวด์
2. เลือกโปรเจ็กต์ diancan-user ด้วยเมาส์ จากนั้นคลิก Run ที่ด้านบนของตัวแก้ไข - รันไปที่โปรแกรมจำลองแอปเพล็ต อาจไม่เปิดในเวลานี้ ดังนั้นให้เปิดเครื่องมือสำหรับนักพัฒนา WeChat ด้วยตนเอง คลิกเปิดพอร์ตบริการอย่างปลอดภัยในการตั้งค่าพร็อกซีในการตั้งค่า หากเรียกใช้เครื่องมือสำหรับนักพัฒนาได้สำเร็จ คอนโซลจะรายงานข้อผิดพลาด
3. คลิกการพัฒนาระบบคลาวด์ที่ด้านบนของเครื่องมือนักพัฒนา WeChat (หากยังไม่ได้เปิดใช้งาน ให้ปฏิบัติตามคำแนะนำเพื่อเปิดใช้งาน) เพื่อเข้าสู่คอนโซลการพัฒนาระบบคลาวด์ คลิกฐานข้อมูลเพื่อสร้างแต่ละคอลเลกชันตามการตั้งชื่อต่อไปนี้:
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. สร้างโฟลเดอร์ในตัวจัดการทรัพยากรบนเครื่องมือนักพัฒนา WeChat โฟลเดอร์ชื่อ: cloudfunctions คลิกขวาและสร้างฟังก์ชันคลาวด์ nodejs ชื่อ: Dish-manage จากนั้นจะถูกสร้างขึ้นภายใต้ไฟล์ Dish-manage ของเรา ไฟล์บางไฟล์เราจำเป็นต้องแทนที่ไฟล์ index.js ในไฟล์ด้วย index.js ในไฟล์ฟังก์ชัน diancan-user/cloud
จากนั้นแทนที่ env ในไฟล์ด้วยรหัสสภาพแวดล้อมของคุณเอง รหัสจะเป็นดังนี้:
cloud.init({
env: '改为你自己的云环境id'
})
ถัดไป คลิกขวาที่ไฟล์ Dish-manage: อัปโหลดและปรับใช้ (เลือกที่จะไม่อัปโหลด node_modules) ติดตั้งการขึ้นต่อกันบนคลาวด์ และรอให้การอัปโหลดเสร็จสมบูรณ์ รวมถึงไฟล์ search.js ของไฟล์ในระบบคลาวด์ ฟังก์ชั่น (ขั้นตอนเหมือนกับข้างต้น)
3. การแก้ไขโค้ด
1. กลับไปที่แพ็คเกจรหัสผู้ใช้ เปิดบรรทัด 15-16 ของไฟล์ main.js และ src/main.js บนฝั่ง PC ดังนี้
Vue . prototype . goeasy = GoEasy . getInstance ( {
host : "改为你自己的区域" , //改为：区域.goeasy.io
appkey : "改为你自己的appkey" , //进入详情Common key
modules : [ 'pubsub' ] //根据需要，传入‘pubsub’或'im’，或数组方式同时传入
} ) ; 2. กำหนดค่าชื่อโดเมนเซิร์ฟเวอร์ (ชื่อโดเมนตามกฎหมายของซ็อกเก็ต) wss://wx-hangzhou.goeasy.io ในการตั้งค่าการพัฒนาแพลตฟอร์มในการจัดการการพัฒนาสาธารณะของ WeChat
3. เปิด diancan-node: แพ็คเกจรหัสนี้เป็นจุดสิ้นสุดของอินเทอร์เฟซ
4. เปิดบรรทัดที่ 7 และ 8 ของไฟล์ config/databaseapi.js ดังต่อไปนี้ เปลี่ยน mini program appid และ Secret Key Secret เป็นของคุณเอง
let param = qs . stringify ( {
grant_type : 'client_credential' ,
appid : '改为你自己的' ,
secret : '改为你自己的' （微信公众平台进入开发管理-开发设置生成一个APPsecret）
} ) 5. ขั้นตอนในการรับรหัสเทมเพลต:
5.1 เปิดแพลตฟอร์มสาธารณะ WeChat และเลือกข้อมูลการสมัคร เลือกไลบรารีเทมเพลตสาธารณะเพื่อค้นหาอินพุตเทมเพลต - การแจ้งเตือนคำสั่งซื้อยืนยันผู้ค้า - เลือกจำนวนเงินที่ชำระ เวลาชำระเงิน และหมายเลขคำสั่งซื้อ
หมายเหตุ: หมวดหมู่บริการที่ลงทะเบียนในมินิโปรแกรมจะต้องเป็นบริการข้อมูลการจัดเลี้ยงในบริการจัดเลี้ยงก่อนจึงจะสามารถเรียกข้อมูลได้ หากไม่ใช่ข้อมูลการจัดเลี้ยง คุณสามารถค้นหาหมวดหมู่บริการได้ในการตั้งค่าของแพลตฟอร์มสาธารณะ WeChat ของเราเพื่อเปลี่ยนแปลงหรือเพิ่ม มัน.
5.2 หลังจากเลือกเทมเพลตแล้ว คุณสามารถดูรหัสเทมเพลตในเทมเพลตของฉันได้ เราจะคัดลอกและเปิดบรรทัดที่ 70 ของไฟล์ config/databaseapi.js เพื่อเปลี่ยนข้อความการสมัครสมาชิก template_id เป็นรหัสเทมเพลตของคุณเอง
6. เปิดไฟล์ router/order/order.js และเปลี่ยนชื่อฟิลด์ทั้งสาม (amount1, time2, character_string3) ในบรรทัด 75 (ตรวจสอบสามฟิลด์ของคุณในเทมเพลตของฉัน - รายละเอียด ดูว่าเหมือนกันกับฟิลด์นี้หรือไม่ ถ้าไม่ ให้ทำการเปลี่ยนแปลง)
7. เราเปิด page/home-page/page.vue ใน diancan-user อีกครั้ง และเปลี่ยน template_id ในบรรทัด 121 เป็นของเราเอง
4. การกำหนดค่า Tencent Cloud Storage (cos)
1. เปิดบรรทัดที่ 4-11 ของไฟล์ cos/cos.js ในโค้ดโหนดดังนี้:
var cos = new COS({
SecretId: '改为你自己的', （在腾讯云的密钥管理中获取）
SecretKey: '改为你自己的', （同上）
Protocol:'https:'
});
เปิดลิงก์นี้เพื่อลงทะเบียน [https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2Fcos] เข้าสู่ Tencent Cloud Object Storage เราพบที่เก็บข้อมูลและเลือกที่จะ สร้างที่เก็บข้อมูล (เราเพียงแต่ต้องแก้ไขสิทธิ์เป็น: การอ่านแบบสาธารณะและการเขียนแบบส่วนตัว และเลือกภูมิภาคที่ใกล้เคียงที่สุดกับคุณ)
let Bucket = '改为你自己的' （这个为创建的存储桶名称）
let Region = '改为你自己的' （这个为所属的地域）
2. เข้าสู่บัคเก็ตและสร้างโฟลเดอร์เพื่อจัดเก็บไฟล์ที่อัพโหลด
บรรทัดที่ 18 และ 36: รหัส: 'เปลี่ยนชื่อโฟลเดอร์ของคุณเอง' + ชื่อไฟล์ (รหัสคือโฟลเดอร์ที่คุณสร้าง)
3. คลิกขวาที่ diancan-node ใน HbuliderX และใช้บรรทัดคำสั่งเพื่อเปิดไดเร็กทอรีที่มีหน้าต่างอยู่ เข้าสู่ npm install --save หลังจากสำเร็จ แพ็คเกจ node_modules จะปรากฏขึ้น จากนั้นดำเนินการ nodemon app.js เพื่อเริ่มต้นเซิร์ฟเวอร์ หากไม่สำเร็จ ให้ใช้การทดสอบการรัน npm
5. การเริ่มต้นเทอร์มินัลการจัดการพื้นหลัง
saoma-diancan-pc: เทอร์มินัลการจัดการพื้นหลังของแพ็คเกจโค้ดนี้
1. คลิกขวาที่ saoma-diancan-pc ใน HbuliderX และใช้บรรทัดคำสั่งเพื่อเปิดไดเร็กทอรีที่มีหน้าต่างอยู่ และป้อน npm install --save
2. จากนั้นดำเนินการ npm run service เพื่อเริ่มโปรเจ็กต์ เปิดที่อยู่ในเบราว์เซอร์ ลงทะเบียนบัญชี และเข้าสู่ระบบ
3. สร้างข้อมูลทางธุรกิจตามคำแนะนำ ในขณะนี้ คุณสามารถเพิ่มรหัสคำสั่งซื้อและอัปโหลดประเภทอาหารและชั้นวางได้
4. หลังจากเพิ่มรหัสการสั่งและแสดงรายการอาหารในการจัดการเบื้องหลังในขั้นตอนก่อนหน้าแล้ว ให้ไปที่เครื่องมือนักพัฒนา WeChat และคอมไพล์และป้อนผ่านรหัส QR ที่คุณเพิ่ม
6. เชื่อมต่อเครื่องพิมพ์
1. เราต้องซื้อเครื่องพิมพ์คลาวด์ Xinye
2. เราเชื่อมต่อเครื่องพิมพ์กับ wifi ตามคู่มือการใช้งาน
3. เข้าสู่แพลตฟอร์มการจัดการแบ็กเอนด์เครื่องพิมพ์คลาวด์ Xinye [https://admin.xpyun.net/#/login?redirect=%2Fpersonal] เพื่อลงทะเบียนบัญชี จากนั้นตรวจสอบสิทธิ์เพื่อเข้าสู่
4. จากนั้นเราเลือก - การจัดการอุปกรณ์ ในการจัดการการพิมพ์ และป้อนหมายเลขเครื่องพิมพ์ซึ่งเป็นหมายเลข sn บนเครื่องพิมพ์ เพื่อเพิ่มเครื่องพิมพ์ลงในอุปกรณ์ของเรา
5. เราเปิดไฟล์ผู้ใช้ diancan และเปิดไฟล์ Xpyun.js ในเครื่องพิมพ์
แก้ไขรหัสต่อไปนี้
let xpYun = {
user : '在芯烨云后端管理平台中的账号信息把开发者id拷贝过来' ,
timestamp : new Date ( ) . getTime ( ) ,
UserKEY : '这个为开发者密钥在开发者id下面' ,
sn : '打印机身上的sn' ,
name : '设置成自己的店铺名称'
} 6. หากเราต้องการเปลี่ยนเนื้อหาที่พิมพ์โดยเครื่องพิมพ์ เราจะเข้าสู่ไฟล์ print_content.js และทำการเปลี่ยนแปลงตามร้านค้า ที่อยู่ และหมายเลขโทรศัพท์ของเรา
7. รหัสออนไลน์ (ต้องทดสอบในเครื่องโดยไม่มีปัญหาใด ๆ จากนั้นปรับใช้ออนไลน์หากสามารถทำงานได้อย่างราบรื่น)
1.diancan-โหนด
ขั้นแรกเราเปิด [https://cloud.weixin.qq.com/cloudrun?utm_source=idecloudconsole] จากนั้นสแกนโค้ดเพื่อเข้าสู่ระบบ จากนั้นเลือกมินิโปรแกรมที่เราต้องการเข้าสู่ระบบ ดึงลงมาในแผงข้อความแจ้งแล้วเลือก การปรับใช้เฟรมเวิร์ก koa (อาจใช้เวลานาน) โปรดรออย่างอดทน) หลังจากรอให้การปรับใช้สำเร็จ ให้เลือก เผยแพร่ จากนั้นเลือกอัปโหลดแพ็คเกจโค้ดด้วยตนเอง และเลือกโฟลเดอร์ ในเวลานี้ เราจะเปิดตัวแก้ไขของเราก่อนเพื่อดูว่ามี node_modules ใน diancan-node ของเราหรือไม่ แล้วลบออก และ จากนั้นเลือกโฟลเดอร์ diancan-node ของเรา เปลี่ยนพอร์ตเป็น 5000 และเลือกเผยแพร่ หลังจากที่เผยแพร่เสร็จสิ้นแล้ว เราเลือกที่จะเข้าถึงโดยใช้ชื่อโดเมนสาธารณะ
2.saoma-diancan-pc
2.1 เราใช้ Hbuildex เพื่อเปิดและเลือก api.js ในโฟลเดอร์ api เปลี่ยนโค้ดต่อไปนี้ const url = 'http://localhost:5000/api/ เป็นชื่อโดเมนที่เราเพิ่งได้รับในคลาวด์โฮสติ้ง
例如：const url = 'https://koa-bu8u-166122-1309878414.ap-shanghai.run.tcloudbase.com/api/'
2.2 คลิกขวาที่ saoma-diancan-pc ใน hbulider ใช้บรรทัดคำสั่งเพื่อเปิดไดเร็กทอรีที่มีหน้าต่างอยู่ ป้อน npm run build และไฟล์ dist จะปรากฏใต้โฟลเดอร์ saoma-diancan-pc
2.3 มาเปิดเครื่องมือพัฒนา WeChat แล้วเลือก Cloud Development - เลือก More และเลือก Static Website หลังจากการอัพโหลดเสร็จสิ้น ให้เลือก กำหนดค่าเว็บไซต์ และคัดลอกชื่อโดเมน และคุณสามารถเข้าถึงได้โดยตรง
2.4.ผู้ใช้ diancan
เราเลือก release ในตัวแก้ไข Hbulid - มินิโปรแกรม WeChat - จากนั้นเปิดเครื่องมือพัฒนา WeChat - เข้าสู่เครื่องมือพัฒนา WeChat และเลือก release
