WeChatウィジェット-入門編

転載は出典を明記してください.http://blog.csdn.net/iamzgx/article/details/72615506 本文は「iGoachのブログ」から
前言
2017年1月9日、微信小プログラムが発表された.これは、FaceBookのRNと、アリのWeexと、Tencentの小さなプログラムの3台の馬車が2017年に走行したことを示しています.今日は、まず3台の馬車のうちの1つの小さなプログラムについてお話しします.
#開発環境の構築
1.微信開発者となり、微信公衆プラットフォームにアカウントを登録し、微信の個人または企業開発者となる
2.開発ツールをダウンロードしてダウンロードをクリックし、バカにインストールすればいい
3.インストールNodeJs公式サイトはNodeJsをダウンロードして、それからバカ式のインストールができて、インストールができたら、NodeJSは自動的にPCの環境変数Pathの中にインストールしたNodeJSのルートディレクトリを追加して、最後にDOCはnodeコマンドを実行してインストールができているかどうかを検証して、インストールができたら以下の図に従います.
HelloWorldの作成
微信Web開発ツールを開くと、
企業開発者であれば、直接AppIDを記入すればいいです.もし私たちが無AppIDをクリックしなければ、私たちの前にNodeJSがインストールされていなければ、ここには無AppIDが表示されません.だから、私たちは正しくNodeJSをインストールしなければなりません.次はプロジェクト名とプロジェクト作業ディレクトリを記入すればいいです.プロジェクトの追加をクリックすると、最初のプロジェクトが作成されます.以下の図
ディレクトリ構造および構成
作成後、ディレクトリ構造は次の図のようになります.
全体的に見ると、ウィジェットはMVCモードに従い、ウィジェットは階層Viewと論理層AppServiceの2層のフレームワークに分けられ、ビュー層と論理層の間でデータ伝送とイベントシステムを提供する.

app.js,主にいくつかのプログラムのグローバル変数、属性または方法、および実行プログラムのいくつかのライフサイクルを配置します.例えば、onLaunch(),onShow(),onHide(),onLaunch().プログラムが起動するとonShow()メソッドが実行され、ページが表示されるとonHide()メソッドが実行され、インタフェースが非表示またはバックグラウンドに変換されるとapp.jsonメソッドが実行される.

pagesすべてのページのパスをwindowオブジェクトの中にwindowのスタイルを配置し、tabBarの下にtabのスタイルを設定し、networkTimeOutオブジェクトの中にいくつかのグローバルタイムアウト変数を配置し、debug賦値によってデバッグモードを開くかどうか.

app.wxssはcssファイルに相当し、グローバルスタイルであり、すべてのページで呼び出すことができる.

index.js最初のページの論理層は、いくつかのイベント処理関数を含み、ページのロードが完了すると実行されるonLoad()方法もある.

index.jsonは、いくつかのウィンドウnavigationBarのいくつかの属性をカバーすることができる.

index.wxmlページのビューレイアウトファイルは、Androidのxmlレイアウトに相当します.中のviewはdivに相当し、中のbindtap属性はクリックイベントを指し、対応するクリックイベントはindex.jsで処理される.

index.wxssトップページの一部のスタイルは、index.wxmlのルートノード属性で使用されます.

ページを作成するときは、xxx.jsおよびxxx.wxmlが必須であり、他のファイルは必須ではありません.
レスポンスのデータバインド
上記で作成したHelloWorldコードに基づいて、ボタンを追加し、ボタンをクリックしてdataオブジェクトの属性motto属性値を変更し、簡単な応答データバインドレイアウト効果を実現する.まず、トップページのビューファイルindex.wxmlにbuttonコンポーネントを介してボタンを追加します.コードは次のとおりです.

...
  <view class="usermotto">
    <text class="user-motto">{{motto}}text>
    <button bindtap="bindMottoTap" class="userMottoBtn">  button>
  view>
view>

index.wxssに少しスタイルを追加

/**index.wxss**/
...
.usermotto {
  margin-top: 200px;
  text-align: center;
}
.userMottoBtn{
  width: 200px;
  height: 50px;
  margin-top: 10px;
}

次にindex.jsにクリックイベントを追加します

//index.js
...
  bindMottoTap: function() {
    this.setData({
      motto:"Hello    "
    })
  },
  ...
})

そしてコンパイル後、クリックすると次の効果が得られます.
モジュール化
上記の項目のlogsページから、コード共通部分をうまく処理し、コードの多重性を向上させる簡単なモジュール化コード使用が見られます.

//logs.js
var util = require('../../utils/util.js')

以上のコードから分かるように、モジュール化はrequireというキーワードによって使用され、その後、相対パスパラメータが入力され、モジュール化コードのオブジェクトが取得され、取得されたこのオブジェクトによって関連する方法と属性が呼び出される.例えばutil.jsのformatNumber()メソッドを呼び出すと、log.jsで直接呼び出すことができます.

util.formatTime(new Date(log))

ここで,util.jsメソッドは任意のページで使用でき,部分コードのモジュール化を実現できる.
簡単なログインページを作成Pagesから新しいページloginを作成します.構造は下図のようです.
1.login.json修正下naigationBarのタイトル

{
  "navigationBarTitleText": "  "
}

2.login.wxmlでビュースタイルを作成する

<view class="container">
  <view class="section">
    <input id="username" type="text" placeholder="      " maxlength="10" bindinput="bindUserName" focus="true"/>
  view>
  <view class="section">
    <input id="password" type="password" placeholder="     " bindinput="bindPassWord" focus="false"/>
  view>
  <button type="button" class="btn" bindtap="loginBtn">  button>
view>

3.login.wxssにcssスタイルを追加

/* login.wxss */
.section{
  height: 25px;
  width: 50%;
  background-color: #F2F2F2;
  margin: 10px;
  padding: 10px;
  text-align: left
}
.btn{
  width: 25%;
  height: 45px;
  margin: 10px;
  text-align: center;
}

4.応答のイベントをlogin.jsで処理

// login.js
Page({
  data: {
    username:'',
    password:''
  },
  bindUserName: function(e) {
    this.setData({
      username:e.detail.value
    });
  },
  bindPassWord: function(e) {
    this.setData({
      password:e.detail.value
    });
  },
  loginBtn: function() {
    if(this.data.username=="goach"&&this.data.password=="123456"){
      wx.navigateTo({
        url: '../index/index',
      })
    }else{
      wx.showModal({
        title: "         ",
        showCancel:false,
        duration:2000
      });
    }
  },
})

4.最后にapp.jsonのpages第1行配置loginページ、loginページをトップページとする

{
  "pages":[
    "pages/login/login",
  ...
  ],
...
}

上記のコードでは、inputコンポーネントによって2つの入力ボックスが実装され、2つの入力ボックスの入力値を取得することでユーザー名とパスワードが正しいかどうかを簡単に検証し、正しい場合はbuttonでwx.navigateTo()ページにジャンプし、正しくない場合はindexでプロンプトボックスが表示されます.最後に表示される効果は次のとおりです.
トップページTab化を実現
多くの小さいプログラムの底部はすべてwx.showModelの効果があって、もしスタイルは比较的に简単ならば、直接小さいプログラムで私达の提供するtabを使ってすぐに、このような効果を実现するのはtabBarの中でtabBar`のコードを追加するだけです

{
  ...
  "tabBar": {
    "color": "#000000",
    "selectedColor": "red",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "  ",
      "iconPath":"pages/images/b_index_press_night.png",
      "selectedIconPath":"pages/images/b_index_press.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "  ",
      "iconPath": "pages/images/b_log_press_night.png",
      "selectedIconPath": "pages/images/b_log_press.png"
    }],
    "position": 0
  }
}

ここで注意すべき点は、現在のページにapp.jsonがある場合、1つのページから現在のページにジャンプするにはtabを使用してジャンプすることはできません.wx.navigateTo()を使用してジャンプする必要があります.例えば、上のwx.switchTab()ページからloginページにジャンプすると、世代コードを変更する必要があります.

  wx.switchTab({
        url: '../index/index',
      })

最後に実現した効果は以下の通りである.