미니 앱 마크업, 스타일 지정, 스크립팅, 업데이트

Thomas Steiner

마크업 언어

앞에서 설명한 것처럼 미니 앱은 일반 HTML이 아닌 HTML 언어로 작성됩니다. 만약 Vue.js 텍스트 보간 및 지시어를 다뤄본 적이 없다면 그 전에 XML 변환에서 비슷한 개념이 존재했습니다. (XSLT). 아래에서 WeChat의 WXML을 방문했지만 개념은 모든 미니 앱 플랫폼에서 동일하게 작동합니다. AXML, Baidu's Swan Element, ByteDance TTML (DevTools에서 Bxml이라고 부르지만) 및 Quick App의 HTML Vue.js와 마찬가지로 미니 앱 프로그래밍 개념은 model-view-viewmodel (MVVM)

데이터 결합

데이터 결합은 Vue.js 텍스트 보간 유형.

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

목록 렌더링

목록 렌더링은 Vue.js v-for 지시어와 같이 작동합니다.

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

조건부 렌더링

조건부 렌더링은 Vue.js v-if 지시어.

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

템플릿

프롬프트 설계에서 HTML 템플릿 content 클론 WXML 템플릿은 템플릿 정의에 연결되는 is 속성을 통해 선언적으로 사용할 수 있습니다.

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

스타일 지정

스타일 지정은 CSS 언어로 이루어집니다. WeChat의 이름은 WXSS. Alipay의 경우 Baidu의 간편한 결제 수단인 ACSS로 CSS와 ByteDance의 경우 방언은 TTSS. 이들의 공통점은 반응형 픽셀로 CSS를 확장한다는 것입니다. 일반 CSS를 작성할 때는 개발자는 다양한 휴대기기 화면에 맞게 모든 픽셀 단위를 사용할 수 있습니다. TTSS는 rpx 단위를 기본 레이어로 지원합니다. 미니 앱이 개발자로부터 작업을 인계받고 개발자를 대신하여 750rpx의 지정된 화면 너비 예를 들어 화면 너비가 다음과 같은 Pixel 3a 휴대전화에서 393px (기기 픽셀 비율은 2.75), 반응형 200rpx는 실제 기기에서 104px가 됩니다. Chrome DevTools로 검사했을 때 (393px / 750rpx * 200rpx ≈ 104px). Android에서도 동일한 개념은 호출됨 밀도 독립형 픽셀.

<ph type="x-smartling-placeholder">
</ph> 반응형 픽셀 패딩이 `200rpx` 로 지정된 Chrome DevTools로 뷰를 검사하면 실제로 Pixel 3a 기기에서 `104px` 인 것으로 표시됩니다. <ph type="x-smartling-placeholder">
</ph> Chrome DevTools로 Pixel 3a 기기의 실제 패딩을 검사합니다. 
/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

구성요소 (이후 참고)는 Shadow DOM을 사용하지 않으므로 페이지 도달범위에 선언된 스타일은 모든 구성요소로 통합해 보겠습니다. 일반적인 스타일시트 파일 구성은 전체 스타일, 그리고 미니 앱의 각 페이지에 특정한 페이지별 개별 스타일시트를 제공합니다. 스타일 @import 규칙으로 가져와서 @import CSS at-rule HTML에서처럼 스타일은 동적 텍스트 보간 유형을 포함하여 인라인으로 선언할 수도 있습니다( 이전).

<view style="color:{{color}};" />

스크립트 작성

미니 앱은 '안전한 하위 집합'을 지원 다양한 범용 언어 모델을 사용하는 모듈에 대한 지원을 포함하는 CommonJS 또는 RequireJS를 상기시키는 문법) eval()를 통해 JavaScript 코드를 실행할 수 없으며 new Function()입니다. 스크립팅 실행 컨텍스트가 V8 또는 기기의 JavaScriptCore 및 V8 또는 시뮬레이터에서 NW.js를 실행합니다. 일반적으로 ES6 이상의 구문으로 코딩할 수 있지만 빌드 대상이 이전 WebView 구현이 포함된 운영체제 (후면 참고) 이 슈퍼 앱 제공자에 대한 문서에 회사의 스크립팅 언어가 자바스크립트와 혼동하기 쉽습니다. 그러나 이 문장은 주로 단지 모듈이 작동하는 방식, 즉 표준 ES 모듈을 아직 다운로드하세요.

앞서 언급했듯이 미니 앱 프로그래밍의 개념은 model-view-viewmodel (MVVM) 로직 레이어와 뷰 레이어는 서로 다른 스레드에서 실행됩니다. 즉, 사용자 인터페이스는 장기 실행 작업에 의해 차단될 수 있습니다 웹 관점에서는 웹 작업자.

WeChat의 스크립트 언어를 WXS, Alipay SJS, ByteDance 역시 SJS Baidu는 언급할 때 JS라고 말합니다. 그들의 것입니다. 이러한 스크립트는 특별한 종류의 태그(예: <wxs> WeChat 반면에 Quick App은 일반 <script> 태그와 ES6를 사용합니다. JS 구문.

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

모듈은 src 속성을 통해 로드하거나 require()를 통해 가져올 수도 있습니다.

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

JavaScript 브리지 API

미니 앱을 운영 체제와 연결하는 JavaScript 브리지를 사용하면 가능합니다. OS 기능을 사용하는 것이 좋습니다 (강력한 기능에 액세스하기 참고). 그것은 도 여러 편리한 메서드를 제공합니다. 개요를 보려면 다양한 API를 확인하세요. WeChat Alipay Baidu, ByteDance, 및 빠른 앱을 참조하세요.

모든 플랫폼에서 (말 그대로 이와 같이 부름) canIUse() 메서드(이름은 웹사이트 caniuse.com에서 영감을 얻음)입니다. 대상 예를 들어 ByteDance의 tt.canIUse() API, 메서드, 매개변수, 옵션, 구성요소, 속성에 대한 지원을 확인할 수 있습니다.

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");
드림

업데이트

Mini 앱에는 표준화된 업데이트 메커니즘이 없습니다 (잠재적 표준화에 대한 논의). 모든 미니 앱 플랫폼에는 백엔드 시스템을 사용하여 미니 앱 개발자가 새 버전의 앱을 업로드할 수 있는 만드는 방법을 알아봅니다. 그러면 슈퍼 앱은 해당 백엔드 시스템을 사용하여 업데이트를 확인하고 다운로드합니다. 일부 Super 앱 백그라운드에서 완전히 업데이트 실행(미니 앱 자체가 업데이트에 영향을 미칠 수 없음) 있습니다. 다른 슈퍼 앱에서는 미니 앱 자체를 더 세부적으로 제어할 수 있습니다.

정교한 프로세스의 예로 다음 단락에서는 미니 앱을 위한 WeChat 업데이트 메커니즘을 설명합니다. 더 자세히 살펴보겠습니다 WeChat은 다음 두 가지 시나리오에서 사용 가능한 업데이트를 확인합니다.

  1. WeChat은 WeChat이 실행되는 동안 최근에 사용한 미니 앱의 업데이트를 정기적으로 확인합니다. 만약 업데이트가 발견되면 해당 업데이트가 다운로드되고 다음에 사용자가 있습니다. 미니 앱의 콜드 스타트는 사용자가 미니 앱이 현재 실행되고 있지 않을 때 발생합니다. 열어야 합니다 (WeChat에서 5분 동안 백그라운드에서 미니 앱을 강제 종료함).
  2. 또한 WeChat은 미니 앱이 콜드 스타트되었을 때 업데이트를 확인합니다. 사용자가 열지 않은 미니 앱의 경우 업데이트가 있는지 확인하고 동기식으로 다운로드됩니다. 업데이트를 다운로드하는 동안 기다려야 합니다 다운로드가 완료되면 업데이트가 적용되고 미니 앱이 열립니다. 만약 다운로드에 실패합니다. 예를 들어 네트워크 연결 불량으로 인해 미니 앱이 열립니다. 모든 업데이트가 백그라운드에서 비동기식으로 다운로드되어 다음에 사용자가 미니 앱을 콜드 스타트할 때 적용됩니다.

미니 앱은 UpdateManager API를 사용하여 이전 업데이트를 선택할 수 있습니다. 이 API는 다음과 같은 기능을 제공합니다.

  • 업데이트 확인이 완료되면 미니 앱에 알립니다. (onCheckForUpdate)
  • 업데이트가 다운로드되어 사용 가능해지면 미니 앱에 알립니다. (onUpdateReady)
  • 업데이트를 다운로드할 수 없는 경우 미니 앱에 알립니다. (onUpdateFailed)
  • 미니 앱이 사용 가능한 업데이트를 강제 설치하면 앱이 다시 시작되도록 허용합니다. (applyUpdate)

WeChat은 백엔드 시스템에서 미니 앱 개발자를 위한 추가 업데이트 맞춤설정 옵션도 제공합니다. 1. 한 가지 옵션을 사용하면 개발자가 이미 특정 설치된 미니 앱의 최소 버전을 삭제하고 대신 업데이트를 비동기식으로 강제합니다. 2. 또 다른 옵션을 사용하면 개발자가 미니 앱의 최소 필수 버전을 설정할 수 있습니다. 이렇게 하면 필요한 최소 버전보다 낮은 버전에서 비동기식으로 업데이트하는 경우 업데이트를 적용하는 것입니다. 또한 앱을 다운로드하면 미니 앱의 이전 버전을 업데이트 실패

감사의 말씀

이 기사에 대해 리뷰한 사용자 조 메들리, 케이스 바스크, 밀리카 미하즐리야, 앨런 켄트, 그리고 키스 구입니다.