WeChat ミニプログラムアプリケーションのアカウント開発経験-ミニプログラム開発-php.cn

WeChat ミニプログラムアプリケーションのアカウント開発経験

高洛峰

リリース： 2017-02-22 14:26:34

オリジナル

1868 人が閲覧しました

昨日、WeChat ミニプログラム (アプリケーションアカウント) の内部テストのニュースがテクノロジーコミュニティ全体に広まりました。残念ながら、私は内部テストの対象にはなりませんでした。クラック版がリリースされたので、今朝プロジェクトリソースを開発してみてその経験をまとめてみました

開発効率は高かったです。 6:40 頃にホームページとナビゲーションバーのレイアウトが完了し、7:20 頃には WeChat は Juejian のレイアウトをカプセル化しており、従来のフロントエンド開発よりも効率的です。

フロントエンドはすぐに始めることができます: 熟練したフロントエンドであれば、ドキュメントを読んで公式のサンプルを追加するのに 1 時間しかかからない場合があります。
開発ツールの多くは使いにくく、一般的な IDE フォーマットコード、HTML ペアリング、その他の機能はまだサポートされていません。
開発では、フロントエンドでの多くの一般的な Dom 操作とウィンドウ操作が制限され、開発がより柔軟かつ困難になります。
私は内部テストの資格がありません。まだミニプログラムのエクスペリエンスをアップロードできません。ローカルエクスペリエンスのコードをダウンロードすることしかできません。
上のスクリーンショット

WeChat ミニプログラムアプリケーションのアカウント開発経験

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

WeChat ミニプログラムアプリケーションのアカウント開発経験

入力されたインストールディレクトリ: WeChat Web開発者ツールpackage.nwappこの *.nw で十分だと推測しましたこれは NodeWebkit によってカプセル化された Web アプリケーションです依存関係を確認すると、その推測が確認されました。
このエントリは 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;
    //...
}

ログイン後にコピー

WeChat ミニプログラムアプリケーションのアカウント開発経験

コンポーネント Dropdown の定義を見てください、これではありませんかES5 でコンポーネントを作成する React の方法はご存知ですか?

"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ミニプログラムに関する情報をまとめたものです。今後も関連情報を追加していきますので、このサイトをよろしくお願いします。

WeChat アプレットアプリケーションアカウント開発経験に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。