1. 設置ツール(準備作業)
このプロジェクトの展開の複雑さは比較的高いです (このテクノロジー スタックの学習に興味がある場合は、展開を試すことができます)
1. まずはnode.jsをインストールしましょう [http://nodejs.cn/download/]
2. Win+r で「cmd」と入力し、「OK」をクリックしてコマンド ライン パネルの入力を開きます(cnpm をインストールします)。
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. プロジェクトを実行するには、少なくとも 2 つの開発ツールが必要です。1 つは Hbuildex、もう 1 つは WeChat 開発者ツールです。
Hbuildex ダウンロード アドレス: アプリ開発バージョンをダウンロード
WeChat 開発者ツール: 安定版をダウンロードする
4. WeChatパブリックプラットフォームを開きます—ミニプログラムの登録—Appidの取得—開発管理—開発設定でAppidの取得
2. クラウドデータベースの構成
diancan-user: このコード パッケージは小さなプログラム コードです
1. コード パッケージを Hbuildex に配置し、manifest.json ファイルを開き、WeChat ミニ プログラム Appid を登録したミニ プログラム ID に変更します。
APP.vue ファイルの env を独自の環境 ID に変更し (環境 ID は WeChat 開発者ツールのクラウド開発で取得されます)、プロンプトに従ってクラウド開発およびクラウド開発環境を作成します。
2. マウスでプロジェクト diancan-user を選択し、エディターの上部にある「実行」をクリックしてアプレット シミュレーターを実行します。現時点では開かない可能性があるため、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」です。右クリックして、「Dish-manage」という名前の nodejs クラウド関数を作成します。これは、Dish-manage ファイルの下に生成されます。一部のファイルでは、ファイル内のindex.jsファイルをdiancan-user/cloud関数ファイル内のindex.jsに置き換えるだけで済みます。
次に、ファイル内の env を独自の環境 ID に置き換えます。コードは次のとおりです。
cloud.init({
env: '改为你自己的云环境id'
})
次に、Dish-manage ファイルを右クリックします。アップロードしてデプロイし (node_modules をアップロードしないことを選択します)、依存関係をクラウドにインストールし、クラウド内のファイルの search.js ファイルを含めてアップロードが完了するまで待ちます。関数 (手順は上記と同じです)
3. コードの修正
1. ユーザー コード パッケージに戻り、次のように 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. WeChat パブリック開発管理のプラットフォーム開発設定でサーバー ドメイン名 (ソケットの法的ドメイン名) 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 WeChat パブリック プラットフォームを開き、サブスクリプション情報を選択し、パブリック テンプレート ライブラリを選択してテンプレート入力を検索します - 販売者確認注文通知 - 支払い金額、支払い時間、注文番号を選択します。
注: ミニ プログラムに登録されているサービス カテゴリは、ケータリング サービスのケータリング情報サービスである必要があります。ケータリング情報でない場合は、WeChat パブリック プラットフォームの設定でサービス カテゴリを見つけて変更または追加できます。それ。
5.2 テンプレートを選択した後、[マイ テンプレート] でテンプレート ID を表示できます。それをコピーし、config/databaseapi.js ファイルの 70 行目を開き、サブスクリプション メッセージ template_id を独自のテンプレート ID に変更します。
6. router/order/order.js ファイルを開き、75 行目の 3 つのフィールド名 (amount1、time2、character_string3) を変更します。 ([マイ テンプレート - 詳細] で 3 つのフィールドを確認します。それらがこのフィールドと同じかどうかを確認し、異なる場合は変更します)
7. diancan-user で pages/home-page/page.vue を再度開き、121 行目の template_id を独自のものに変更します。
4. Tencent Cloud Storage (cos) の構成
1. 次のように、ノード コードの 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行目: キー: '独自のフォルダー名に変更' + ファイル名 (キーは作成したフォルダー)
3. HbuliderX で diancan-node を右クリックし、コマンド ラインを使用して、「npm install --save」と入力します。成功すると、node_modules パッケージが表示されます。次に、nodemon app.js を実行してサーバーを起動します。失敗した場合は、npm run test を使用します。
5. バックグラウンド管理端末の起動
saoma-diancan-pc: このコード パッケージのバックグラウンド管理ターミナル
1. HbuliderX で saoma-diancan-pc を右クリックし、コマンド ラインを使用してウィンドウがあるディレクトリを開き、「npm install --save」と入力します。
2. 次に、npm runserve を実行してプロジェクトを開始し、ブラウザでアドレスを開き、アカウントを登録してログインします。
3. プロンプトに従ってビジネス情報を作成し、注文コードを追加し、料理のカテゴリと棚をアップロードします。
4. 前のステップで注文コードを追加し、バックグラウンド管理で料理をリストした後、WeChat 開発者ツールに移動し、追加した QR コードをコンパイルして入力します。
6. プリンターを接続する
1. Xinyeクラウドプリンターを購入する必要があります
2.取扱説明書に従ってプリンターをWi-Fiに接続します
3. Xinye クラウド プリンター バックエンド管理プラットフォーム [https://admin.xpyun.net/#/login?redirect=%2Fpersonal] にアクセスしてアカウントを登録し、認証を行って入力します。
4. 次に、[印刷管理] で [デバイス管理] を選択し、プリンター番号 (プリンターの SN) を入力して、プリンターをデバイスに追加します。
5. diancan-user ファイルを開き、プリンターで Xpyun.js ファイルを開きます
次のコードを変更します
let xpYun = {
user : '在芯烨云后端管理平台中的账号信息把开发者id拷贝过来' ,
timestamp : new Date ( ) . getTime ( ) ,
UserKEY : '这个为开发者密钥在开发者id下面' ,
sn : '打印机身上的sn' ,
name : '设置成自己的店铺名称'
} 6. プリンターで印刷するコンテンツを変更したい場合は、print_content.js ファイルを入力し、店舗、住所、電話番号に従って変更を加えます。
7. コードがオンラインになります (問題なくローカルでテストし、スムーズに実行できる場合はオンラインにデプロイする必要があります)
1.ディアンカンノード
まず [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 WeChat 開発ツールを開いて [クラウド開発] を選択します。 [詳細] を選択して、[静的 Web サイト] を選択します。アクティブ化が完了したら、ファイルをアップロードすることを選択し、dist 内のすべてのファイルをアップロードします。アップロードが完了したら、[Web サイトの設定] を選択してドメイン名をコピーすると、直接アクセスできるようになります。
2.4.diancan ユーザー
Hbulid エディター (ミニ プログラム WeChat) でリリースを選択し、WeChat 開発ツールを開きます。WeChat 開発ツールに入り、リリースを選択します。