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

推薦する

Linux ログ内のキーワードとその前後の情報を検索する方法の例

日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...

Linux で Xfce デスクトップ環境を使用すべき 8 つの理由

いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...

Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説

目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

Vue の高度な使用方法チュートリアル 動的コンポーネント

目次基本的な説明AST 解析レンダリング機能通常コンポーネントと動的コンポーネントの比較ファクトリ関...

Linux touch コマンドの使用例

Linux touch コマンドの詳細な説明: 1. コマンド機能:ファイルまたはディレクトリの作成...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策

本日のプロジェクト最適化中に、MySQL に問題が発生しました: 定義者として指定されたユーザー (...

Xtrabackup を使用した MySQL バックアップ プロセスの詳細な説明

目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...

docker ベースの redis-sentinel クラスターの構築例

1. 概要Redis Cluster は、Redis ノードのグループ間での高可用性とシャーディング...

JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...

Vueのアイデアを使ってストレージをカプセル化する方法

目次背景関数目的アイデアの源成し遂げるセット得るプロパティの削除拡張機能を禁止するもっている要約する...

MySqlを最適化するためにnot inを使用する方法

最近、プロジェクトで選択クエリを使用する際に、未使用の主キー ID を除外するために not in ...

MySQL における KEY、PRIMARY KEY、UNIQUE KEY、INDEX の違い

タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...