小さなマイクロチャネル・プログラムの開発---こんにちは世界

棚上げサイトを記録することができません、あらかじめ作られた小型のマイクロチャネル・プログラム(開発版)、ほとんどの開発プロセスを忘れてしまいました。今すぐ再ソートを、記録します。

アプレット遠位ハローのまず、最も基本的な例

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をされて、対応します

doUpload。同じディレクトリEで:インデックス\ index.js \ \ wxDEV \ helloyun \ miniprogram \ページ、doUploadを見つけ、アップロードした写真はwx.chooseImageで最も注目すべきは見ることができ、
wx.cloud.uploadFile。
5、複数のアップロード映像、写真は元から、前のステップdoUpload機能に乱数を追加し、カバーされるでしょうアップロードします。
constのcloudPath = '私のイメージ' + filePath.match(/ \ [^。] + $ /。?)[0]:
constのcloudPath = '私のイメージ' + Math.random()+ filePath.match(/ \。[^。] +?$ /)[0]   
そして、絵がカバーされることはありませんアップロードします。
我々はまた、のようなクラウドストレージに新しいディレクトリを作成することができます。商品や、その後にコードを変更します。
constのcloudPath = '財/私のイメージ' + Math.random()+ filePath.match(/ \。[^。] +?$ /)[0]、
あなたは雲が存在するもとでの商品のディレクトリにアップロードされた写真を見つけるでしょう、プレビュー、コンパイルします。
6、クラウドデータベースを使用するように  https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html
データベースのクラウドデベロッパーコンソールで商品のコレクション名を作成します。誰もが読めるのはアクセス許可を設定します。
テストを容易にするために、Eに:\ wxDEV \ helloyun \ miniprogram \ページには、次のコードを追加し、前にインデックス\ index.wxml最後の</ビュー> \します
<ビュークラス = " アップローダー" > 
<ボタンクラス = " アップローダーテキスト" 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)
      } 
    })
  }、

コンパイル、データベースの追加]ボタンをクリックし、新しいバックエンドデータベースのレコードを(あなたはバックエンドのデータベースで商品のコレクションを設定していることを確認してください)が表示されます。開発者ツールのコンソールコンソールは、対応するプロンプトを持っています。

、開発ツールでマウスcloudfunctionsディレクトリを右クリックします(直接も利用可能)、アップロード、クラウド同期機能を作成することができます。、私はいくつかの雲機能を書いていた見ることができるコンソールを開発使用することを忘れするクラウドから、ローカルビューに同期させることができます。同期ダウン、開発ツールの対応するディレクトリのアイコンは、クラウドになります。
プロジェクトのルートディレクトリで見つかった  project.config.json  ファイルは、すでに持っていることがわかります cloudfunctionRoot  フィールドを(そうでない場合は、公式のチュートリアルを増やします)
そして、サムと呼ばれる雲の機能を高め、開発ツールでマウスcloudfunctionsディレクトリを右クリックして、それがcloudfunctionsディレクトリに和のカタログおよびEを生成します:\ wxDEV \ helloyun \ cloudfunctions \合計index.js \
私たちはindex.jsの増加に値を返してみましょう: SUM :イベント.A +イベント.B、すなわち、index.jsコードの変更次のように:
// クラウド機能のエントリファイル
のconstクラウドは必要(= ' WX-サーバー-SDK ' 

cloud.init()

// クラウド機能入力機能 
非同期=(exports.main イベント、コンテキスト)=> {
   constの wxContext = cloud.getWXContextを( )

  リターン{
     イベント
    のOpenID:wxContext.OPENID、
    AppIDを:wxContext.APPID、
    unionid:wxContext.UNIONID、
    SUM:イベント II.A + イベント.B、
  } 
}
時間を節約するために、私は直接、上記の手順6でmydbadd機能コードを変更します
// 私のテストデータベース追加
  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)
  }、

このように、データベースを増やすと同時に、データはクラウド機能と呼ばれ、コンソール開発ツールの呼び出しの結果が表示されます。

 
 
 
参考:
JSファイル機能は、別の関数JSファイルのメソッドを呼び出し、 https://www.cnblogs.com/cxx8181602/p/9340678.html
JS時間機能をフォーマット  https://www.cnblogs.com/henw/archive/2011/10/17/2215545.html
 

おすすめ

転載: www.cnblogs.com/pu369/p/11326538.html