WeChatミニプログラム開発の記録
私は初めてWeChatアプレットを開発しようとしています。ブログ投稿を作成して、開発プロセスにおけるBaiduプログラミングの難しさ、アイデア、内容を可能な限り詳細に記録して参照できるようにする予定です。
初日
開発の背景
別の新しく雇用された同僚との開発に参加します。私はフロントエンドのWeChatアプレットを担当し、バックエンドは独自のLua言語を使用し（通常のJava、Springbootシリーズ、またはjsp-servletシリーズを実装できます）、データは途中でjsonを介して送信されます。
完成したプロジェクトリンク
https://gitee.com/lyuhuyuteru/weixin/tree/master/%E6%8E%A5%E9%BE%99%E7%AE%A1%E7%90%86%E5%B0%8F%E7%A8 ％8B％E5％BA％8F
登録テスト番号、アプレット番号
https://mp.weixin.qq.com/
WeChatパブリックプラットフォームの公式ウェブサイトを開き、小さなプログラムを見つけてクリックして登録し
、開発ツールをダウンロードします。作成者が記事を書いたときのバージョンは1.03.2010240
で、開発管理で確認できます。AppIDとAppSecret
インストールが完了したら、プログラム
を開き、開いた後に新しいプロジェクトを作成します。登録前にAppIDを入力するか、テスト番号を使用できます。クラウド開発機能を使用するかどうかは関係ありません。
ページジャンプ、ログイン傍受
クリックして新しく作成したプロジェクト、app.js（このファイルはプログラムの共通部分です）、インデックス（これはホームページです）を
入力して新しいloginPageログインインターフェイスを作成し、右クリックして新しいフォルダーを作成し、作成しますフォルダの下に新しいページloginPage。4つのファイルが自動的に生成され
ます。app.jsを開くのはwxml、wxss、js、jsonで、図の位置にコードを追加します。
コードはページをにジャンプさせるためのものです。ユーザーがログインしていないときのログインインターフェイス
ページがapp.Jsonページで宣言されているかどうかを確認します。
ホームページwxmlコード
Jsコード
Cssコード
Jsonコード
コンポーネントコンポーネントのインポート
ホームページアイコン
ホームページコードのインポート
ファイルのディレクトリ構造
│ app.js
│ app.json
│ app.wxss
│ project.config.json
│ sitemap.json
│
├─components
│ ├─cell
│ │ cell.js
│ │ cell.json
│ │ cell.wxml
│ │ cell.wxss
│ │
│ ├─cells
│ │ cells.js
│ │ cells.json
│ │ cells.wxml
│ │ cells.wxss
│ │
│ ├─icon
│ │ icon.js
│ │ icon.json
│ │ icon.wxml
│ │ icon.wxss
│ │
│ ├─import
│ │ │ base64.js
│ │ │ common.wxss
│ │ │ CustomPage.js
│ │ │
│ │ └─behaviors
│ │ theme.js
│ │
│ └─weui-wxss
│ └─dist
│ └─style
│ │ weui.wxss
│ │
│ └─icon
│ weui-icon.wxss
│
├─images
│ icon_nav_feedback.png
│ icon_nav_form.png
│ icon_nav_special.png
│ icon_nav_z-index.png
│ jielong.jpg
│ tabbar_icon_chat_active.png
│ tabbar_icon_setting_active.png
│
├─pages
│ ├─icons
│ │ icons.js
│ │ icons.json
│ │ icons.wxml
│ │ icons.wxss
│ │
│ ├─index
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ ├─loginPage
│ │ loginPage.js
│ │ loginPage.json
│ │ loginPage.wxml
│ │ loginPage.wxss
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
│
└─utils
util.js
効果
トピック外のスキル
デバッグ認証のプロセスを続行するには、json-serverで
debug json
can Stager nodejs json形式を設定して認証をキャンセルし
、プログラムのフロントエンドとリアエンド
を詳細に分離します。
https://blog.csdn.net/weixin_44612322/article/details/102960647
jsonの例
{
"data": [{
"username": "ldh",
"password": "123"
}]
}
svg
タグコードを取得するためのsvg変換、
新しいtxtの
作成後にsvgサフィックスの名前を変更し、ブラウザを開くと、pngを表示できます。
