WeChat ミニプログラムを開発するには何を学ぶ必要がありますか?

2017 年 1 月 9 日、WeChat ミニ プログラムが開始され、数え切れないほどのインターネット ユーザーが熱狂しました。ミニ プログラムは業界革命の先駆けとなり、現在の e コマース ビジネス モデルとユーザーのオンライン エクスペリエンスに大きな変化をもたらす可能性があります。

ということで、2017 年が始まろうとしている今、WeChat ミニ プログラム開発を学ぶことは IT 業界でのブームを巻き起こすことは間違いありません。IT のベテラン、独学の人、または訓練を受けた新人であっても、やめてください。 WeChat ミニ プログラムを自慢するときにその話をすると、気分が落ち込むかもしれません。

次に、WeChat ミニ プログラム開発について学び、理解する必要があることについて話しましょう:

まず第一に、最も基本的なことは、WeChat 開発の知識を理解することです。プラットフォームさえ持っていなくても大丈夫です。どんなに素晴らしくても、後でプレーを続けることはできません。さっそく、WeChat 開発ナレッジ マップから始めましょう。 PS: ミニプログラム開発を学びたい友達は、ここにアクセスしてください: WeChat ミニプログラム実践ビデオコースがオンラインです!早く学べ！

それでは、ミニプログラムの基礎知識とは何ですか？

完全な WeChat ミニ プログラムは、1 つのアプリ インスタンスと複数のページ インスタンスで構成されます。アプリ インスタンスはミニ プログラム アプリケーションを表し、複数のページはミニ プログラムの複数のページを表します。

さらに、WeChat アプレットにはコンポーネントをカスタマイズする方法が用意されていないため、WeChat アプレットを使用してより複雑なアプリケーションを開発することが困難になります。

WeChat アプレット自体は非常に簡単で、公式チュートリアルを開くだけで、自分で学習して試すことができます。 WeChat の公式ドキュメントは現在も大幅に更新されているため、最新の公式ドキュメントを開いて更新状況を確認してください。

WeChat ミニ プログラムの基本知識は主に次の部分に分かれています:

1. 2 つの設定ファイル && 2 つのコア機能

2. ページ間ジャンプ

4. イベント

5. 公式コンポーネントと公式 API

app.json ページファイルのパス、ウィンドウパフォーマンス、ネットワークタイムアウトの設定を決定する、アプリケーションのグローバル設定ファイルと設定 複数のタブなど。

次の公式の例が示されています:

{
  "pages": [    
     "pages/index/index",    
     "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

には主に次の構成が含まれています:

• pages: ミニプログラムによってロードされるすべてのページを表すページパスの配列。配列はミニ プログラムの最初のページを表します。

• ウィンドウ: WeChat のネイティブ機能。あまりカスタマイズできません。ミニ プログラムのステータス バー、ナビゲーション バー、タイトル、ウィンドウの背景色を設定できます。

6 つのプロパティ (navigationBarBackgroundColor(HexColor)、navigationBarTextStyle(String-(black,white))、navigationBarTitleText(String)、backgroundColor(HexColor)、

backgroundTextStyle(String-(dark,light))、enablePullDownRefresh (ブール値))、開発者は独自のニーズに応じて構成できます。

。通常のタブ アプリケーションに適用でき、タブ バーは上部または下部に配置できます。tabBar は配列であり、2 ～ 5 個のタブのみをサポートします。

tabBar は正式に 5 つの属性 (color(HexColor)、selectedColor(HexColor)、backgroundColor(HexColor)、borderStyle(String)、list(Array)) を提供します。

• borderStyle は境界線の色を設定します。現在は（黒と白）のみをサポートしています。

これらはすべて、次の 4 つの属性 (pagePath(String)、text(String)、iconPath(String)、selectedIconPath(String)) を持ちます。

networkTimeout: ミニ プログラムのネットワーク リクエストのタイムアウトを構成します。

debug: デバッグモードスイッチ。開発モードではオンにすることをお勧めします。正式リリースでは忘れずにオフにしてください。
• App()

  は、グローバルに 1 つだけ存在するため、ミニ プログラムがバックグラウンドに入ったときにのみトリガーされます。一定期間が経過すると、システム リソースが過剰に占有され、実際に破壊されます。

Page()

は、ページを登録し、ページのライフサイクルとデータを維持するために使用されます。

微信官方给Page()函数以下属性(data(Object),onLoad(function),onReady(Function),onShow(Function)，onHide(Function),onUpload(Function), onPullDownRefresh(Function)),而且你也可以添加任意函数或者数据到object参数中,在这个页面用this即可访问。

下面是微信给出的官方代码:

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
  },  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  }
})

微信官方也给出的page的生命周期的图片，朋友们可以参考体会：

小程序虽然是hybrid模式，但并不使用HTML渲染，而是全部通过自定义标签来渲染页面。在微信小程序中采用了微信自己原生的渲染方式。页面布局采用的是wxml，然后结合基础组件，事件系统构建出来页面的结构。wxml中有数据绑定，条件渲染，列表渲染， 模版，事件， 引用这几种方式。具体这些为以后的开发应用会带来哪些好处只有等时间来证明了。

数据绑定，官方给出的如下的例子：

<view> {{ message }} </view>

从上面的代码可以看出来在视图层接受逻辑层的代码的时候需要用2个大括号{ { } }把数据的键值包起来就可以得到数据的值。

条件渲染，适合根据数据输出不同状态的 WXML，主要是用到wx:if 和 block wx:if这两个。

列表渲染 – wx:for，wx:for绑定一个数组，就可使用数组中各项数据重复渲染该组件，注意默认数组的当前项的下标变量名默认为index，数组当前项的变量名为item，下面是官方给出的事例代码：

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

Page({  data: {
    items: [{
      message: 'foo',    
    }, {      
      message: 'bar'
    }]
  }
})

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

模板，WXML提供模版(template)，可以让我们复用一些wxml片段，模版也可以根据你自己的条件来判断在那种情况下渲染那种模版，如下举例：

// 引入wxml模块
<import src="../../components/grid-article/index"></import>
 
<block wx:for="{{posts}}" wx:for-item="post" wx:key="id">
    // 调用wxml模块，同时可传入数据
    <template is="grid-article" data="{{post}}"></template>
</block>

事件，事件分为冒泡事件和非冒泡事件,冒泡事件是当一个组件上的事件被触发后,该事件会向父节点传递,而非冒泡事件则不会。
现在微信小程序给出的冒泡事件仅仅有6个(touchstart,touchmove, touchcancel,touchend,tap, longtap),下图是他们分别对应的触发条件。

剩下的都属于非冒泡事件。

事件是通过事件绑定来实现的。它的写法是以key,value的形式来写的。key以bind 和catch 开头,然后跟上事件的类型。 value 是一个字符串,需要在对应的page中定义同名的函数,不然当触发事件的时候会报错。(bind 事件绑定不会阻止冒泡事件向上冒泡,而catch 可以阻止冒泡事件向上冒泡)。

微信小程序中组件自带一些功能与微信风格的样式,一个组件通常包括开始标签和结束标签,属性是用来修饰这个组件,内容在两个标签之内。

到此小程序开发需要了解的基本内容已经介绍完毕，剩下的就是朋友们自己多查看微信官方文档，及时学习更新。

如何设计微信小程序？

1.  构建系统和目录结构

    由于微信小程序本身对工程化几乎没有任何的支持，所以动手搭建一份：wxapp-redux-starter。使用gulp进行编译构建。

    按照pages、components、redux、vendors/libs、images几个核心部分拆分，直接上目录。

2. 引入Redux进行数据集中管理

    一个完整的Redux方案如下，包括：将Store注入到App中、将state的数据和reducer的方法映射到Page中。一旦state发生变化，Page.data也会更新，进而触发页面的重新渲染。

3. 组件化的解决方案

    组件化的解决方案核心就在于把组件的关联数据集中起来管理，只暴露出默认数据和数据的操作函数。

最后

    尽管微信小程序目前有开发者工具不完善、真机表现和开发环境差异很大、部分组件性能较差、部分功能有缺陷等等问题，但是并不妨碍微信小程序成为时下最火热的互联网话题和开发学习的新热点。犹如一块巨石扔进了平静的湖面中，到底能掀起多大多久的浪花让我们拭目以待。