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 を応援してくれることを願っています。 以下もご興味があるかもしれません:
|
<<: Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)
>>: Windows での MySQL インストール チュートリアル (画像とテキスト付き)
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...
Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...
国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...
ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...
目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...
背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...
最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...
目次問題の説明1. 基本的な解決策2. 中間的な解決策3. 高度なソリューション4. ハードコアソリ...
簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...
Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...
これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...
まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...