WeChatミニプログラムの開発をスピードアップするためのヒント

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する

私たちの通常の開発習慣によれば、新しいページを作成するときは、通常、最初にフォルダーを作成し、次に対応するページを作成します。作成が完了すると、ページは自動的に app.json に登録されます。実際、app.json にページを直接登録することで、対応するページを生成することもできます。

「ページ」: [
    「ページ/インデックス/インデックス」、
    「ページ/新しいページ/新しいページ」
 ]、

上記のように、設定ファイルにパスを登録すると、アプレットは対応するパスを自動的に作成します。

2. コンパイルモードを有効活用する

ページをデバッグしたい場合、多くの開発者は app.json を直接変更して最初のスタック ページを調整することに慣れています。実際、構成ファイルを変更する代わりに、コンパイル モードを使用してコンパイル ページを追加できます。

3. コンポーネント再利用ミニプログラムスタイル

新しいコンポーネントが作成されると、アプレットはこの構成項目を表示しないため、この点は忘れられがちです。以下のようにオプションを設定すると、コンポーネントはグローバルスタイル(app.wxss)を使用できます。

成分({
  //colorui スタイル オプションを継承: {
    グローバルクラスを追加: true、
    複数スロット: true
  },
  ...
 }

4. app.js 初期化コンテンツの機能化

多くのミニプログラムには onLaunch で記述されたコンテンツが多数含まれており、非常に混乱を招き、後のデバッグが特に困難になります。異なる初期化内容を異なる関数として記述することができ、関数化およびモジュール化されます。

onLaunch: 関数(オプション) {
    //ここでアプレットに入る方法を処理する必要があります this.InitCloud(); //クラウドサービスを初期化します/ ESC
    this.InitCustom(); //カスタムに必要な構成情報を初期化します this.InitEdu(); //教育システムの構成を初期化します},

5. テンプレートを有効活用する

繰り返しコンテンツが多い wxml コンテンツの場合は、テンプレート ファイルに抽出し、使用時に直接インポートすることができます。

<import src="テンプレート/NexuTemplate.wxml"/>
<view wx:for="{{dirlist}}" wx:key="item">
 <template is="dirshow" data="{{item}}"></template>
</ビュー>

6. クラウド開発とハイブリッド開発

コンテンツセキュリティの識別、OpenIDの取得、画像ポルノの検出、支払い処理、コンテンツのプッシュなどは、独自のバックエンドを使用して実装するとそれほど簡単ではありません。ただし、クラウド開発技術を使用してこの部分を置き換え、ビジネスロジックに重点を置くと、新しい世界が開かれます。

クラウド開発の機能の一部(クラウド開発とハイブリッド開発の内容を紹介する特別記事を後日書きます):

const クラウド = require('wx-server-sdk')

クラウド.init({
  環境: cloud.DYNAMIC_CURRENT_ENV
})


// クラウド関数エントリ関数 exports.main = async (event, context) => {
  // コンソール.log(イベント)
  スイッチ (イベント.アクション) {
    ケース 'getWXACode': {
      getWXACode(イベント)を返す
    }
    ケース 'getOpenData': {
      getOpenData(イベント)を返す
    }
    ケース 'msgSecCheck': {
      msgSecCheck(イベント)を返す
    }
    ケース 'imgSecCheck': {
      imgSecCheck(イベント)を返す
    }
    ケース 'submitPages': {
      送信ページを返す(イベント)
    }
    デフォルト: {
      戻る
    }
  }
}

//アプレットコードを取得する async function getWXACode(event) {
  コンソールログ(イベント.url)
  // ここで永続的で有効なアプレットコードを取得し、クラウドファイルストレージに保存し、最後にフロントエンドが使用するクラウドファイルIDを返します。const wxacodeResult = await cloud.openapi.wxacode.get({
    パス: event.url || 'pages/index/index',
  })

  定数 fileExtensionMatches = wxacodeResult.contentType.match(/\/([^\/]+)/)
  定数ファイル拡張子 = (ファイル拡張子マッチ && ファイル拡張子マッチ[1]) || 'jpg'

  const uploadResult = cloud.uploadFile({
    // クラウド ファイル パス。デモンストレーションの目的で、ここでは固定名が使用されています: cloudPath: `wxCode/wxCode${Math.random() * 9999999}.${fileExtension}`、
    // アップロードするファイルの内容は、画像バッファに直接渡すことができます
    ファイル内容: wxacodeResult.buffer、
  })

  アップロード結果ファイルIDが
    新しいエラーをスローします(`アップロードに失敗しました。ファイルが空です。ストレージ サーバーのステータス コードは空です ${uploadResult.statusCode}`)
  }

  uploadResult.fileIDを返す
}

// openid を取得
非同期関数 getOpenData(イベント) {
  // wx-server-sdk >= 0.5.0 が必要です
  定数 wxContext = cloud.getWXContext()

  戻る {
    イベント、
    オープンID: wxContext.OPENID、
    アプリID: wxContext.APPID,
    ユニオンID: wxContext.UNIONID,
  }
}

// テキストが準拠しているかどうかを確認する async function msgSecCheck(event) {
  // wx-server-sdk >= 0.5.0 が必要です
  cloud.openapi.security.msgSecCheck({ を返します。
    コンテンツ: イベント.コンテンツ、
  })
}

// 画像が準拠しているかどうかを確認する async function imgSecCheck(event) {
  cloud.openapi.security.imgSecCheck({ を返します。
    メディア:
      コンテンツタイプ: イベント.コンテンツタイプ、
      値: Buffer.from(イベント.値)
    }
  })
}

//ページを含める async function submitPages(event) {
  cloud.openapi.search.submitPages({ を返します。
    ページ: [{
      パス: イベント.パス、
      クエリ: イベント.クエリ
    }]
  })
}




//日付を取得する function getDateTime(sj) {
  var now = new Date(sj * 1000);
  var year = now.getFullYear();
  var 月 = now.getMonth() + 1;
  var date = now.getDate();
  var hour = now.getHours();
  var 分 = now.getMinutes();
  // var second = now.getSeconds();
  年 + 「年」 + 月 + 「月」 + 日 + 「日」を返します。
}

7. 個人設定データを1つのファイルに集約する

たとえば、変更される可能性はあるが頻繁に使用されるサーバー ドメイン名やインターフェイス トークンなどのデータは、1 つのファイルに集中されます。

モジュール.エクスポート={
  クラウドを使用する:true、
  CloudId:'', //クラウド開発環境ID
  TraceUser:true, // ユーザーアクセスログを記録する AdaptStorge:true, // ユーザーデータのキャッシュを許可する SevDomain:'http://localhost' // サーバーのドメイン名}

8. 開発者ツールのバージョン管理ツールを有効活用する

要約する

これで、WeChat ミニプログラムの開発をスピードアップするためのヒントに関するこの記事は終了です。WeChat ミニプログラムの開発に関するより関連性の高い提案については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません:
  • WeChatアプレット開発の詳細な説明(ゼロからのプロジェクト)
  • WeChat ミニプログラム クラウド開発: クラウド機能の使用
  • WeChatアプレットクラウド開発データベース操作
  • WeChatアプレットWeChat支払いアクセス開発例詳細説明
  • WeChat ミニプログラム開発 - 入門チュートリアル
  • WeChatアプレットクラウド開発(データベース)詳細説明
  • WeChat ミニプログラムを使用してフロントエンドを開発する [クイック スタート]
  • WeChatミニプログラムクラウド開発詳細チュートリアル
  • WeChatアプレット開発体験の概要(推奨)
  • WeChat ミニプログラム開発の基本チュートリアル

<<:  Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

>>:  Windows での MySQL インストール チュートリアル (画像とテキスト付き)

推薦する

MySQL 8.0.22 のインストールと設定のグラフィックチュートリアル

MySQL8.0.22のインストールと設定(超詳細)参考までに、具体的な内容は次のとおりです。みなさ...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

RPM パッケージを使用して MySQL 5.7.18 をインストールするチュートリアル

システム:セントOS7 RPM パッケージ: mysql-コミュニティクライアント-5.7.18-1...

ログインインターフェースの使いやすさとセキュリティのバランスをとる方法

ウェブデザイナーでもUIデザイナーでも、ログインページや登録ページのデザインは必ず経験しなければなら...

webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法

序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...

CSS3 フィルター属性の使い方の紹介

1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

JavaScript におけるブラウザ互換性の問題について簡単に説明します

ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換...

Ubuntu 18.04はルート権限を取得し、ルートユーザーとしてログインします

事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

CSS flex 複数列レイアウト

基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...

CSSの高さの崩壊問題についての簡単な説明

パフォーマンス例えば: HTML: <div class="first"&...

inline-blockプロパティとの互換性

<br />1年前、インターネット上にはinline-blockプロパティに関する記事は...

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。

目次動作原理:ブラウザは何をするのですか?ホストファイル index.htmlメイン.jsその他のベ...