WeChatミニプログラムのアプリケーションアカウント開発の詳細な説明

この記事は主にWeChatミニプログラム（アプリケーションアカウント）の開発経験に関する関連情報を紹介していますので、必要な友人は参考にしてください

昨日、WeChatミニプログラム（アプリケーションアカウント）の内部テストのニュースが全体の技術を爆発させました。コミュニティ. 仕方なくいくつか波に乗りましたが、残念ながら内部テストの対象にはならなかったので、今朝オリジナルのプロジェクトリソースで開発してみたのでその感想をまとめました。

全体的な経験

1. 開発 6:40頃にIDEをクラックし、7:20頃にWeChatでJuejianのレイアウトをカプセル化しました。従来のフロントエンド開発よりも効率的です。

2. フロントエンドはすぐに始めることができます: 熟練したフロントエンドであれば、ドキュメントを読んで公式のサンプルを追加するのに 1 時間しかかからない場合があります。

3. 開発ツールの多くは使いにくく、一般的な IDE フォーマット コード、HTML ペアリング、その他の機能はまだサポートされていません。

4. 開発では、フロントエンドでの多くの一般的な Dom 操作とウィンドウ操作が制限され、開発がより柔軟かつ困難になります。

5. 私は内部テストの資格がありません。まだミニ プログラムのエクスペリエンスをアップロードできません。ローカル エクスペリエンスのコードをダウンロードすることしかできません。

この記事のコードはgithubにあります

スクリーンショット

関連リソース

クラックされたIDE

開発リソースのコレクション

IDEテクノロジースタック:キット + React

入力されたインストール ディレクトリ: WeChat Web 開発者ツール package.nwapp
この *.nw は、NodeWebkit によってカプセル化された Web アプリケーションであると推測できます。
依存関係の 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は、ネイティブアプリケーションと比較して、キャッシュとローカルファイルも制御する必要があります。サイズの点では、WeChat アプレットをインストールすると携帯電話のストレージも占有されるというインターネット上の多くの人々にとって、これは間違いなく明るい話題であり、一撃です。

概要

一般的に言えば、フロントエンドにとっては間違いなく朗報です。フロントエンドの給与は短期的には増加する可能性がありますが、小規模なプログラム開発の敷居は低くなります。フロントエンド） 開発者がいる 人材プログラミングは開発者の流れにより、長期的には他の関連技術職と同じであり続けるでしょう。ですから、若者よ、興奮するのではなく、基本的な知識も身につけてください。

上記はWeChatミニプログラムに関する情報をまとめたものです。今後も関連情報を追加していきますので、このサイトをよろしくお願いします。

以上がWeChatミニプログラムのアプリケーションアカウント開発の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。