ホームページ > 記事 > WeChat アプレット > WeChat アプレットのデバッグ
WeChat ミニ プログラムが立ち上げられてからかなり時間が経ちますが、私は最近それをいじる時間があり始めたので、このブログ投稿には私自身の探索と研究のプロセスもまとめています。私のようなフロントエンドの経験がない学生にとって役立つことを願っています。
ミニプログラムのリリースプロセスは次のとおりです:
ユーザーのさまざまなニーズに応じて、登録要件も異なります:
エンタープライズ開発者、私は会社登録関連情報を持っています、ミニプログラムを公開するために 500 の登録料を支払う余裕があります
会社はプログラマーに給料を払っていません、私は会社登録情報を持っています、私は望んでいません;技術的予備のため、料金を支払います
お金がありません 面倒なプログラマー、会社の登録情報はありません、技術的予備のためだけに料金を支払う必要はありません
タイプ 12 のユーザーは、まずメールが必要です。 WeChat パブリック プラットフォームの バインドされていない個人アカウント
のアドレス 登録手順については、公式ドキュメントを参照してください。タイプとして企業の種類を選択し、企業名とビジネス ライセンスの登録を入力する必要があります。実機で実行するにはアプリ ID が必要なので、WeChat 支払い 300非绑定个人帐号
的邮箱在微信公众平台上注册, 注册步骤可参考官方文档,类型选择企业类型, 需要填写企业名称和营业执照注册号等. 由于运行到真机需要app id, 可选择微信支付300的选项, 但暂不支付。
类型3的用户只能下载微信web开发者IDE, 通过模拟器开发体验无app id功能受限的小程序.用于注册小程序的企业帐号可添加个人帐号
为管理员, 管理员可邀请10个开发者帐号, 并且每个企业帐号有一个app id; 开发者可通过微信IDE和app id进行开发和真机调试; 如果涉及网络请求
, 还需要在小程序后台配置服务器域名, 如下图:
微信提供了微信web开发者工具
作为官方IDE, 可以在此下载官方IDE
可在此下载demo体验, 填写app id后通过官方IDE打开即可看到界面如下图,
由于官方IDE代码补全和体验不是很好, 例如每打开一个文件就新开一个tab背景色无法调等等, 强迫症开发者可以选择使用webstorm作为IDE+微信IDE只作为模拟器.webstorm还有很多感人的小细节, 比如hex颜色可以在左侧预览.
微信公众平台 官方的;
github 微信小程序开发资源汇总 这个比较全;
豆瓣电影demo 我学习小程序参考的demo;
像我一样前端0基础的同学可以先大体看一下官方平台上的简易教程 框架 组件 API 工具的介绍, 对整体有个基本的概念, 然后再从demo入手, 一边研究别人的demo 一边写自己的demo, 遇到不会的问题寻求搜索引擎和社区的帮助.
由于官方文档已经有框架等的介绍, 我这里通过自己的理解总结一下, 看到这的同学如果还没读官方文档可以先看一下我的理解, 后续再自己摸索时形成自己的理解.
通过官方demo可以看到根文件夹就是项目名, 其下有pages
オプションを選択できます。 , ただし、支払いはまだ利用できません。 タイプ 3 のユーザーは、WeChat Web 開発者 IDE をダウンロードし、シミュレーターを通じてアプリ ID と制限された機能なしで小規模なプログラムを開発および体験することのみが可能です。小規模なプログラムの登録に使用されるエンタープライズ アカウントは、管理者として 個人アカウント
を追加できます。 、管理者は 10 個の開発者アカウントを招待でき、各エンタープライズ アカウントにはアプリ ID があり、開発者は開発と実際のデバイスに WeChat IDE とアプリ ID を使用できます デバッグ; ネットワーク リクエスト
が関係する場合は、ミニのバックグラウンドで 以下に示すようにサーバーのドメイン名を構成します:
1.2 ミニプログラム開発ツール
WeChat Web 開発者ツール
を提供します。公式 IDE はここからダウンロードできます🎜 デモ体験はここからダウンロードできます。アプリ ID を入力します。公式 IDE で開くと、次のようなインターフェイスが表示されます。 🎜🎜🎜🎜 🎜🎜IDE🎜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 mvcperspective MVC
の観点から見ると、js はコントローラー、json はロジックです
、wxml は UIコントロール
のみを含むビュー、wxss はビュー内の各コントロールの特定のスタイルのみを設定する設定ファイルです
App() は、ミニ プログラムの ライフ サイクル
メソッドです。これは、ミニ プログラムのライフ サイクルの各段階でビジネス ロジックが実行され、グローバル
app.wxss
app.wxml
モジュールコード構造
ページ内のクラスB
var aObj = require('../../IDK/A.js')
4.2 wxss コントロールの読み込みなど、パブリック UI コントロール スタイルを app.wxss に書き込むことができます。 ; ページにのみ関連する UI スタイルは、wxss で各ページに対応して書き込むことができます。デモを書いたり、公式ドキュメント
プログラミングにプログラミング... 問題に遭遇したら調べて解決し、最終的にさまざまな問題を解決して出産したときはとても充実しています。デモの作成中に私が遭遇したいくつかのシーンの概要です
5.1.1 Click
イベント
ClickイベントbindTap=メソッド名。クリックイベントに応答するには"5.1.2 Scrolling
Viewsc roll- view
<ブロックwx:for-items="{{データソース}}" wx:for-item="a data"> データソースをバインドします。 4 ネットワークリクエスト
wx.request
fetch-thenを使用することもできます
5.2.2 実機のネットワークリクエストデータが空である
。
以上がWeChat アプレットのデバッグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。