エディター
私は vscode を直接使用しています (同じことが他のエディターにも當てはまり、プレビューには今でも WeChat 開発ツールを使用しています)。構(gòu)文の強調(diào)表示には、wxml を html に、wxss を css に設(shè)定します
"files.associations": { "*.wxss": "css", "*.wxml": "html" }
。ミニ プログラム関連のプラグインもインストールします
コードの作成を開始します
まず第一に、WeChat ミニ プログラムのドキュメント (フレームワーク、コンポーネントおよび API) をすべて読む必要があります。後で使用するときに見つけることができます。
viewコンポーネントはhtmlのpに対応します
textはspan
wxssに対応します。セレクターは要素、#id、.className、::after、::beforeのみをサポートします
。コンポーネント
ページと同様のディレクトリ構(gòu)造に従って、各コンポーネントのテンプレート、スタイル、js ファイルを同じフォルダーに配置します
テンプレートは直接 < include/> または required 値渡し
+ スタイルを使用して、require を使用して
js をインポートします次に、次の mergePage を使用してページ オブジェクトの中央を読み込みます。
mergePage
コンポーネントのロード
const ErrorMsg = require('../../../components/error-msg/error-msg'); Page(util.mergePage({ // 頁面 Page 方法... onLoad() { // 可以直接在頁面方法中調(diào)用 showErrorMsg 方法 } }, ErrorMsg/* 更多組件也可以*/));
mergePageメソッドを使用して、すべてのコンポーネントメソッドとページイベントをページオブジェクトに登録します
-
コンポーネントの書き方
var errorTimer; module.exports = { showErrorMsg(msg, cb) { clearTimeout(errorTimer); this.setData({ errorMsg: msg }); errorTimer = setTimeout( () => { this.setData({ errorMsg: false }); cb && cb(); }, 2000); } // 可以在這里注冊 `onLoad`,`onShow`等頁面事件 }
コンポーネント內(nèi)で this.setData を使用してページ データを更新したり、onLoad、onShow などのページ イベントを登録したりできます。mergePage の最後のパラメーターを持つイベントが最初に呼び出されます。
mergePageのソースコード
/** * 合并 Page 對象所有的方法及事件 * 子對象不能使用 data 屬性,請在 onLoad 中使用 setData 方法設(shè)置 */ function mergePage(dest, ...src) { let args = arguments; let eventsStack = { onLoad: [], onReady: [], onShow: [], onHide: [], onUnload: [], onPullDownRefresh: [], onReachBottom: [], }; // 保存所有的事件,最后一個參數(shù)的事件會最先調(diào)用。 for(let name in eventsStack) { for(let i = args.length - 1; i >= 0; i--) { args[i][name] && eventsStack[name].push(args[i][name]) } } Object.assign(...args); for(let name in eventsStack) { dest[name] = function() { for(let i = 0; i < eventsStack[name].length; i++) { eventsStack[name][i].apply(this, arguments); } } } return dest; }
es 6
アロー関數(shù)、関數(shù)パラメータのデフォルト値と分析構(gòu)造
wx.request({ complete: ({data= {}}) => { // 1. 因為 wx.request 返回的接口數(shù)據(jù)是在 data 屬性里,這里我們只要 data 屬性就行了,所以直接參數(shù)解析構(gòu) // 2. 如果 failed,無 data 時,data 將為默認值 {} if(data.code !== 0) { // do something if request failed return; } // 請求正常處理代碼 // 3. 因為用的箭頭函數(shù),回調(diào)里可以正常使用 this, 訪問 Page 對象的方法 // 比如 this.setData(...) } })
一部の関數(shù)パラメータはデフォルトパラメータを直接使用することもできます。
演算子とオブジェクト屬性の省略形を展開します
データパラメータをテンプレートに渡すとき、
<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>
などのオブジェクト屬性の省略形を使用できます
このようにして、テンプレートはobjオブジェクトのすべてのキーを使用できますID と名前だけでなく、変數(shù)としても使用できます
テンプレート文字列
アプレット內(nèi)で es 6 テンプレート文字列を直接便利に使用できます
let url = `${app.globalData.API_PREFIX}/cart/add`;
その他の es 6 機能
その他の注意事項
-
wx.showToast アイコンは「成功」、「読み込み中」のみをサポートしており、エラー プロンプトはカスタマイズする必要があります
テンプレート內(nèi)の変數(shù)に値がない場合は、データが渡されているかどうかを確認してください。
開発ツール(v0.10.102800)では以下の方法でドメイン名を要求するインターフェースを追加できますが、殘念ながらWeChatでは使用できません。
// 放到 app.js 前面 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
すべてのページの JS は、ページを開いたときではなく、起動時にすぐに実行されるため、グローバルに記述された一部のコードは、可能な限り onLoad の後に配置する必要があります。 以下は からのものです。デバッグ ソース ロードされたコードへ:
define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict'; var app = getApp(); var util = require('../../../utils/util'); var ErrorMsg = require('../../../components/error-msg/error-msg'); var AddressPicker = require('../../../components/address-picker/address-picker'); Page(util.mergePage({ // 頁面代碼省略 }, AddressPicker, ErrorMsg)); //# sourceMappingURL=data:application/json;... });require("pages/index/index.js")
【関連する推奨事項】
1. WeChat パブリック アカウント プラットフォームのソース コードのダウンロード
2.WeChat アプレット開発 UI レイアウト テクニックの概要
3. WeChat 開発の支払いWeChat ミニプログラム開発経験の価値ある概要以上がWeChat 開発プロセスの例を要約するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。

ホットAIツール

Undress AI Tool
脫衣畫像を無料で

Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ

AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中國語版
中國語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

PHP は、Web 開発およびサーバーサイド プログラミング、特に WeChat 開発で広く使用されているオープン ソースのスクリプト言語です?,F(xiàn)在、ますます多くの企業(yè)や開発者が WeChat 開発に PHP を使用し始めています。これは、PHP が本當に學(xué)びやすく、使いやすい開発言語となっているためです。 WeChat の開発では、メッセージの暗號化と復(fù)號化はデータのセキュリティに関わるため、非常に重要な問題となります。暗號化と復(fù)號化の方法を持たないメッセージの場合、ハッカーは簡単にデータを入手でき、ユーザーに脅威を與える可能性があります。

WeChat パブリック アカウントの開発では、投票機能がよく使用されます。投票機能はユーザーが気軽に交流に參加できるほか、イベントの開催や意見調(diào)査などにも重要なツールです。この記事では、PHPを使用してWeChatの投票機能を?qū)g裝する方法を紹介します。 WeChat公式アカウントの認証を取得する まずはWeChat公式アカウントの認証を取得する必要があります。 WeChatパブリックプラットフォームでは、WeChatパブリックアカウント、公式アカウント、およびパブリックアカウントに対応するトークンのAPIアドレスを設(shè)定する必要があります。 PHP言語を使用した開発の過程では、WeChatが公式に提供するPHを使用する必要があります

WeChat の人気に伴い、マーケティング ツールとして WeChat を使用し始める企業(yè)が増えています。 WeChat グループ メッセージング機能は、企業(yè)が WeChat マーケティングを行うための重要な手段の 1 つです。ただし、手動送信のみに頼ると、マーケターにとって非常に時間と労力がかかる作業(yè)になります。したがって、WeChat マス メッセージング ツールを開発することが特に重要です。この記事では、PHP を使用して WeChat マス メッセージング ツールを開発する方法を紹介します。 1. 準備作業(yè) WeChat マス メッセージング ツールを開発するには、次の技術(shù)點を習(xí)得する必要があります。 PHP WeChat パブリック プラットフォーム開発の基礎(chǔ)知識 開発ツール: Sub

WeChat は現(xiàn)在、世界最大のユーザーベースを持つソーシャル プラットフォームの 1 つであり、モバイル インターネットの普及に伴い、ますます多くの企業(yè)が WeChat マーケティングの重要性を認識し始めています。 WeChat マーケティングを?qū)g施する場合、顧客サービスは重要な部分です。カスタマー サービスのチャット ウィンドウをより適切に管理するために、WeChat 開発に PHP 言語を使用できます。 1. PHP WeChat 開発の概要 PHP は、Web 開発の分野で広く使用されているオープン ソースのサーバー側(cè)スクリプト言語です。 WeChat パブリック プラットフォームが提供する開発インターフェイスと組み合わせると、PHP 言語を使用して WeChat を?qū)g行できます。

WeChat パブリック アカウントの開発において、ユーザー タグ管理は非常に重要な機能であり、開発者がユーザーをよりよく理解し、管理できるようになります。この記事では、PHPを使用してWeChatのユーザータグ管理機能を?qū)g裝する方法を紹介します。 1. WeChat ユーザーの openid を取得する WeChat ユーザータグ管理機能を使用する前に、まずユーザーの openid を取得する必要があります。 WeChat パブリック アカウントの開発では、ユーザーの承認を通じて openid を取得するのが一般的です。ユーザー認証が完了したら、次のコードを通じてユーザーを取得できます。

WeChat が人々の生活においてますます重要なコミュニケーション ツールになるにつれ、その機敏なメッセージング機能はすぐに多くの企業(yè)や個人に支持されるようになりました。企業(yè)にとって、WeChat をマーケティング プラットフォームとして開発することがトレンドになっており、WeChat 開発の重要性が徐々に顕著になってきています。その中でも、グループ送信機能はさらに広く使用されているため、PHP プログラマとしてグループ メッセージ送信レコードを?qū)g裝するにはどうすればよいでしょうか?以下に簡単に紹介します。 1. WeChat パブリック アカウントに関する開発知識を理解する グループ メッセージ送信レコードの実裝方法を理解する前に、

PHP を使用して WeChat 公開アカウントを開発する方法 WeChat 公開アカウントは、多くの企業(yè)にとってプロモーションと交流のための重要なチャネルとなっており、一般的に使用される Web 言語として PHP を使用して WeChat 公開アカウントを開発することもできます。この記事では、PHP を使用して WeChat 公開アカウントを開発する具體的な手順を紹介します。ステップ1:WeChat公式アカウントの開発者アカウントを取得する WeChat公式アカウントの開発を開始する前に、WeChat公式アカウントの開発者アカウントを申請する必要があります。具體的な登録プロセスについては、WeChat パブリック プラットフォームの公式 Web サイトを參照してください。

インターネットとモバイル スマート デバイスの発展に伴い、WeChat はソーシャルおよびマーケティング分野に欠かせないものになりました。デジタル化が進むこの時代において、WeChat 開発に PHP を使用する方法が多くの開発者の焦點になっています。この記事では主に、PHP を WeChat 開発に使用する方法とそのヒントや注意事項を紹介します。 1. 開発環(huán)境の準備 WeChat を開発する前に、まず対応する開発環(huán)境を準備する必要があります。具體的には、PHP オペレーティング環(huán)境と WeChat パブリック プラットフォームをインストールする必要があります。
