WeChat アプレットのデバッグ

WeChat ミニ プログラムが立ち上げられてからかなり時間が経ちますが、私は最近それをいじる時間があり始めたので、このブログ投稿には私自身の探索と研究のプロセスもまとめています。私のようなフロントエンドの経験がない学生にとって役立つことを願っています。

---

1. 環境

ミニプログラムのリリースプロセスは次のとおりです:

ミニプログラムのリリースプロセス

1.1 WeChat認証

ユーザーのさまざまなニーズに応じて、登録要件も異なります:

1. エンタープライズ開発者、私は会社登録関連情報を持っています、ミニプログラムを公開するために 500 の登録料を支払う余裕があります

2. 会社はプログラマーに給料を払っていません、私は会社登録情報を持っています、私は望んでいません;技術的予備のため、料金を支払います

3. お金がありません 面倒なプログラマー、会社の登録情報はありません、技術的予備のためだけに料金を支払う必要はありません

タイプ 12 のユーザーは、まずメールが必要です。 WeChat パブリック プラットフォームの バインドされていない個人アカウント のアドレス 登録手順については、公式ドキュメントを参照してください。タイプとして企業の種類を選択し、企業名とビジネス ライセンスの登録を入力する必要があります。実機で実行するにはアプリ ID が必要なので、WeChat 支払い 300非绑定个人帐号的邮箱在微信公众平台上注册, 注册步骤可参考官方文档，类型选择企业类型, 需要填写企业名称和营业执照注册号等. 由于运行到真机需要app id, 可选择微信支付300的选项, 但暂不支付。

类型3的用户只能下载微信web开发者IDE, 通过模拟器开发体验无app id功能受限的小程序.用于注册小程序的企业帐号可添加个人帐号为管理员, 管理员可邀请10个开发者帐号, 并且每个企业帐号有一个app id; 开发者可通过微信IDE和app id进行开发和真机调试; 如果涉及网络请求, 还需要在小程序后台配置服务器域名, 如下图:

配置服务器

1.2 小程序开发工具

1.2.1 微信web开发者工具

微信提供了微信web开发者工具作为官方IDE, 可以在此下载官方IDE
可在此下载demo体验, 填写app id后通过官方IDE打开即可看到界面如下图,

IDE

1.2.2 webstorm

由于官方IDE代码补全和体验不是很好, 例如每打开一个文件就新开一个tab背景色无法调等等, 强迫症开发者可以选择使用webstorm作为IDE+微信IDE只作为模拟器.webstorm还有很多感人的小细节, 比如hex颜色可以在左侧预览.

webstorm hex

---

2. 社区资源汇总

微信公众平台 官方的;
github 微信小程序开发资源汇总 这个比较全;
豆瓣电影demo 我学习小程序参考的demo;

像我一样前端0基础的同学可以先大体看一下官方平台上的简易教程 框架 组件 API 工具的介绍, 对整体有个基本的概念, 然后再从demo入手, 一边研究别人的demo 一边写自己的demo, 遇到不会的问题寻求搜索引擎和社区的帮助.

---

3. 框架

由于官方文档已经有框架等的介绍, 我这里通过自己的理解总结一下, 看到这的同学如果还没读官方文档可以先看一下我的理解, 后续再自己摸索时形成自己的理解.

3.1 简介

通过官方demo可以看到根文件夹就是项目名, 其下有pages オプションを選択できます。 , ただし、支払いはまだ利用できません。 タイプ 3 のユーザーは、WeChat Web 開発者 IDE をダウンロードし、シミュレーターを通じてアプリ ID と制限された機能なしで小規模なプログラムを開発および体験することのみが可能です。小規模なプログラムの登録に使用されるエンタープライズ アカウントは、管理者として 個人アカウント を追加できます。 、管理者は 10 個の開発者アカウントを招待でき、各エンタープライズ アカウントにはアプリ ID があり、開発者は開発と実際のデバイスに WeChat IDE とアプリ ID を使用できます デバッグ; ネットワーク リクエスト が関係する場合は、ミニのバックグラウンドで 以下に示すようにサーバーのドメイン名を構成します:

設定サーバー

1.2 ミニプログラム開発ツール

1.2.1 WeChat Web 開発者ツール

🎜WeChat は、公式 IDE として WeChat Web 開発者ツール を提供します。公式 IDE はここからダウンロードできます🎜 デモ体験はここからダウンロードできます。アプリ ID を入力します。公式 IDE で開くと、次のようなインターフェイスが表示されます。 🎜🎜🎜🎜 🎜🎜IDE🎜

1.2.2 webstorm

🎜 公式 IDE コードの補完とエクスペリエンスはあまり良くないため、たとえば、ファイルを開くたびに、新しいタブの背景色は調整できないなど、強迫性障害を持つ開発者は、ウェブストームを IDE として使用することと、WeChat IDE をシミュレーターとしてのみ使用することを選択できます。ウェブストームには、左側で 16 進数の色をプレビューできるなど、多くの感動的な詳細もあります。 🎜🎜🎜🎜🎜🎜ウェブストーム hex🎜🎜🎜2. コミュニティ リソースの概要🎜 🎜WeChat パブリック プラットフォーム公式;🎜git🎜hub これは、WeChat ミニ プログラム開発リソースの包括的な概要です。🎜 Douban ムービー デモは、ミニ プログラムを学習するための私の参考デモです。🎜🎜私のようなフロントエンドの経験がゼロの学生は、まず公式プラットフォーム フレームワーク🎜 コンポーネントAPI🎜 ツールの紹介、全体の基本概念を理解してから、他の人のデモを学びながらデモを開始します。自分のデモを作成しているときに、わからない問題が発生した場合は、次のヘルプを求めてください。 検索エンジンとコミュニティ🎜 🎜🎜3. フレームワーク🎜🎜 公式ドキュメントにすでに概要が記載されているため、フレームワークについては、私自身の理解を通じてここにまとめます。公式ドキュメントを読んでいない場合は、最初に私の理解を見て、後で自分で調べてください。ご自身でご理解ください。🎜🎜3.1 はじめに🎜🎜🎜公式デモ ルート フォルダーはプロジェクト名で、その下に pages フォルダーがあり、各ビジネス モジュールがページの個別のサブフォルダーを作成します。たとえば、Ziwenjia の名前は、component_one です。 、このフォルダーの下の .js.🎜json🎜.w🎜xml🎜.🎜wxss🎜 にも、component というプレフィックスを付ける必要があります。以下に示すように、赤いボックスのフォルダーは 2 番目のタブの機能に対応し、緑のボックスのフォルダーは 2 番目のタブの機能に対応します。最初の各タブの機能に対応します。青いボックス内のファイル名は変更できません。グローバルです。🎜🎜🎜🎜🎜🎜

フレームワークの例

pages フォルダー名と app.jsjsonwxss の由来に関する公式の説明は次のとおりです: 小さなプログラムには、プログラム全体を説明するアプリと、それぞれのページを説明する複数のページが含まれています。 pages文件夹名和app.jsjsonwxss命名的来头官方解释为: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

目录结构

通过上面的表, 可以看出, 全局性的app.js app.json是必须的, 局部的.js.wxml是必须的. 如果代码量比较小, 类似豆瓣电影demo, 可以把所有样式表都写在app.wxss中, 但还是推荐根据业务区分, 写到各自业务的wxss中.pages中的jsonwxss会覆盖app.jsonapp.wxss中相同的配置项, 若page缺少某个选填文件类型, 则该页面直接使用app对应的配置.

3.2 mvc角度

从MVC

ディレクトリ構造

上記の表から、グローバル app.js app.json が必要であり、ローカル .js.wxml が必要であることがわかります。 Douban ムービーデモのように、コード量が比較的少ない場合は、すべてのスタイルシートを app.wxss に記述することもできますが、それでも業務に応じて区別し、それぞれの wxss に記述することをお勧めします。ページ内の jsonwxss はアプリを上書きします。 .jsonapp.wxss の同じ構成項目について、ページにオプションのファイル タイプがない場合、ページはアプリに対応する構成を直接使用します

3.2 mvcperspective MVC の観点から見ると、js はコントローラー、json はロジックです

設定ファイル

、wxml は UIコントロール
のみを含むビュー、wxss はビュー内の各コントロールの特定のスタイルのみを設定する設定ファイルです

3.3 それぞれのタイプのファイルは何をしますか

3.3 .1 app.js

App() は、ミニ プログラムの ライフ サイクル
メソッドです。これは、ミニ プログラムのライフ サイクルの各段階でビジネス ロジックが実行され、グローバル

変数もここで設定できます。 WeChat アプレットをグローバルに構成し、ページ ファイルのパス、ウィンドウのパフォーマンスを決定し、ネットワーク タイムアウトを設定し、複数のタブを設定します。pages[] の Index=0 の要素は、アプレットを開いたときにデフォルトで表示されるページです。ここで設定することもできます デバッグ機能をオンにします。

3.3.3 app.wxss

app.wxss

app.wxssは、

クラス

に対応する.xxxを設定するために使用されます。 .wxml. 内の対応する UI コントロールの名前

app.wxml

4.

モジュール化

---

4.1 js プロジェクト内の業務に密接に関連するモジュールはコンポーネントとしてページの下に配置されます。事業間で共通のモジュールはIDK配下に置き、事業に関係のない事項はIDP配下に置く

モジュールコード構造
ページ内のクラスB

がIDKのクラスA

を参照している場合、次のようにクラス B に A のインスタンスを作成でき、クラス B の Page() メソッドで参照されます。

var aObj = require('../../IDK/A.js')

4.2 wxss コントロールの読み込みなど、パブリック UI コントロール スタイルを app.wxss に書き込むことができます。 ; ページにのみ関連する UI スタイルは、wxss で各ページに対応して書き込むことができます。デモを書いたり、公式ドキュメント

プログラミング

に集中したり、Baiduに向き合ったり、Googleに向き合ったりしてスタック

オーバーフロー

にプログラミング... 問題に遭遇したら調べて解決し、最終的にさまざまな問題を解決して出産したときはとても充実しています。デモの作成中に私が遭遇したいくつかのシーンの概要です

5.1 に到達するためのアプリケーションのシナリオ

5.1.1 Click
イベント

ClickイベントbindTap=メソッド名。クリックイベントに応答するには"5.1.2 Scrolling

View

sc roll- view

scroll-y 垂直スクロール

bindScroll="スクロールをリッスンするためのメソッド名イベント

5.1.3 リストデータバインディング

for

-items="{{データソース}}" wx:for-item="a data"> データソースをバインドします。 4 ネットワークリクエスト

WeChatアプレットAPIを使用してget

postリクエスト

、

wx.request

を送信することができます。また、fetch.then

fetch-thenを使用することもできます

5.2 遭遇した落とし穴

5.2.1

画像がシミュレーターで表示されない

WeChat アプレットのバグ、時々画像が傍受され、シミュレーターで表示できない

5.2.2 実機のネットワークリクエストデータが空である

必須 ミニ プログラム動作設定プラットフォームでリクエスト ドメイン名を設定します。実機ネットワーク リクエストをサポートするには、500 の登録料を支払う必要があります。

アプリケーション シナリオに関するその他の話

---

ミニ プログラムの WeChat の公式の位置付け。 - WeChat ミニ プログラムは、ユーザーとサービスを接続するためのまったく新しい方法であり、優れたユーザー エクスペリエンスを備えながら、簡単に取得して

で広めることができます。そのため、ミニプログラムは公式アカウントに比べてWeChat限定のプラグインに近いものとなります。一般的に、ペット病院の家事サービスや電車のチケットの購入など、ツール型の起業プロジェクトの場合は、別のアプリを作成するのではなく、WeChat エコシステムに依存する方が適しています。 Baidu や Ali などのインターネット企業。WeChat ミニ プログラムの閉塞的な性質のため、トラフィック迂回ツールとして使用できません。また、その API には WeChat のカスタマイズが多数含まれているため、既存の H5 コードを完全に移植することはできず、ある程度の学習が必要です。開発コストが発生します。学生は、上記のパート 2「コミュニティ リソース」で関連するニュースとコメント分析を読むこともできます。私自身の意見については、取り上げません

。

以上がWeChat アプレットのデバッグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。