[解読ウィジェット]生活ツール集合

[解読ウィジェット]生活ツール集合
分析のプログラムソース:http://www.jianshu.com/p/3d59e3ef4a7b著者:于連林520 wcf githubアドレス:https://github.com/yll2wcf/wechat-weapp-lifeTools
作者は現在ただ1つの空気の品質の検索の機能をプラスして、実は作者の自分の文章はすでに書いたのがとても詳しいです.しかし、それを自分の知識に変えるために、もう一度分析します.
最終効果図
空気品質照会ページ
既知の未解決の問題
クエリーボタンを複数回クリックすると、複数回のリクエストが開始され、複数の結果ページが開きます.
この問題は作者にフィードバックされた.
空気質量照会ページ
著者はすべてのcssスタイルをappに書いた.wxss中.作者の初志は各ページのスタイルを統一するためで、app.wxssのスタイルは他のすべてのインタフェースで直接使用することができる.しかし公式demoのやり方ではいくつかの共通のcssスタイルをappに書いただけです.wxssでは、各ページに個別のスタイル定義がある.
app.wxss

/**app.wxss**/
page {
  background-color: #fbf9fe; 
  height: 100%;
}
/**   flex-direction: column         */
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 200rpx 0rpx;
} 

 /**page         overflow       **/
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
 /**    input   **/
.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
}

/**  */
.section{
    margin-bottom: 80rpx;
}
/**    */
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}

/**button  */
.btn-area{
    padding: 0 30rpx;
}
/**button*/
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

ここのスタイルは簡単で、作者の注釈もいいです.
air_quality.wxml
空気品質照会のページairを直接見るquality.wxml

<view class="page">
    <view class="container">
        <view class="section">
            <view class="section__title">      ：{{inputValue}}view>
            <input  bindinput="bindKeyInput" placeholder="           " value="{{inputValue}}"/>
        view>
        <view class="btn-area">
        <button type="primary" loading="{{loading}}"
                disabled="{{disabled}}" bindtap="search">   
        button>
        view>
        <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange" bindcancel="modalChange">
            {{modalErrorText}}
        modal>
    view>
view>

ページは比較的簡単です.ページ構造もpage->container->section.注目すべきはbutton初期時disabledでありloadingが配置されている.ここにmodalコンポーネントのドキュメント-modalがあります.このコンポーネントをモデリングダイアログと呼ぶ.モダリティとは何ですか?それが表示されると、焦点を占め、その外の領域は操作できません.ウィジェットは2つの形式のモードダイアログボックスを提供した:ボタンを確定してキャンセルすることとボタンを確定することしかできない.
air_quality.js
モジュール化
まず外部モジュールを導入する.

const Constant = require( '../../common/constant.js' );
const util = require( '../../common/utils.js' );

モジュールとしていくつかの共通のコードを抽出して、個別のjsファイルにすることができます.モジュールはmoduleのみを通過する.exportsまたはexportsは、インタフェースを外部に露出することができます.ドキュメント→モジュール化
constant.jsには定数がいくつか保存されています

// API_KEY
const API_KEY="9dc7ab2f8993b0b215ad8c550e1f4ebe";
//       URL   
const AIR_QUALITY_URL="http://apis.baidu.com/apistore/aqiservice/aqi";

module.exports = { //      
    AIR_QUALITY_URL: AIR_QUALITY_URL,
    API_KEY:API_KEY
}

utils.jsではurlに結合されたパラメータを生成するためにcreateURL()が定義されています

/*     */
function createURL( url, obj ) {
  let props = "";
  let resultURL="";  //  
  for(let p in obj){  //  enumerable  
    if(obj[p])
    props+= "&"+p + "=" + obj[p]; //  
  }
  resultURL=url+"?"+props.substr(1);
  console.log(resultURL);
  return resultURL;  
}

module.exports = { //      
  createURL: createURL
}

イニシャルデータ

data: {  //     
    inputValue: "", //     
    loading: false, //    
    disabled: true, //      
    modalHidden: true, //modal    
    modalErrorText:"    ,     "//modal      
  },

作者の注釈ははっきりしている.
イベントの処理
入力ボックスイベント初期のクエリbuttonはdisabledであり、入力時にbuttonはクリック可能な状態に変化する.

//        
  bindKeyInput: function( e ) {
    let value = e.detail.value; //     
    //   ,       0       
    this.setData( {
      inputValue: value,
      disabled: !value.length > 0 //  button  
    });
  },

他のイベントbuttonをクリックしてloading標識を表示し、ネットワークに空気品質の照会を要求し、成功した後resultページurl:util.createURL( "./result", res.data.retData)にジャンプし、ここでurlに値を割り当てるのはrequireが導入したモジュールの方法を利用してページルーティングリンクを作成することである.

search: function( e ) {
    //    
    this.setData( {
      loading: true
    });
    let that = this;//  page   object   
    //  
    wx.request( {
      url: Constant.AIR_QUALITY_URL,
      header: {
        "Content-Type": "application/json",
        "apikey": Constant.API_KEY
      },
      data: {
        "city": this.data.inputValue
      },
      //res = {data: '           '}
      success: function( res ) {
        console.log( res.data );
        if( res.data.errNum === 0 ) { //  
          wx.navigateTo( {  //           ,        /       pages/air_quality/result    
            url:util.createURL( "./result", res.data.retData),
          });
        }else{
          that.setData( { //       page     
            modalHidden: false,
            modalErrorText:res.data.retMsg
          });
        }

      },
      //  ,  modal
      fail: function() {
        //console.log(this); //    this  Page 
        that.setData( { //       page     
          modalHidden: false,
           modalErrorText:"    ,     "
        })
      },
      //       ,loading   
      complete: function() {
        that.setData( {
          loading: false
        })
      }
    });
  },
  modalChange: function() {
    this.setData( {
      modalHidden: true
    })
  }

クエリー結果ページ

<View class="page">

    <view class="container" style="align-items: center">
        <icon class="section" type="success" size="70">icon>
        <view class="text_area">
        <text >
                : {{city}}
        text>
        <text>
                  : {{aqi}}
        text>
        <text >
                  : {{level}}
        text>
        <text>
                 : {{core}}
        text>
       <text >
                : {{time}}
        text>
        view>
    view>
View>

wxmlには特に何もありません.いくつかのデータバインドです.

Page({
  data:{
    //          ,    
    core:" "
  },
  onLoad:function(options){
    console.log("result");
    //       options           
    console.log(options);
    this.setData(options);
  }
})

ここで興味深いのはdataオブジェクトがcoreのデフォルト値しか与えていないことです.その他の値はすべてoptionsから取得する.これは実は問題がある.調べられるならまだしも、自然にフィールドがあります.調べなければ、何も表示できません.
コードの基本的な分析が完了しました.作者の文章の中でcssセレクタについての言い方はやはりとても良いです.css優先度を抜粋しました
原則一:継承より指定原則二:#id>.class>ラベル選択符原則三:具体的に強ければ強いほど原則四:ラベル#id>#id;ラベルclass > .class
CSS優先重み算出法
CSS優先度には、4つのレベル(ラベル内のセレクタ、IDセレクタ、Classセレクタ、要素セレクタ)と、各レベルの出現回数が含まれます.
この4つのレベルが出現した回数からCSSの優先度を算出する.
CSS優先度の計算ルールは、*要素ラベルで定義されたスタイル(Styleプロパティ)、1,0,0,0*各ID選択子(例えば#id)、0,1,0,0*各Class選択子(例えば.class)、各属性選択子(例えば[attribute=])、各擬似クラス(例えばhover)に0,0,1,0*各要素選択子(例えばp)、または擬似要素選択子(例えばfirstchild)などである.0,0,0,1を加算し、4つの数字をそれぞれ加算すると、CSSごとに定義された優先度の値が得られ、左から右へビット単位でサイズが比較され、数字の大きいCSSスタイルの優先度が高くなります.
例:cssファイルまたはstyleでは、次のように定義されています:1.h1 {color: red;} 0,0,0,1の要素選択子です.body h1 {color: green;} 2つの要素の選択子、結果は0,0,0,2.h2.grape {color: purple;} 1つの要素選択子、1つのClass選択子、結果は0,0,1,4である.li#answer {color: navy;} 1つの要素選択子、1つのID選択子、結果として0,1,0,1の要素のstyle属性には、h 1{color:blue;要素ラベルで定義された要素選択子の結果は1,0,0,1です.
これにより、h 1要素の色は青である.注意:1、!important宣言のスタイルの優先度は最も高く、衝突した場合に計算されます.2、優先度が同じ場合は、最後に表示されるスタイルを選択します.3、継承されたスタイルの優先度が最も低い.
現在の場所はclass pageでfont-sizeラベルの優先度がclassより高くないことが指定されているため有効ではありません
基本的には説明が終わった.作者の更新を待つ
the end.