WeChat 미니 프로그램용 애플리케이션 계정 개발에 대한 자세한 설명

본 글은 주로 WeChat Mini 프로그램(애플리케이션 계정) 개발 경험에 대한 관련 정보를 소개하고 있으니, 필요하신 분들은 참고하시면 됩니다.

어제 WeChat Mini 프로그램(애플리케이션 계정) 내부 테스트 소식을 전합니다. 그것은 폭발했고, 나는 몇 가지 물결을 따라가지 않을 수 없었습니다. 불행히도 내부 테스트에 적합하지 못했습니다. 오늘 아침에 원본을 사용하여 개발을 시도했습니다.

전체 경험

1. 높은 개발 효율성, 6시 40분경 IDE 크랙, 완료 7시 20분쯤 홈페이지와 네비게이션 바 레이아웃, WeChat Juejian의 레이아웃은 캡슐화되어 있어 기존 프런트엔드 개발보다 효율적입니다.

2. 개발 도구는 사용하기 어렵습니다. 많은 디렉토리 작업과 일반적인 IDE 형식 지정 코드, html 페어링 및 기타 기능은 아직 지원되지 않습니다.

3. 개발에서는 많은 일반적인 프런트엔드 Dom 및 창 작업을 제한하여 개발의 유연성과 어려움을 줄입니다.

4. 아직 내부 테스트 자격이 없습니다. 체험용 미니 프로그램은 아직 업로드가 안 되고, 로컬 체험용 코드만 다운로드할 수 있어요.

5. 이 글의 코드는 github에 있습니다

스크린샷

관련 자료

크랙된 IDE

개발 자료 모음

IDE 기술 스택: NodeWebkit + React

설치 디렉터리를 입력하세요: WeChat 웹 개발자 도구 package.nwapp이 *.nw는 NodeWebkit으로 캡슐화된 웹 애플리케이션이라고 추측할 수 있습니다.
종속성 node_modules를 자세히 살펴보면 추측이 확인됩니다.

항목은 package.json "main": "app/html/index.html"에 정의되어 있습니다.

모든 컴포넌트는 본질적으로 React 컴포넌트입니다

입구에서 React와 React DOM을 직접 참조하는 것을 볼 수 있습니다

"use strict";
function init() {
  tools.Chrome = chrome;
  var n = require("../dist/lib/react.js"),
    e = require("../dist/lib/react-dom.js"),
    i = require("../dist/common/loadInit/init.js"),
    o = require("../dist/components/ContainController.js"),
    t = require("../dist/common/proxy/startProxy.js"),
    r = require("../dist/actions/windowActions.js"),
    s = require("../dist/actions/webviewActions.js"),
    d = require("../dist/stroes/webviewStores.js"),
    u = require("../dist/common/log/log.js"), c = require("../dist/common/shortCut/shortCut.js"), l = global.appConfig.isDev;
    //...
}

컴포넌트 Dropdown의 정의를 살펴보세요. 이것이 React가 ES5에서 컴포넌트를 생성하는 익숙한 방식이 아닌가요?

"use strict";
var React = require("../../lib/react.js"), Dropdown = React.createClass({
  displayName: "Dropdown", render: function () {
    return React.createElement("p", {className: "dropdown"}, React.createElement("p", {className: "dropdown-item"}, React.createElement("img", {
      src: "https://mmrb.github.io/avatar/jf.jpg",
      alt: "",
      className: "dropdown-item-icon"
    }), React.createElement("p", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦")), React.createElement("p", {className: "dropdown-item-extra"}, React.createElement("img", {
      src: "https://mmrb.github.io/avatar/jf.jpg",
      alt: "",
      className: "dropdown-item-extra-icon"
    }))), React.createElement("p", {className: "dropdown-item dropdown-item-active"}, React.createElement("img", {
      src: "https://mmrb.github.io/avatar/jf.jpg",
      alt: "",
      className: "dropdown-item-icon"
    }), React.createElement("p", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦公众号名称啦公众号名称啦"))), React.createElement("p", {className: "dropdown-item"}, React.createElement("img", {
      src: "https://mmrb.github.io/avatar/jf.jpg",
      alt: "",
      className: "dropdown-item-icon"
    }), React.createElement("p", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦"))), React.createElement("p", {className: "dropdown-item"}, React.createElement("img", {
      src: "https://mmrb.github.io/avatar/jf.jpg",
      alt: "",
      className: "dropdown-item-icon"
    }), React.createElement("p", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦"))))
  }
});
module.exports = Dropdown;

WeChat은 미니 프로그램의 패키지 크기를 제한합니다

동시에 WeChat은 미니 프로그램 패키지의 크기를 755kb로 제한합니다. 캐시 및 로컬 파일에도 영향을 미칩니다. 이는 쉽게 수십 메가바이트에서 수백 메가바이트에 도달할 수 있는 기본 응용 프로그램의 크기와 비교하면 확실히 밝은 부분입니다. 이는 인터넷에서 많은 사람들이 말하는 뺨을 때리는 것입니다. WeChat 애플릿을 설치하면 휴대폰 저장 공간도 차지합니다.

요약

일반적으로 프론트엔드, 프론트엔드 치료에 있어서는 확실히 좋은 소식이네요 단기적으로는 올라갈 수도 있지만 소규모 프로그램 개발의 문턱은 낮습니다(프론트엔드보다 낮음). 일부 개발자는 급여를 위해 프로그래밍하고 있으므로 다른 관련 기술 직위와 동일하게 유지됩니다. 장기적으로. 그러니 젊은이여, 너무 흥분하지 말고 기본적인 지식도 내려놓으십시오.
위는 WeChat 미니 프로그램에 대한 정보 모음입니다. 앞으로도 관련 정보를 계속 추가하겠습니다.

위 내용은 WeChat 미니 프로그램용 애플리케이션 계정 개발에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!