WeChatミニプログラム開発の登録とプレビューの詳細な説明-ミニプログラム開発-php.cn

WeChatミニプログラム開発の登録とプレビューの詳細な説明

高洛峰

リリース： 2017-03-21 16:35:45

オリジナル

2346 人が閲覧しました

このチュートリアルは、ミニプログラムを学習したい学生に簡単なチュートリアルを提供するように設計されています。これまでに、react.js や vue.js などのフロントエンドフレームワークに触れたことがある場合は、すぐに学習できるようになると思います。ミニプログラムの開発。このチュートリアルは主に初心者向けなので、できる限り詳しく説明するように努めます。私のチュートリアルに従えば、小さなプログラムの開発方法を確実に学べると思います。

このチュートリアルは 3 つのパートに分かれています:

パート 1: 理論

このパートでは、WeChat ミニプログラム開発の開発をよく理解できるように、それに関連する基本的な知識を紹介します。ミニプログラムの全体的なコンセプト。

パート 2: 実践的な戦闘

では、読者や友人が私と一緒に実際の小さなプログラムを開発し、プログラミングの楽しさを楽しむことができるように導きます。

パート 3: 付録

いくつかの追加コンテンツは付録で説明されます。

学習プロセス中に疑問がある場合は、私のWeChat公式アカウントをフォローして、直接質問してください。

開発環境を構築する

WeChat アプレット開発ツールの最新バージョンをダウンロードします: ダウンロードページ
現在サポートされているシステムに適したバージョンを選択してください。 windows32、windows64、mac システム
がインストールされたら、WeChat Web 開発者ツールを開き、携帯電話の WeChat を使用して QR コードをスキャンしてログインします。
プロジェクトの追加を選択します。新しいミニプログラムプロジェクトを追加するには、AppID、プロジェクト名、プロジェクトディレクトリの 3 つの部分を入力する必要があることがわかります。

ここでは、迅速に開発するために、まず AppID なしオプションを選択します。AppID の詳細については、付録を参照してください。ここでは詳細には触れません。

プロジェクト名は、プロジェクトに付ける名前です。

プロジェクトディレクトリは、アプレットのコードが配置されるディレクトリを指します。ローカルにフォルダーを作成することも、github 上に新しいプロジェクトを作成することもできます。どちらの方法でも問題ありません。ここでは簡単にするために、デスクトップに直接新しいフォルダーを作成しました。

WeChatミニプログラム開発の登録とプレビューの詳細な説明

情報を入力すると、ツールはデフォルトで「現在のディレクトリにクイックスタートプロジェクトを作成する」オプションをチェックすることに注意してください。デフォルトを変更せずにそのまま使用できます。

すべてがうまくいけば、[プロジェクトの追加]をクリックすると、下の図に示されているコンテンツが表示されるはずです。

WeChatミニプログラム開発の登録とプレビューの詳細な説明

これで、ミニプログラムを開発するための環境が整いました。次のセクションでは、ミニプログラムの設定方法を紹介します。

ミニプログラムの構成

このセクションでは、ミニプログラムの構成を紹介します。まず、プロジェクトによって自動的に生成された app.json ファイルがどのようなものかを見てみましょう。

実際、ここで設定できる部分は 5 つあります。つまり、pages、window、tarBar、networkTimeout、および debug

pages: このアプレットがどのページで構成されるかを定義します。

今後ページを追加または削減する必要がある場合は、ここで設定する必要があります。ページ配列にはいくつかのページがあります。

ページが配列であり、配列の最初の項目がミニプログラムの最初のページであることがわかります。効果を確認するには、ログページを先頭に移動してみてください。開発中のスキル。

新しいページを追加する必要があるときに、愚かにも手動でフォルダーを作成してから新しい xxx.josn、xxx.js、xxx.wxml を作成する必要がない、もう 1 つのトリックがあります。 , この4つのファイルはxxx.wxssです。作成するページをページ配列に追加し、Ctrl + s を押して保存するだけです。クールじゃないですか？

{
  "pages":[
          "pages/logs/logs",
    "pages/index/index"
  ],
  ...
}

ログイン後にコピー

window: ウィンドウの構成情報を定義します。 [td]

WeChatミニプログラム開発の登録とプレビューの詳細な説明

{
  "tabBar": {
          "backgroundColor": "#fbfbfb",
          "borderStyle": "white",
          "selectedColor":"#50e3c2",
          "color": "#aaa",
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/homeHL.png"
          },{
            "pagePath": "pages/me/me",
            "text": "我",
            "iconPath": "images/me.png",
            "selectedIconPath": "images/meHL.png"
          }]
        }
}

ログイン後にコピー

networkTimeout: さまざまなネットワークリクエストのタイムアウトを設定するために使用されます。

この networkTimeout 設定の機能がよくわからない場合は、無視してください。これは実際の開発には影響しません。

[td]

WeChatミニプログラム開発の登録とプレビューの詳細な説明

次のコードは単なる例です

{
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "debug": true
}

ログイン後にコピー

debug

開発者ツールコンソールパネルでデバッグモードを有効にできます、デバッグ情報は情報の形式で提供される情報には、ページの登録、ページのルーティング、データの更新、およびイベントのトリガーが含まれます。これは、開発者がいくつかの一般的な問題を迅速に特定するのに役立ちます。

如果开启 debug 模式见上面代码

好了，五个部分介绍完了，希望各位在学习完这一节后可以尽情探索，修改各种配置看看效果，毕竟这样印象会更加深刻。

下一节我们将讲到小程序的项目结构。

项目结构

WeChatミニプログラム開発の登録とプレビューの詳細な説明

pages

这个文件夹用来存放小程序的页面，可以看到，其中的每个文件夹就表示一个页面，比如，要定义index的页面如何表现，就在index文件夹中的四个文件中定义。

一个页面由四个文件组成，分别是 xxx.js, xxx.json, xxx.wxml, xxx.wxss

xxx.js 将在下小节讲到，因为这里涉及到的内容比较多，需要单独列出一节来讲。
xxx.json 和 app.json 类似，app.json是整个微信小程序的配置文件，而xxx.json是xxx这单个页面的配置文件。

比如，logs.json 文件就配置了logs这个页面的导航栏的标题～

{
    "navigationBarTitleText": "查看启动日志"
}

ログイン後にコピー

注意：json 文件中不能有任何注释，不然会报错。

xxx.wxml は、xml の構文も備えた html の変種とみなすことができます。
xxx.wxssはCSSとみなすことができます。

ここで理解する必要があるのは、小さなプログラムの開発は実際には Web ページ開発のテクノロジーを使用して開発されており、フロントエンド担当者の学習コストが大幅に節約されるということです。しかし同時に、この製品は HTML5 に非常に似ていますが、HTML5 ではないことにも注意する必要があり、開発プロセス中に多くの落とし穴に遭遇することになります。

utils

このフォルダー内のutils.jsは、主にいくつかのパブリック関数を定義するために使用されます。

その中に新しい api.js ファイルを作成して、サーバーのアドレスを抽象化することもできます。

app.js

コンテンツのこの部分については、次のセクションでも説明します。

app.json

このファイルの役割については前のセクションですでに説明しました。これはミニプログラム全体の構成ファイルです。

app.wxss

ここで定義されているのは、ミニプログラム全体のスタイルシートです

页面生命周期

终于到了小程序最核心，最关键的部分了，这也是我们理论篇的最后一节，那么我们开始吧！

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: &#39;I am global data&#39;
})

ログイン後にコピー

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: &#39;Set some data for updating view.&#39;
    })
  },
  customData: {
    hi: &#39;MINA&#39;
  }
})

ログイン後にコピー

此时，相信你对小程序开发的理论知识已经有一定了解了。

如果觉得比较模糊，第二部分的实战篇就是为了让我们能够结合理论来进行实践。

如果你比较自信，你也可以直接看这个实战项目的源代码。

以上がWeChatミニプログラム開発の登録とプレビューの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。