What do you need to learn to develop WeChat mini programs?

On January 9, 2017, the WeChat mini program was launched, making countless Internet people crazy. Mini programs will usher in an industry revolution, which may bring huge changes to the current e-commerce business model and users’ online experience.

Then in 2017, learning WeChat mini program development is bound to set off a craze in the IT industry circle. Whether you are an IT veteran, a self-taught or a trained newcomer, when you are bragging and praising If you don’t talk about WeChat mini programs, you may feel low.

Now let’s talk about what you need to learn and understand about WeChat applet development:

First of all, the most basic thing is to understand WeChat development knowledge. You don’t even have a platform. We will learn more about it later. Niu X, you can’t continue playing. Without further ado, let’s start with a WeChat development knowledge map. PS: Friends who want to learn mini program development, please go to: WeChat mini program practical video course is online! Learn quickly!

So what are the basic knowledge of small programs?

A complete WeChat mini program is composed of an App instance and multiple Page instances, where the App instance represents the mini program application, and multiple Pages represent multiple pages of the mini program. .

In addition, the WeChat applet does not provide a way to customize components, which may make it difficult to develop more complex applications with the WeChat applet.

The WeChat applet itself is very simple. Just open the official tutorial and you can learn and try it yourself. Since WeChat official documents are still being significantly updated, please open the latest official documents in time to check the update status.

The basic knowledge of WeChat mini program is mainly divided into the following parts:

1. Two configuration files&& two core functions

2. WXML template, page rendering

3. Jump between pages

4. Event

5. Official components and official API

app.json The global configuration file of the application, which determines the path of the page file, window performance, and network settings Timeout, set multiple tabs, etc.

The official example is as follows:

{
  "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
}

mainly includes the following configurations:

• pages: page path The array represents all the pages to be loaded by the mini program, where the first item in the array represents the initial page of the mini program.

• window: WeChat’s native function, not very customizable. You can set the status bar, navigation bar, title and window background color of the mini program.

## It contains six properties (navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor),

backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)), developers can configure it according to their own needs.

       

• #tabBar: WeChat’s native function, not very customizable. Applicable to regular Tab applications, the Tab bar can be placed at the top or bottom; tabBar is an array and only supports 2-5 tabs.

tabBar officially gives five attributes (color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array)).

borderStyle sets the border color, currently only supports (black and white).

They all have the following four attributes (pagePath(String), text(String), iconPath(String), selectedIconPath(String)).

• networkTimeout: Configure the timeout for network requests of the mini program.

• debug: Debug mode switch. It is recommended to turn it on in development mode. Don’t forget to turn it off for official release.

App() is used to register a small program. There is only one globally. The small program does not provide a way to destroy it, so it can only be used when the small program enters the background for a certain period of time. , or when the system resource usage is too high, it will be truly destroyed.

Page() is used to register a page and maintain the life cycle and data of the 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. 组件化的解决方案

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

最后

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