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 インストール チュートリアル (画像とテキスト付き)

推薦する

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

テキストエリアのテキストをHTMLに変換する方法、つまり復帰改行について

説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

HTTPS の有効化に関する経験の共有

国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

InnoDB のアーキテクチャと機能の詳細な説明 (InnoDB ストレージ エンジンの読書メモの要約)

背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...

localStorageの有効期限を設定するいくつかの方法

目次問題の説明1. 基本的な解決策2. 中間的な解決策3. 高度なソリューション4. ハードコアソリ...

Ubuntu 20.04でLNMP環境を構築する方法

簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...

MySQL 8.0.12 のインストールと環境変数の設定チュートリアル (Win10 の場合)

Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...

shtml includeの使い方

これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...

Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル

まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...