WeChat 미니 프로그램을 개발하려면 무엇을 배워야 합니까?

2017년 1월 9일, 위챗 미니 프로그램이 출시되어 수많은 네티즌들을 열광시켰습니다. 미니 프로그램은 산업 혁명을 가져올 것이며, 이는 현재의 전자 상거래 비즈니스 모델과 사용자의 온라인 경험에 큰 변화를 가져올 수 있습니다.

2017년이 다가오고 있는 지금, IT 베테랑이든, 독학이든, 숙련된 신입이든, WeChat 미니 프로그램 개발을 배우면 IT 산업에 열풍이 불게 될 것입니다. 자랑하고 칭찬하기 WeChat 미니 프로그램에 대해 이야기하지 않으면 기분이 나빠질 수 있습니다.

이제 WeChat 애플릿 개발에 대해 배우고 이해해야 할 사항에 대해 이야기하겠습니다.

우선 가장 기본적인 것은 WeChat 개발 지식을 이해하는 것입니다. 플랫폼에 대해서는 나중에 이야기하겠습니다. Niu X는 계속 플레이할 수 없습니다. 더 이상 고민하지 말고 WeChat 개발 지식 지도부터 시작하겠습니다. PS: 미니 프로그램 개발을 배우고 싶은 친구들은 다음을 방문하세요: WeChat 미니 프로그램 실습 동영상 강좌가 온라인에 있습니다! 빨리 배우세요!

그럼 미니프로그램의 기본지식은 무엇일까요?

완전한 WeChat 미니 프로그램은 앱 인스턴스와 여러 페이지 인스턴스로 구성됩니다. 여기서 앱 인스턴스는 미니 프로그램 애플리케이션을 나타내고 여러 페이지는 미니 프로그램의 여러 페이지를 나타냅니다.

또한 WeChat 애플릿은 구성 요소를 사용자 정의하는 방법을 제공하지 않으므로 WeChat 애플릿으로 더 복잡한 애플리케이션을 개발하기가 어렵습니다.

WeChat 애플릿 자체는 매우 간단합니다. 공식 튜토리얼을 열면 직접 배우고 사용해 볼 수 있습니다. WeChat 공식 문서는 계속 업데이트되고 있으므로 최신 공식 문서를 최신 버전으로 열어 업데이트 상태를 확인하시기 바랍니다.

WeChat 미니 프로그램의 기본 지식은 크게 다음 부분으로 나뉩니다.

1. 두 개의 구성 파일 && 두 개의 핵심 기능

2. WXML 템플릿, 페이지 렌더링

3. 페이지 간 이동

4. 이벤트

페이지 파일의 경로, 창 성능, 및 네트워크 설정 시간 초과, 여러 탭 설정 등
주어진 공식 예는 다음과 같습니다.

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

는 주로 다음 구성을 포함합니다.

페이지: 페이지 경로 배열은 미니 프로그램이 로드할 모든 페이지를 나타내며, 배열의 첫 번째 항목은 미니 프로그램의 초기 페이지를 나타냅니다.
창: WeChat의 기본 기능으로 사용자 정의가 쉽지 않습니다. 미니 프로그램의 상태 표시줄, 탐색 표시줄, 제목 및 창 배경색을 설정할 수 있습니다.
6개의 속성(navigationBarBackgroundColor(HexColor), NavigationBarTextStyle(String-(black,white)), NavigationBarTitleText(String), backgroundColor(HexColor),

backgroundTextStyle)을 포함합니다. (String-(dark,light)), 활성화PullDownRefresh(Boolean)), 개발자는 자신의 필요에 따라 구성할 수 있습니다.

tabBar: WeChat의 기본 기능으로 사용자 정의가 쉽지 않습니다. 일반 탭 애플리케이션에 적용할 수 있는 탭 막대는 상단이나 하단에 배치할 수 있습니다. tabBar는 배열이며 2~5개의 탭만 지원합니다.
tabBar는 공식적으로 5가지 속성(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array))을 제공합니다.

BorderStyle은 테두리 색상을 설정하며 현재는 (흑백)만 지원합니다.

모두 다음과 같은 네 가지 속성(pagePath(String), text(String), iconPath(String), selectedIconPath(String))을 갖습니다.

networkTimeout: 미니 프로그램의 네트워크 요청에 대한 시간 초과를 구성합니다.
디버그: 디버그 모드 스위치입니다. 정식 릴리스에서는 끄는 것을 잊지 마세요.

은 미니 프로그램을 등록하는 데 사용됩니다. 미니 프로그램은 전역적으로 하나만 제공하므로 삭제할 수 있습니다. 미니 프로그램이 일정 시간 동안 백그라운드에 들어갈 때만 파괴되거나, 시스템 리소스 사용량이 너무 높을 경우에는 완전히 파괴됩니다.

는 페이지를 등록하고 페이지의 라이프사이클과 데이터를 유지하는 데 사용됩니다.

微信官方给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),下图是他们分别对应的触发条件。