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 の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....

Dockerを使用してMySQL 8.0をデプロイする方法の例

1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...

星のフラッシュ効果を実現するjs

この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...

Mysql で group_concat の長さ制限を変更する方法

MySQL には、「group_concat」という関数があります。通常の使用では問題がないかもしれ...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

Unicodeの一般的な記号

Unicode は、世界中のすべてのテキストと記号に対応できる国際組織によって開発された文字エンコー...

Echarts バー水平棒グラフのサンプルコード

目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

Windows Server 2008R2、2012、2016、2019 の違い

目次共通バージョンの紹介共通バージョンのダウンロードアドレスとインストール以下に簡単な違いを示します...

CentOS 8.4 での Docker パッケージのオフラインインストールの問題について

使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...

MySQL のバイナリおよび varbinary データ型の詳細な説明

序文BINARY と VARBINARY は、文字列ではなくバイナリ文字列を格納する点を除いて、CH...

Linux ソースコードからのソケット (TCP) クライアント側での接続の例の詳細な説明

序文著者は、アプリケーションからフレームワーク、オペレーティング システムに至るまで、あらゆるコード...

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...

React Fiberの仕組みの詳細な説明

目次React Fiberとは何ですか?なぜReact Fiberなのか? React Fiberは...