棚上げサイトを記録することができません、あらかじめ作られた小型のマイクロチャネル・プログラム(開発版)、ほとんどの開発プロセスを忘れてしまいました。今すぐ再ソートを、記録します。
アプレット遠位ハローのまず、最も基本的な例
1、ダウンロードおよび開発ツールをインストールしたマイクロチャンネル公式サイト: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
2は、最初のプロンプトスキャンコードを実行した後、電話(私は以前あなたが登録していない場合、それは登録して行く必要があり、マイクロ手紙公衆プラットフォームを登録している)でログインを確認します。ログイン後、ページは私の前にいくつかの小さなプロジェクトのプログラムを示しています。最初の行は、新しいプロジェクトのプラス記号(+)です。
3、プラス(+)のステップ上の点は、新しいプロジェクト名が書かれている:こんにちは、私はディレクトリを設定は次のとおりです。E:\ wxDEV \こんにちは、私はをクリックAPPIDは以下のとおりです。テスト数;開発モデル:小さなプログラム。バックエンドサービス:デフォルトでは、クラウドサービスを使用していません。言語:JavaScriptを、次に:新
図4に示すように、マイクロチャネルの開発ツールのインターフェースで、三点クロスポイント(...)POP E:アプレットコードのフロントエンドである\ wxDEV \ハローハードディスクディレクトリ。ポイントプレビュー(目の形状)アイコンは、携帯電話を用いた2次元コード、スキャンコードをポップアップ表示され、電話は小さなプログラムに試験することができます。(モバイルマイクロ手紙でマイクロチャンネルページ、少し最近使用したプログラムがあるだろう、スライドダウン)
5、それはどのようなこれらのコードを表しますか?マニュアル:https://developers.weixin.qq.com/miniprogram/dev/framework/ 以下の分析E:\ wxDEV \ハローコードファイルで
HTTPS:リンクがある6、sitemap.jsonファイル//developers.weixin.qq.com/miniprogram/dev/framework/sitemap.htmlは、見た、それはページのコンテンツが検索ユーザーできるようにするかどうか、すなわち、マイクロチャネル爬虫類を制御することですへ
7、project.config.jsonプロジェクト設定ファイル:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html などの小プラグイン・プロジェクトに設定することができます。
8、app.wxss https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 同等のCSSスタイルシートファイル。
9、App.json https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD% AEの グローバル設定とページレイアウトに分けアプレットコンフィギュレーション、。以下のような:どのようなページ、ページタイトル、色など
10、app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html 番組エントリバーの主な機能とほぼ同等登録アプレットAPPインスタンス。
11、ディレクトリのutils util.jsは、おそらく外部JSファイルを導入する必要がある。参考:https://www.cnblogs.com/wangting888/p/9701658.html
12、二つのディレクトリ、インデックスおよびログディレクトリページ、小さなプログラムのページを表すそれぞれがあります。サフィックス.wxmlのhtmlページは、前述の他の類似に対応し、スタイルシートが配置され、JSコードファイルです。参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
第二に、唯一のフロントエンドは十分ではありません、条件が行う方法サーバーをしていませんか?幸いなことに、マイクロチャネルの開発ツールは、上記の手順を参照して、強力なクラウド開発機能を提供し、新しいプロジェクトhelloyun(雲がNode.jsの言語です)
アプレット新規プロジェクトプロジェクト名以上1、参照ステップ3:helloyun;ディレクトリ:E:\ wxDEV \ helloyun;のAppID:唯一のテスト番号は、開発を曇らせることができない、自分の登録したAppIDを選択し、開発モデル:小さなプログラム、バックエンドサービス:アプレットクラウド開発; [新規。クラウド開発の例としては、生成されています。電話でのプレビュー、ビューを指すことができ、電話アプレット自体は、2つのバックエンド操作(またはクラウド)データベース(または関数呼び出し)アプローチ導入チュートリアルのように作用する:データベースの最初に、フロントエンド動作を、2 cloudfunctionsではWX-derver-SDKを使用して、新しいクラウド機能に現在あります
参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
2.内容は、開発プロジェクトを曇らせるより簡潔、Eのように見える:\ wxDEV \ helloyunディレクトリ構造は次のとおりです。
--cloudfunctions(ディレクトリ)
--miniprogram(ディレクトリ)
-project.config.json
-README.md
図3は、miniprogram(この記事の最初の部分に似ている)アプレットフロントエンドを対応、対応する雲は、cloudfunctionsディレクトリ(2019年8月8日、クラウド開発プロジェクトを生成し、そしてディレクトリ構造は、以前に従来の開発ツールが同じではない生成に使用される)でありますEの新バージョン:\ wxDEV \ helloyun \ディレクトリcloudfunctions 4つのディレクトリがあります。
-折り返し電話
-エコー
-ログイン
-openapi
4、携帯電話のクラウド開発のクイックスタートの出発点のアップロードの写真をはじめ、その後、写真をアップロードします。コンソールへのアップロード、オープン開発ツール、点群の開発、クラウド開発(あなたは雲の開発機能を開いていることを確認して)後のプロンプトに従って、ストレージに、あなたは私の-image.jpgだけのアップロードを見ることができます。
私たちは、Eを表示し、フロントや分析、開発ツールから開始:\ wxDEV helloyun miniprogramページがインデックスの\ index.wxmlコードを\ \ \ \。単語を見つけるために写真をアップロードします。bindtapをされて、対応します
<ビュークラス = " アップローダー" > <ボタンクラス = " アップローダーテキスト" bindtap = " mydbadd " >数据库を追加</ボタン> </ビュー>
一方、Eに:ページ\ \ databaseGuideでdatabaseGuide.js \ \ wxDEV \ helloyun \ miniprogram:\ wxDEV前に\ helloyun \ miniprogramページ\は、インデックスが\ index.js最後})、次のコード(すなわち、Eを追加\しますコード)
// 私のテストデータベース追加 mydbadd:関数(){ CONST DB = wx.cloud.database() db.collection(' 製品' ).add({ データ:{ COUNT:1 }、 成功:RES => { // 返される結果に新しく作成されたレコードに_idが含まれます 。この.setData({ counterId:res._idを、 COUNT:1 }) wx.showToast({ タイトル:' 新しい成功したレコード' 、 }) はconsole.log(" [データベース]、[新しいレコード]は、_id成功しています。'Res._id) }、 失敗:ERR => { wx.showToast({ アイコン:' なし' タイトル:' 新記録が失敗した' }) console.error(' [データベース] [レコードの追加]失敗しました:' 、ERR) } }) }、
コンパイル、データベースの追加]ボタンをクリックし、新しいバックエンドデータベースのレコードを(あなたはバックエンドのデータベースで商品のコレクションを設定していることを確認してください)が表示されます。開発者ツールのコンソールコンソールは、対応するプロンプトを持っています。
project.config.json
ファイルは、すでに持っていることがわかります
cloudfunctionRoot
フィールドを(そうでない場合は、公式のチュートリアルを増やします)
// クラウド機能のエントリファイル のconstクラウドは必要(= ' WX-サーバー-SDK ' ) cloud.init() // クラウド機能入力機能 非同期=(exports.main イベント、コンテキスト)=> { constの wxContext = cloud.getWXContextを( ) リターン{ イベント、 のOpenID:wxContext.OPENID、 AppIDを:wxContext.APPID、 unionid:wxContext.UNIONID、 SUM:イベント II.A + イベント.B、 } }
// 私のテストデータベース追加 mydbadd:関数(){ CONST DB = wx.cloud.database() db.collection(' 製品' ).add({ データ:{ COUNT:1 }、 成功:RES => { // 返される結果に新しく作成されたレコードに_idが含まれます 。この.setData({ counterId:res._idを、 COUNT:1 }) wx.showToast({ タイトル:' 新しい成功したレコード' 、 }) はconsole.log(" [データベース]、[新しいレコード]は、_id成功しています。'Res._id) }、 失敗:ERR => { wx.showToast({ アイコン:' なし' タイトル:' 新記録が失敗した' }) console.error(' [データベース] [レコードの追加]失敗しました:'ERR) } }) wx.cloud.callFunction({ // クラウド関数名 名:' SUM ' 、 // パス関数パラメータは、クラウド :{データ :1 、 B:2 、 }) }、 .then(RES => { にconsole.log(res.result)// 3 }) 。キャッチ(console.error) }、
このように、データベースを増やすと同時に、データはクラウド機能と呼ばれ、コンソール開発ツールの呼び出しの結果が表示されます。