WeChat アプレット (アプリケーション アカウント) シンプルなアプリケーション

この記事では、WeChat アプレットの簡単なサンプル アプリケーション (アプリケーション アカウント) の関連情報を主に紹介します。必要な友達は、

デモ プレビュー

デモ ビデオ (トラフィック警告 2.64MB) を参照してください。

GitHub リポジトリ アドレス

ウェアハウス アドレス: https://github.com/zce/weapp-demo

手順

を使用して、リポジトリをローカルに複製します:

bash $ git clone https:/ / github.com/zce/weapp-demo.git weapp-douban -- Depth 1 $ cd weapp-douban

WeChat Web オープナー ツールを開きます (注: バージョン 0.9.092300 である必要があります)

0.9 である必要があります。 092300バージョン、以前のバージョンは正常な動作を保証できません

いわゆるクラックは必要ありません、インターネット上でのいわゆるクラックは以前のバージョン0.9.092100のみです、新しい正式バージョンはクラックを必要としません。 、ひび割れなし！

ダウンロードリンク (正式版、安心してダウンロード): https://pan.baidu.com/s/1qYld6Vi

wechat_web_devtools_0.9.092300_x64.exe (Windows 64 ビット)
wechat_web_devtools_0.9.092300_ia32.exe ( Windows 32 ビット)

wechat_web_devtools_0.9.092300.dmg (macOS)

1. プロジェクトを追加することを選択し、対応する情報を入力または選択します

AppID: 右下隅にある [No AppID] をクリックします (私も資格がありません) 、今回の200か所は小龍琴だそうです クリック）
プロジェクト名：デプロイを伴わないので何気なく入力してください

プロジェクトディレクトリ：先ほどクローンしたフォルダーを選択してください

クリックして追加プロジェクトです

明けましておめでとうございます

WeChat Web Opener Toolでコーディングすることを選択できます(お気に入りのエディターを選択することもできます)

1.左下隅の再起動ボタンからコーディング後のプレビューを表示します

2. Bash ユーザーはプロジェクト ディレクトリをクリックして、新しいコンポーネントに必要なファイルをすばやく作成するために次のコマンドを実行します:

bash $ ./generate page < ;new-page-name> # または $ ./generate コンポーネント

残りは自由にプレイできます

WeChat ミニプログラムの基本チュートリアル (継続的に更新)

プロジェクト フォルダーを作成します基本的な必要なファイルを作成します

app.js

项目主入口文件（用于创建应用程序对象）

// App函数是一个全局函数，用于创建应用程序对象
App({
 // ========== 全局数据对象（整个应用程序共享） ==========
 globalData: { ... },

 // ========== 应用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 应用程序启动时触发一次
 onLaunch () { ... },

 // 当应用程序进入前台显示状态时触发
 onShow () { ... },

 // 当应用程序进入后台状态时触发
 onHide () { ... }
})

app.json

プロジェクト構成宣言ファイル(ナビゲーションバーのスタイルの色など、プロジェクトの一部の情報を指定します)

{
 // 当前程序是由哪些页面组成的（第一项默认为初始页面）
 // 所有使用到的组件或页面都必须在此体现
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
 "pages": [ ... ],
 // 应用程序窗口设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
 "window": { ... },
 // 应用导航栏设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
 "tabBar": { ... },
 // 网络超时设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制台输出调试信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}

app.wxss

[!オプション!] プロジェクトグローバルスタイルファイル、コンテンツはCSS標準構文に従います

ページコンポーネントを作成します

各ページコンポーネントは、

page-nameの4つのファイルにも分割されます。 js

1. ページのライフサイクル制御とデータ処理を処理するために使用されるページロジックファイル

2. 続きへ ..

3. page-name.json

4. 現在のものを操作するときにいくつかの構成を設定します。ページ

5. ここでは、app.json のウィンドウ設定をオーバーライドできます

6. つまり、ウィンドウを設定することしかできません設定はおなじみです

7. 続く...

8. ページ-name.wxml

9. wxml は、ページ内の要素の構造を定義するために使用される Wei Xin マークアップ言語

10. を参照します

11. 構文は、HTML 構文ではなく XML 構文に従うことに注意してください。 HTML 構文ではありません、HTML 構文ではありません

12. 続きます...

13. page-name.wxss

14. wxml は Wei Xin スタイルシートを参照します

15. 定義するための構文ページ スタイルは CSS 構文に従い、CSS の基本的な使用法と長さの単位 (主に rpx レスポンシブ ピクセル) を拡張します

16. 上記がこの記事の全内容です。お役に立てば幸いです。その他の関連事項については、皆様の学習が役に立ちます。内容については、PHP 中国語 Web サイトにご注意ください。
17. 関連する推奨事項:

WeChat アプレットの 3 レベル連携セレクターの使用方法

WeChat アプレット (笑) ヒーロー開発の紹介

WeChatアプレットのパスワード入力ボックスのデザインコード

以上がWeChat アプレット (アプリケーション アカウント) シンプルなアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。