WeChat ミニプログラムのオンラインリリースプロセス-ミニプログラム開発-php.cn

WeChat ミニプログラムのオンラインリリースプロセス

私は最近、WeChat ミニプログラムの開発について 1 日ほどかけて学習し、その考え方を実践して非常にシンプルなページを作成しました。

これを学習の要約として考えてみましょう: 学習ポイントは非常に多くあります。公式インターフェイスのドキュメントを確認することで、WeChat アプレット開発ツールとエンジニアリングアーキテクチャに慣れることができます。従来のページと同様WeChat アプレットも js ファイルで構成されており、ページレイアウトファイル wxml とスタイルファイル wxss

(無料学習の推奨事項:小プログラム開発チュートリアル)

1. まずWeChatパブリックプラットフォームにログインし、ミニプログラム欄に登録してappidを取得し、開発ツールにappidを入力し、コーディング作業のための開発ツールを開きます。

1.1. 知識ポイントを統合します。

app.json ファイル

{ "pages":[ "pages/huangbaokang/huangbaokang", "pages/zhanglulu/zhanglulu" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#baf088", "navigationBarTitleText": "幸福婚姻", "navigationBarTextStyle":"black" }, "tabBar": { "list": [ { "pagePath": "pages/huangbaokang/huangbaokang", "text": "黄宝康", "iconPath": "images/1.png", "selectedIconPath": "images/1.png" }, { "pagePath": "pages/zhanglulu/zhanglulu", "text": "张露露", "iconPath": "images/2.png", "selectedIconPath": "images/2.png" } ] } }

ログイン後にコピー

入り口のグローバル構成では、主に tabBar 設定、グローバルページ定義、ヘッダーの背景、フォント、ネットワークタイムアウトなどを構成します。

wxml タグをマスターする

huangbaokang.wxml ファイル

 黄宝康的帅气照

ログイン後にコピー

huangbaokang.js ファイル

Page({ /** * 页面的初始数据 */ data: { photos_hbk: ['1.png', '2.png', '3.png', '4.png'] } })

ログイン後にコピー

huangbaokang.wxss ファイル

/* pages/huangbaokang/huangbaokang.wxss */ .title{ font-size: 70rpx; text-align: center; } .photo-list{ margin-top: 20rpx; } .photo-item{ width: 100%; height: 100%; margin-top: 20rpx; }

ログイン後にコピー

具体的なページを開発するには、さまざまな wxml タグの使用法、ステートメント wx:for の使用法、および動的データバインディング ({{}} を使用) を学習する必要があります。

イベント関数処理

さらにマスターイベント処理などはメソッドをバインドし、jsファイル内のメソッドに対応します。

2. アップロード、公開、レビュー、オンラインへの移行

コーディング後、開発ツールの右上隅にあるアップロードボタンをクリックして、コードを WeChat にアップロードできます。バックエンド。 WeChat ミニプログラムのオンラインリリースプロセス