小型フロントエンドのアプリケーション開発 - 能力へのエントリ（初心者論文）

タイトル：最近終了したプロジェクト、コードのレビューは、あなたが0-1から詳細に小さなプログラムの開発経験、自分のプロジェクトを記録する過程を書きたいしながら、

DESC：0-1からアプレット、プロジェクトを完了するために白から、あなたがする必要があります。

STEP1：準備の基本

　　ナレッジベース：HTML5、CSS3、JS（ES6）、コンポーネントベース思考

　　wepyチケット： https://tencent.github.io/wepy/document.html#/

　　Vueのチケット： https://cn.vuejs.org/

　　js-ルアンYifengチケット： http://javascript.ruanyifeng.com/

　　JS-git-遼雪峰航空券： https://www.liaoxuefeng.com/

　　アプレットチケット： https://developers.weixin.qq.com/doc/

　　あまりにも多くのフロントエンドフレームワーク、および各企業へのより多くのテクノロジー・スタックを使用して、マスターと同じ可能性はありませんが、恐れることはありません、同じまま、またHTML5、CSS3、JS、部品の四つの部分を離れて行きますその理由は、フレームワークの多くは、各企業のビジネスニーズ理由は矛盾しています。VUE、反応して、今度はメインスピーカVUE、マイクロチャネル小さなアプリケーション開発者は、公式ネイティブwxml、wxss、WXS、ああ、およびHTMLを使用することができ、小さなフレーム、これらの3つのフレームワークに応じて導出される角度三つの主要なフレームワーク、CSSそれは（面白いヘッドが付属しています）の、JS、比較のVueである限り、完全にVueの文言を継承wepy、あなたはまた、Vueのは、思ったフレームワークwepyを使用することができますとしておなじみの名前を変更し、すぐに始めるwepy。

STEP2：櫛プロジェクト

　　プロジェクトのフロントエンド、携帯側、主に3つの側面が含まれます。UI、フロントエンドロジック、三つの部分、UI設計プロセスのデータは、製品マネージャを使用すると、バックエンドのデータに戻ります、アートスタイルは、あなたが必要とする材料を与え、あなたのドラフトを与えます。下図のように私達はちょうどページの表示、DOMを変更するには、DOMツリーを操作するためのjQueryの時代の前に、データを使用して、Dachuページに必要です：

端的に言えば、それは、HTMLタグのDOMツリーの関係です！！HTMLを書くとき、常にそれは、ラベルの間にネスト、<HTML>最も外側で、ページ内の他のタグは、<HTML>右、中に包まれていますか？そこの関係を包み、また、専門用語に置き換えられ、これらの2つの関係に基づいて、それは、父と息子、兄弟関係、ツリー構造を記述する側の関係によって側ではDOMツリー構造で、内部のDOMツリー、我々はできる、DOMツリーと呼ばれますこのラベルを見つけるために、クラスのクラス名やIDのタグ（HTML要素）、

/ ** 
*タグを取得します
* / 
聞かせてDIV1 =のdocument.getElementById（ 'idName'）     // ネイティブ 
ましょうDIV2 = $（ ' idName'）// jQueryの
$選択単純な原理ソースの関数$（ID）{// JQ
  （のdocument.getElementById返す 'ID'を）      
} 
//ターゲットに取得した後、ターゲットは操作を行うことができ、対象のテキスト、背景色の変更を含むがこれらに限定されない、サブ要素を挿入し、テンプレートを挿入し、非表示、表示、クリックイベントや他のイベントを追加し、というように、

それは明確な、非常に明確な関係であるため、その理由は、ツリー構造によって記述されています。しかし、またラベルで、親要素の彼の子要素、兄弟、父親の要素を見つけるために、その後、それらの上で動作、例えば：

聞かせて GETFIRSTCHILD =のdocument.getElementById（ "テスト"）の子供たち[0。];
pは=のdocument.getElementById（ "テスト"しましょう）.parentNode。
brother5 =のdocument.getElementById（ "テスト"）しましょうnextSibling。

これらは、ネイティブのDOMツリーとJQの動作モードは、このアプローチは、一般的に今使用されていないですが、知っておく必要があり、現在一般的に使用されるフレームワーク、ほとんどすべてのコンポーネントの開発、データ駆動型、DOMツリーを操作しません！！！！！

データ駆動型モデルを入力してください::

その後、プロジェクト、製品説明会の開発ニーズは、三者の開発を開発するために、前端と後端と芸術家に送られたPR（デザイン要件文書）で、それが前にない開発とバックエンドのデータインタフェースにする前に、シミュレーションを使用する必要が、一般的なプロジェクトは何が含まれますか？イベント、ページジャンプの内容物を充填。この3回で！！！

イベント：wepyとヴュー、V-上の速記@tapネイティブとのonclick = eventNameの（と= 'eventNameの' JQ）との結合事象「に類似

コンテンツフィリング：データへの復帰、バックエンド・ページを使用するためにそれらを入れて、

jsのコードは次のよう：

 // 情報連絡ゲット
    {getCardInfo（USER_IDを）
        const = これを
        circleApi.getCardInfo（{
            データ：{
                user_id,
                card_is_mine: -1            //默认-1 ====》圈内
            },
            getToken: true
        }).then( res => {
            log('获取我的名片信息', res)
            let data = res.data
            that.cardInfo = data 
            that.$apply()
        })
    }

html标签代码：（这个view是在<template>当中的）

<view class="myCardContent">
                <view class="redHeader"></view>
                <view class="contentBox">

                    <image class="headImgCard" src="{{cardInfo.avatar}}" mode="aspectFill"></image>
                    <view class="professionInfo">{{cardInfo.career}}</view>
                    <view class="userId">ID: {{cardInfo.user_id}}</view>

                    <!-- 用户信息展示栏 -->
                    <view class="cardInfoBox">
                        <view class="item">性别:  <sapn class="attribute"> {{cardInfo.gender}}</sapn></view>
                        <view class="item itemRight">年龄:  <sapn class="attribute"> {{cardInfo.age}}年</sapn></view>
                        <view class="item">居住地:  <sapn class="attribute"> {{cardInfo.place_of_residence}}</sapn></view>
                        <view class="item itemRight">学历:  <sapn class="attribute"> {{cardInfo.education}}</sapn></view>
                        <view class="item">身高:  <sapn class="attribute"> {{cardInfo.height}}cm</sapn></view>
                        <view class="item itemRight">年薪:  <sapn class="attribute"> {{cardInfo.annual_salary}}</sapn></view>
                        <view class="item">住房:  <sapn class="attribute"> {{cardInfo.house}}</sapn></view>
                        <view class="item itemRight">车辆:  <sapn class="attribute"> {{cardInfo.car}}</sapn></view>
                    </view>

                    <!-- 用户信息简介 -->
                    
                    <view class="tipChildIntroduce">孩子介绍
                        <view class="orangeLine"></view>
                    </view>
                    <view class="childIntrodCont">{{cardInfo.child_introduction}}</view>

                    <!-- 用户择偶条件 -->
                
                    <view class="tipChildIntroduce">择偶条件
                        <view class="orangeLine"></view>
                    </view>
                    <view class="childIntrodCont">{{cardInfo.spouse_description}}</view>

                    <!-- 用户生活照 -->
                    <view class="tipChildIntroduce">生活照
                        <view class="orangeLine"></view>
                    </view>
                    <view class="lifeImgBox {{isMinePage ? 'marginBottom' : ''}}">
                        <repeat for="{{cardInfo.photos}}" item="item">
                            <image src="{{item}}" class="lifeImg" @tap="liveImg" data-index="{{index}}" mode="aspectFill"></image>
                        </repeat>
                    </view>
                </view>
            </view>

数据操作的精髓 ↑

而如果在jq中，你拿到数据之后，还要把数据一条条插进DOM中，看下代码：

// 获取名片信息  === jq版
    getCardInfo( user_id ) {
        const that = this
        circleApi.getCardInfo({
            data: {
                user_id,
                card_is_mine: -1            //默认-1 ====》圈内
            },
            getToken: true
        }).then( res => {
            log('获取我的名片信息', res)
            let data = res.data
          　let sexDom = $('sexClassName').innerText = res.gender;

　　　　　　　let ageDom = $('sexClassName').innerText = res.age;
　　　　　　　***
　　　　　　　　有多少条数据需要插入，就得操作DOM多少次！！！！！吓人不

        })
    }

数据填充二：数据模板插入。就是后端给你返回了10条商品数据，你得把这10个商品全部展示出来对吧，看例子：

如上图，后端返回了我们圈子的列表，圈子分为四种，career_circles、local_circles、my_circles、group_circles四种，每一个是数组，这里以my_circles为例，数组里面有6条商品信息，需要展现出来，看上图左可以发现，每个圈子的模板都是一样的，一张图片加两行文字说明。模板在此时就发挥了作用，

// 获取圈子列表
    getCircleList(city_id, card_is_mine) {
        const that = this;
        circleApi.getCircleList({
            data: {
                city: 2,                  //city_id
            },
            getToken: true
        }).then( res => {
            log('获取圈子列表01', res)
            let data = res.data;
            that.careerCirclr = data.career_circles;
            if( that.careerCirclr.length === 0 ) {
                this.prefTipCtrl = false
            }
            that.localCirclr = data.local_circles;
            if( that.localCirclr.length === 0 ) {
                that.localTipCtrl = false
            }
            that.myCircle = (data.group_circles).concat(data.my_circles) ;     
            if( that.myCircle.length != 0) {
                that.showMyCircle = true;
            }
            that.$apply();
        })
    }

<block wx:if="{{showMyCircle}}">
        <view class="subiect">我的相亲圈</view>
        <view class="circleBigBox">
            <repeat for="{{myCircle}}" key="index" item="item">
                <CircleItemNew @circleDescClick.user = "circleDescClick"
                                :circleImg.sync = "item.image"
                                :circleName.sync = "item.circle_name"
                                :circleDesc.sync = "item.short_desc"
                >
                </CircleItemNew>
            </repeat>
        </view>
        </block>

以上代码中直接遍历数据 myCircle ,Vue中有 v-for ，微信原生有 wx:for= wepy中采用 <repeat for>，虽然写法有差异，但思想都是遍历数据就可以了，不需要操作DOM

组件CircleItemNew：（因为其他的三种圈子也是这个模板，所以抽出来作为模板写）

<template>
    
    <view class="circleItemBox" data-circleId="{{circleId}}" data-circlestate ="{{circleState}}" data-circlegroupId="{{circleGroupId}}" @tap="goCircleIntroduce">
        <image class="circleImgNew" mode="aspectFill" src="{{circleImg}}"></image>
        <view class="circleName">{{circleName}}</view>
        <view class="circleDesc">{{circleDesc}}</view>
    </view>

</template>

以上模块若用jq中操作DOM实现，代码如下:

 // 获取圈子列表
    getCircleList(city_id, card_is_mine) {
        const that = this;
        circleApi.getCircleList({
            data: {
                city: 2,                  //city_id
            },
            getToken: true
        }).then( res => {
            log('获取圈子列表01', res)
            let data = res.data;
            that.careerCirclr = data.career_circles;
            if( that.careerCirclr.length === 0 ) {
                this.prefTipCtrl = false
            }
            that.localCirclr = data.local_circles;
            if( that.localCirclr.length === 0 ) {
                that.localTipCtrl = false
            }
            that.myCircle = (data.group_circles).concat(data.my_circles) ;

　　　　　　　　$(parentNode).empty()              //首先你得把放这个6个圈子的父元素清空，要不下次进来就12个圈子了，在下次进来18个，

　　　　　　　　$.each(that.myCircle, function(item, index) {        //遍历数组
　　　　　　　　　　let circleDiv = '<img src='+ item.image +'></img>         //每次遍历都生成一个HTML模板，再把该模板插入父元素中
　　　　　　　　　　　　　　　　　　　　<div>'+ item.circle_name +'</div>
　　　　　　　　　　　　　　　　　　　　<div>'+ item.short_desc +'</div>
　　　　　　　　　　　　　　　　　　　　'
　　　　　　　　　　$(parentNode).append(circleDiv)
　　　　　　　　})

            that.$apply();
        })
    }

小型フロントエンドのアプリケーション開発 - 能力へのエントリ（初心者論文）

おすすめ