WeChatミニプログラム実用プロジェクト-1つ

第一章

1はじめに

最初に話させてください。WeChatアップルレットを開始する予定です。結局、このアップルトはすでに非常に人気があるので、ダウンロードしてインストールする必要はありません。実際、名前を検索する限り、アップルトを直接開くことができます。

このWeChatアップルレットの開発のプログラミングは、次のようなWebページの開発のプログラミングと非常によく似ています。

Webページは通常HTML + CSS + JSを使用しますが、WeChatアプリレットはWXML + WXSS + JSを使用するため、これら2つは非常によく似ています。ただし、詳細については、まだ少し違いがあります。たとえば、最も一般的に使用されるタグの1つであるHTMLのdivとWXMLのviewを選択します。他のタグも異なります。さらに、WeChatアプリレットはwx：ifや{ {}}などの属性を使用します。これらの属性は（React、Vue）に似ています。通常、JavaScriptは、ユーザークリック動作イベントや監視イベントなどのDOM（HTML）を操作するために使用されます。このため、基本的な原則を理解している限り。

cssとwxssはスタイルファイルですが、ほとんどは同じです。ただし、要件を初期化したいのですが、さまざまなブラウザとの互換性を保つために、cssはページ全体のすべての要素を意味するワイルドカード文字「*」をサポートできます。ただし、wxssはこのワイルドカード「*」をサポートしておらず、一般的に使用される要素を1つずつ使用してのみ書き込むことができます。

残りのjsについては話しません！どちらも同じです。

WeChatアップルレットの観点からは、データ形式ファイルを意味する追加のjsonファイルがあります。使用法に関しては、app.jsonが実際にはすべての構成ファイルとして使用されます。

2.WeChatミニプログラムディレクトリ構造の説明

2.1アプリディレクトリ：

app.js：グローバルデータとロジック。

app.json：アプリ全体の情報を構成します。自分でtabBar（下部のメニューバー）を追加できます。

app.wxss：グローバルスタイル設定。

2.2インデックスページ：

pagesフォルダーはpageフォルダーです。たとえば、名前はindexで、ページのフォルダーには次のものが含まれます。

index.js：論理処理とデータ。

index.wxml：レイアウトUI、コンポーネントなど。

index.json：構成ページのエントリ。

index.css：スタイルファイル。

2.3ページフォルダを作成します。

ページのカスタムフォルダを作成する場合は、最初にapp.jsonでページのパスを設定し、pagesメソッドで「pages / login / login」と入力すると、特にログインフォルダが自動的に作成されます。フォルダはすべて（.wxml、.wxss、.js、.json）です。ファイルを1つずつ手動で作成する必要はありません。

3.IDEツールを準備します

WeChat DeveloperToolsとVisualStudioCodeの2つのIDEツールを使用しています。

私は主にVisualStudio Codeを使用してコードを記述しています。このIDEツールは非常に使いやすく、多くのプラグインがあります。さらに、WeChat開発者ツールを使用してデバッグページを表示します。とにかく、更新されたファイルを同期します。

4.実際の戦闘プロジェクトの構築

4.1ディレクトリ構造を構築する

4.2プロジェクトページを作成する

4.3フォントアイコンの紹介

ステップ1：AlibabaフォントアイコンのWebサイトを開く

ステップ2：アイコンを選択します

ステップ3：ディレクトリアイテムに追加する

ステップ4：ローカルにダウンロードする（スタイルディレクトリに配置）

手順5：スタイルファイルをcssからwxss（小さなプログラムスタイル）に変更する

ステップ6：小さなプログラム（style / iconfont.wxss）で紹介する

4.4tabBarの属性と構造

このtabBar（小さなプログラム）は、通常、小さなプログラムウィンドウと切り替えページの下部または上部にあるナビゲーションバーとして使用されます。

アップルトルートディレクトリのapp.jsonファイルは、WeChatアップルトをグローバルに構成するために使用されます。

 "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },

次に、実際の戦闘中にメモを書いてください！あなたがするように書いてください！

絶えず更新しています...