前言：這次的App項目是由native+H5組合而成桂敛，整個App分為2個模塊，我負責的是商城首頁到生成訂單的一系列頁面以及業(yè)務代碼溅潜，在這里總結一下遇到的問題术唬。第一次寫筆記，多多見諒滚澜。

打包工具

項目采用webpack進行打包粗仓，雖然之前有過一些基礎的接觸，但是這次還是第一次自己嘗試的去配置博秫，稍微補了一下webpack的內容潦牛。

//webpack.config.js
module.exports = {
    entry: {
        ProductDetails:"./src/js/ProductDetails.js",
        Orderdetail:"./src/js/Orderdetail.js",
        Logistics:"./src/js/Logistics.js",
        Index:"./src/js/Index.js",
        ...
    },
    output: {
        path: './dist',
        filename: '[name].js'
    },
     resolve: {
        alias: {
            'vue': 'vue/dist/vue.js',
        }
    }, 
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url' 
            }
            
        ]
    },
    
}

入口

entry ：配置起始文件的路徑眶掌，它可以是數(shù)組挡育，對象，字符串朴爬。在這里我采用了多頁面入口的方式即寒。

輸出

output： path： 配置最終打包完成后的路徑所在；filename：最終打包后文件的名稱召噩，由于是多頁面入口文件母赵，這里為了方便使用[name].js，這樣最終打包出來的文件名稱跟入口文件名稱一致具滴。

加載器

module(loaders)：
test：注意是正則表達式凹嘲，不要加引號，匹配要處理的文件

loader：要使用的loader构韵，"-loader"可以省略

include： 把要處理的目錄包括進來

exclude：不需要去處理的目錄周蹭。

與native的交互

• 目前是通過自定義協(xié)議的方式趋艘，也就是URL，協(xié)商一個通用的協(xié)議比如app.owen://?pushcode=1 ,前端通過location.href凶朗，而native則是通過截取這段URL瓷胧，獲取里面的參數(shù)進行處理。

難點一.

模仿淘寶商品詳情棚愤，雖然不要求完全一樣但是功能基本要一致搓萧。難點就是在商品屬性選擇后價格,庫存,圖片都要改變,到這首先想到的就是Vue中的watch.然后就是每種分類的點擊效果，不沖突宛畦，不重復瘸洛。

demo1.png

demo2.png

在這里有個重點抓督，Vue 不允許在已經創(chuàng)建的實例上動態(tài)添加新的根級響應式屬性，也就是說我們只能動態(tài)添加在已存在的根級屬性中束亏，我在Vue創(chuàng)建了根級屬性iscur

    data: {
        iscur: {},//當前的商品子屬性attrid
    }  
    

可以通過this.$set(this.iscur,'b',2),但是如果新添加的新屬性在改變后并不會觸發(fā)更新怎么辦,這里是采用this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }),創(chuàng)建一個新的對象铃在，讓它包含原對象的屬性和新的屬性。

言歸正傳碍遍，通過請求獲取分類數(shù)據(jù)定铜，這里我通過遍歷父分類怕敬，給iscur動態(tài)添加屬性，

            this.arrts.forEach( (val, index)=> {              
                    var attrsId = {
                        //設置子分類attrid
                        ['type' + index]: ""
                    }
                    ....
                    this.iscur = Object.assign({}, this.iscur, attrsId) //實現(xiàn)data響應
                    ....              
                })

可以看到iscur 中的屬性畸陡，

demo3.png

在看看HTML處：

//父分類
<div class="attr" v-for="(attr,findex) in arrts">
   <h1 >{{attr.attrname}}</h1>
   <ul :id="attr.attrid">
          //子分類
          <li  v-for="(item,index) in attr.attrValueList" 
           :class="{active:iscur['type'+findex]==item.attrid}"         
           v-on:click="actives($event,findex,item.attrid)"                   
          >{{item.attrname}}</li>                   
   </ul>
</div>

首先分類信息會有兩次遍歷，首先遍歷出父分類虽填，再遍歷子分類丁恭，其中:class="{active:iscur['type'+findex]==item.attrid}是判斷當前父分類下選中的是哪個子分類id斋日。v-on:click="actives($event,findex,item.attrid)點擊子分類時將父分類的id和子分類的id傳入

 actives: function (e, findex, attrid) {   
            this.iscur['type' + findex] = attrid;
        }

最后使用watch監(jiān)控iscur對象，在每次點擊后恶守，iscur就會發(fā)生改變第献，從而執(zhí)行handler跛蛋，
在其中執(zhí)行對比sku，更換價格痊硕，圖片，以及庫存理逊。

iscur: {
            /*
            監(jiān)控 iscur 對象
            當iscur中屬性發(fā)生變化時盒揉，我們獲取iscur中每個屬性的value值,再與價格表中的數(shù)據(jù)進行對比，提取出相同項的數(shù)據(jù)
            */

            handler: function (val) {

                // do  something 
            },
            // 深度觀察
            deep: true
        },

難點二.

這種類分頁：

demo5.png

setModels: function (datas) { 
            /**
             * 初始化productlist的數(shù)據(jù)結構
             * 根據(jù)分類數(shù)據(jù)遍歷后分別添加obj哑了，用來存放數(shù)據(jù)
             */

            datas.forEach((value, index) => {
                var obj = {
                    brandid: value.brandid,
                    list: []
                }
                this.productlist.push(obj)
            })
        },

通過這個方法，productlist擁有了跟分類相同個數(shù)對象弱左，之后每次點擊子分類后去請求商品列表，然后遍歷每個數(shù)據(jù)push到相應obj的list數(shù)組中跳夭，這樣就保存了數(shù)據(jù)们镜。當然點擊時候還需要一個方法去判斷什么時候去請求。

 cacheData: function (index,brandid) {
            /**
             * 通過index知道分類的索引號模狭，獲取數(shù)據(jù)
             * 如果list的長度為0，代表無數(shù)據(jù)贩汉，則去請求數(shù)據(jù)
             */   
            var indexdata=this.productlist[index]
            if(indexdata.list.length==0){
                this.getlistdata(brandid)
            }else{
                return false
            }
            
        },

Tips

this.$nextTick(function(){
//dom更新
})

這個方法通常是我們需要運用到dom時候調用的锚赤，比如swiper,js 在獲取圖片數(shù)據(jù)后，實例化swiper必須在該回調函數(shù)內執(zhí)行才有效策菜。獲取一些其他第三方插件需要操作dom節(jié)點酒贬，獲取邊距等都需要在回調函數(shù)內執(zhí)行又憨。