WeChat 개발시 뷰 레이어(xx.xml)와 로직 레이어(xx.js)에 대한 자세한 설명

이 글은 위챗 애플릿의 뷰 레이어(xx.xml)와 로직 레이어(xx.js)에 대한 자세한 소개를 중심으로 관련 내용을 소개하고 있습니다. 필요한 친구들이 참고할 수 있습니다.

위챗 애플릿이 이해할 수 있는 클라우드 OS의 개념에서는 WeChat 생태계 자체가 OS입니다. 또한 WeChat 공개 플랫폼과 WeChat 개발 플랫폼 자체는 이미 매우 성숙한 구조로 되어 있어 앱의 기능과 완벽하게 일치할 수 있으며 동시에 최고의 상호 작용 경험을 달성할 수 있으며 앱을 대체할 수 있는 잠재력도 있습니다. Apple App Store 모델의 의의는 타사 소프트웨어 제공업체에 편리하고 효율적인 소프트웨어 판매 플랫폼을 제공하는 것입니다. 사용자가 앱을 구매하기 위해 지불하는 수수료는 Apple과 앱 개발자 간에 3:7로 나누어집니다. WeChat 미니 프로그램 몰도 유사한 커미션 모델을 채택한다면 8억 명이 넘는 사용자는 매우 큰 무형 자산이 될 것이며 게임, 멤버십, 광고에 이어 Tencent의 또 다른 금원이 될 것입니다.

WeChat 미니 프로그램을 통해 사람들은 앱을 다운로드하거나 설치하지 않고도 사용할 수 있습니다. 사용자는 WeChat에서 QR 코드를 스캔하여 프로그램을 열 수 있습니다. 위챗 애플릿은 안드로이드, iOS 등 다양한 시스템에 적용할 수 있고, 그 자체가 웹사이트 페이지와 유사하기 때문에 다양한 플랫폼에서 공유할 수도 있습니다.

미니 프로그램 뷰 레이어(xx.xml)와 로직 레이어(xx.js)

전체 시스템은 두 부분으로 구성된 뷰 레이어(View)와 로직 레이어(App Service)

프레임워크는 매우 간단하게 데이터와 뷰를 동기화할 수 있습니다. 데이터를 수정할 때 논리 계층의 데이터만 수정하면 되며 그에 따라 뷰 계층도 업데이트됩니다.

이 간단한 예를 보세요:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. 개발자는 프레임워크를 통해 논리 계층 데이터의 이름을 뷰 계층의 이름에 바인딩합니다. 페이지가 열리면 Hello WeChat이 표시됩니다!

2. 버튼을 클릭하면 뷰 레이어에서 ChangeName 이벤트를 로직 레이어로 보내고 로직 레이어에서 해당 이벤트를 찾습니다. 처리 기능

3. 로직 레이어에서 setData 작업을 수행하고 이름을 WeChat에서 MINA로 변경했습니다. 데이터가 뷰 레이어에 바인딩되었기 때문에 뷰 레이어는 자동으로 Hello MINA로 변경됩니다. !.

뷰 레이어는 xx.xml입니다

로직 레이어는 xx.js입니다

읽기 먼저 논리 계층의 초기 데이터를 보고 보기 계층을 채웁니다. 보기 계층은 논리 계층의 이벤트를 트리거하고 논리 계층은 보기 계층의 콘텐츠를 반환하고 변경합니다.

로직 레이어(App Service)

애플릿 개발 프레임워크의 로직 레이어는 JavaScript로 작성됩니다.

로직 레이어는 데이터를 처리하여 뷰 레이어로 보내는 동시에 뷰 레이어로부터 이벤트 피드백을 받습니다. JavaScript를 기반으로 작은 프로그램 개발을 용이하게 하기 위해 몇 가지 수정을 했습니다.

1. 프로그램 및 페이지를 등록하려면 앱 및 페이지 방법을 추가하세요.

2. 스캔, 결제, 기타 WeChat 관련 기능 등 풍부한 API를 제공합니다.

3. 각 페이지에는 독립적인 범위가 있으며 모듈식 기능을 제공합니다.

4. 프레임워크가 브라우저에서 실행되지 않기 때문에 문서, 윈도우 등 JavaScript의 일부 기능을 웹에서 사용할 수 없습니다.

5. 개발자가 작성한 모든 코드는 결국 자바스크립트로 패키징되어 미니 프로그램이 시작될 때 미니 프로그램이 소멸될 때까지 실행됩니다. ServiceWorker와 유사하게 논리 계층을 App Service라고도 합니다.
   

초기화 데이터

초기화 데이터는 페이지의 첫 번째 렌더링으로 사용됩니다. 데이터는 JSON 형식으로 논리 레이어에서 렌더링 레이어로 전송되므로 데이터는 JSON으로 변환할 수 있는 형식(문자열, 숫자, 부울 값, 개체, 배열)이어야 합니다.

렌더링 레이어는 WXML을 통해 데이터를 바인딩할 수 있습니다.

샘플 코드:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})

Page.prototype.setData()

setData 함수를 사용하여 설정합니다. data this.data의 해당 값을 변경하면서 로직 레이어에서 뷰 레이어로 전송됩니다.

참고:

1. this.data를 직접 수정하는 것은 유효하지 않으며 페이지의 상태를 변경할 수 없으며 이로 인해 데이터 불일치가 발생합니다. .
2. 한 번에 설정하는 데이터는 1024kB를 초과할 수 없습니다.

setData() 매개변수 형식

Accept key, value 형식의 개체는 this.data의 키에 해당하는 값을 value로 변경하는 것을 나타냅니다.

키는 array[2].message, a.b.c.d와 같은 데이터 경로 형태로 제공되므로 매우 유연할 수 있으며 this.data에 미리 정의할 필요가 없습니다.

샘플 코드:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

View Layer

프레임워크의 뷰 레이어는 WXML과 WXSS 디스플레이용 구성 요소입니다.

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

1. 事件是视图层到逻辑层的通讯方式。

2. 事件可以将用户的行为反馈到逻辑层进行处理。

3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

4. 事件对象可以携带额外信息，如id, dataset, touches。
   

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

1. 组件是视图层的基本组成单元。

2. 组件自带一些功能与微信风格的样式。

3. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

<tagname property="value">
 Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符-连接

【相关推荐】

1. 微信小程序之页面传值详解

2. 微信小程序开发样式常见的问题整理

3. 利用组件开发微信小程序日历的详细方法

4. 小程序开发之利用co处理异步流程的实例教程

위 내용은 WeChat 개발시 뷰 레이어(xx.xml)와 로직 레이어(xx.js)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!