微信小プログラムの開発:微信小プログラムを通じてフロントエンドを見る

前言

2016年9月22日未明、微信公式は「微信公開課」の公衆番号を通じて、微信ウィジェット(微信アプリ番号)に関する内測通知を発表した.モーメンツ全体が一瞬にして鍋を爆破したように、様々な憶測や紹介文が一夜にして誕生した.実際に内測の招待を受けた公衆番号は200個しかないという.
内部測定の定員は非常に少ないが、中国の広範な開発者の解読と分かち合いの精神に依存し、ネット上ですぐに開発ツールの解読バージョンとAPIドキュメントが現れた.しかし、微信の妥協か、9月24日に微信が解読を必要とせずに使用できる微信ウィジェット開発者ツールとドキュメントを公式に発表したことは、解読に苦労した開発者にとって瞬時に全体的によくないはずだ.
以下は、WeChatが提供する開発ツールとドキュメントアドレスです.https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418
極客精神を持つ先端開発者として、私もすぐにこのブームの中で水に入ってみて、小さなプログラム開発ツールをダウンロードしました.次はログイン後のインタフェースです.
ログイン後のインタフェース
このIDEツールは、構造全体のレイアウトから3つの部分に分けることができます.まず、左側がナビゲーション操作領域、中央がディレクトリまたは展示領域、右側がデバッグ領域(Chromeのデバッグツールに似ています).次に、先端の角度でコードの角度とマクロの角度から自分の微信ウィジェットに対する見方を紹介します.

コード角度

開発ドキュメント全体を見渡すと、微信ウィジェットのフロントエンド技術は主に「フレームワーク」、「コンポーネント」、「APIインタフェース」に分けられる.

1.フレーム

微信は、小さなプログラムを開発するための独自のフロントエンドフレームワークを提供しており、現在主流のフロントエンドフレームワークと比較して、類似の場所もあれば、特殊な場所もある.
特殊な点は,微信ウィジェット開発ツール内でしか使用できず,比較的厳格な使用と配置制限を行い,開発者はその規定の用法に従って使用しなければならないことである.一部の外部のフレームワークとプラグインはウィジェットでは使用できませんが、フレームワークはブラウザで実行されていないため、JavaScriptはdocument、windowなどのwebでいくつかの能力が使用できません.
似たような点は,他のフレームワークと同様の「論理層」や「ビュー層」を含み,データ駆動を主とし,DOM要素などを操作しないことである.次に、コードを例に挙げて説明します.
(1)データバインド

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

// page.js
Page({
    data: {
      message: 'Hello MINA!'
    }
})

Page()メソッドは、ページを登録するために使用されます.ページの初期データ、ライフサイクル関数、イベント処理関数などを指定するOBJECTパラメータを受け入れます.これは一見、現在流行しているVueフレームワークの文法とよく似ていますが、Vueコードは以下の通りです.

<view> {{message}} </view>

// page.js
new Vue({
  data: {
    message: 'Hello MINA!'
  }
})

すべて括弧補間文法で、データの初期化と双方向バインドのフォーマットさえ同じです.いいでしょう.偶然だと思ってください.
ここで注意しなければならないのは、微信ウィジェットがWXML接尾辞のファイルタイプを提供しているが、実はXMLのようなラベル言語ファイルである.
(2)リストレンダリング

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

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

このようなリストレンダリング文法は、AngularやVueを学んだ学生が把握しやすいと信じられています.非常に似ています.もちろん、条件レンダリングなどもあります.
(3)イベントバインド

<view bindtap="add"> {{count}} </view>

Page({
    data: {
      count: 1
    },
    add: function(e) {
        this.setData({
            data: this.data.count + 1
        })
    }
})

Reactを学んだことがある場合は、状態の値を変更するためのsetStateの方法があります.ここのsetDateも同じで、バインドされたaddメソッドによってビュー内のcountの値を変更します.
(4)スタイルのインポート

/** common.wxss **/
.small-p { padding:5px; }

/** app.wxss **/
@import "common.wxss";

.middle-p { padding:15px; }

ここで、ウィジェットは、CSSファイルに比べてSASSやLESSのようなプリコンパイル言語のスタイルインポート機能を提供するとともに、rpxおよびremの単位サイズ機能も提供するWXMLのコンポーネントスタイルを記述するための新しいファイル接尾辞タイプWXSSを提供する.
(5)モジュール化

// common.js
function sayHello(name) {
    console.log('Hello ' + name + '!')
}
module.exports = {
    sayHello: sayHello
}

var common = require('common.js')
Page({
    helloMINA: function() {
      common.sayHello('MINA')
    }
})

微信小プログラムはJSモジュール化のメカニズムを受け継いで、Requireを熟知している.jsまたはSea.jsの同級生はよく知っているはずです.ここはmoduleを通じています.exportsはオブジェクトを露出し、requireによってオブジェクトを取得します.

2.コンポーネント

ウィジェットのコンポーネントもフレームワークの一部であり、主にUIのプレゼンテーションを担当し、いくつかの機能と微信スタイルのスタイルも付属しています.基本的に、フォームコンポーネント、ナビゲーションコンポーネント、メディアコンポーネントなど、モバイル側でよく使用されるコンポーネントが含まれています.次は、ウィジェットが提供する8つのコンポーネントです.
8種類のコンポーネント
ウィジェットのコンポーネントの使用は複雑ではありません.ドキュメントの使用例に従って簡単にできます.詳細なアドレス:https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1474644085698

3.APIインタフェース

微信公衆番号の開発に比べて、微信ウィジェットは開発者により多くのAPIインターフェースを提供し、重力誘導と羅盤データの傍受、WebSocket接続、支払い機能などの微信提供能力を容易に調整することができる.次に、ネットワーク要求を開始するAPIを例に挙げる.

wx.request({
    url: 'test.php',
    data: {
        name: 'luozh' ,
        age: 18
    },
    header: {
        'Content-Type': 'application/json'
    },
    success: function(res) {
        console.log("    ")
    },
    fail: function() {
        console.log("    ")
    }
})

wx.requestが開始したのはhttpsリクエストです.1つの微信ウィジェットで、5つのネットワークリクエストしか接続できません.APIインタフェースの詳細については、公式ドキュメントを参照してください.
以上は微信小プログラムのフロントエンドコード部分についての簡単な紹介であり、フロントエンドフレームワークの使用経験があると信じている学生は比較的簡単であると信じています.以下、マクロの角度から説明します.個人的には、微信小プログラムがフロントエンド分野に影響を与えると思います.

マクロアングル

微信ウィジェットが出てくると、フロントエンド界への影響がネット上に次々と出てきて、フロントエンドがまた火をつける、フロントエンドの第二春が来た、JavascriptとHTML 5の新時代が来たなどとコメントする文章やコメントが増えています.
もちろん、微信ウィジェットの出現は確かに先端に一定の波乱をもたらす効果があるが、いかなるものの誕生も利害が共存し、微信ウィジェットも例外ではない.以下は私の個人的な見方を簡単に述べる.

1.利

(1)開発互換性の向上:微信ウィジェットはアプリを再定義し、android、iphone、windows phoneでアプリケーションを実行できるようにし、フロントエンドにとって「一度にコンパイルし、あちこちで実行する」という理念を実現したと言える.
(2)先端技術の発展を推進する:微信ウィジェットはその簡単な開発環境で、JavascriptとHTML 5を主とする先端技術を巨大な微信社交群の体内で伝播させ、ますます多くの人が先端に接触し始め、先端符号化と設計に参加し、先端技術に力を貢献する.
(3)その他...

2.弊害

(1)フロントエンドの仕事量と学習コストを増加する:もともと1人のフロントエンドのエンジニアが担当するプラットフォームはとても広くて、PC端、モバイル端、APP応用などを含んで、微信の小さいプログラムの出現はフロントエンドが微信の応用の開発に関わることを要求して、ある程度学習と仕事のコストを増加しました.同時に企業もこの方面の開発と投入コストを増加します.
(2)先端競争がますます明らかになっている:微信ウィジェットの誕生は、バックグラウンドやアプリ開発などの他の分野の人々を先端開発に転向させる可能性があるが、もともと論理的思考や感性的思考を備えている人は、先端の端にいる初心者を排除し、低レベルの先端開発者の大部分が失業したり、仕事が見つからない危険に直面している可能性がある.
(3)その他...
ここでは、いくつかの微信ウィジェットがフロントエンドに与える影響を紹介し、より多くの人が補充することができます.

まとめ

本文はコードの角度とマクロの角度から簡単に微信の小さいプログラムの先端の分野のいくつかの内容と影響を述べて、あれらの微信の小さいプログラムを理解しない開発者がすぐにこの新しい技術の分野を入門して認識することを助けることができることを望みます.
小さなプログラムがフロントエンドに与える影響については、逆に次のように考えることができます.
技術の発展は1つのプラットフォームに基づいて変化するのではなく、技術を通じて1つのプラットフォームの変化を駆動し、先端の発展こそ「小さなプログラム」のこのような可能性を生んだのだ...
文／劳卜(简书作者)
テキストリンク:http://www.jianshu.com/p/852e6ffb6569
著作権は作者の所有で、転載は作者に連絡して授権を得て、そして“簡書の作者”を表示してください.