首页商品列表加载速度优化

package.json

 {
+  
   "name": "mayi-mp-shop",
   "version": "1.0.0",
   "mpvueTemplateProjectVersion": "0.1.0",
@@ -28,6 +29,7 @@
     "mpvue-wxparse": "^0.6.5",
     "vuex": "^3.0.1",
     "we-cropper": "^1.4.0"
+    
   },
   "devDependencies": {
     "babel-core": "^6.22.1",

project.config.json

@@ -2,18 +2,18 @@
     "description": "项目配置文件。",
     "setting": {
         "urlCheck": false,
-        "es6": true,
+        "es6": false,
         "enhance": true,
         "postcss": true,
         "preloadBackgroundData": false,
         "minified": true,
-        "newFeature": true,
+        "newFeature": false,
         "coverView": true,
-        "nodeModules": true,
-        "autoAudits": true,
+        "nodeModules": false,
+        "autoAudits": false,
         "showShadowRootInWxmlPanel": true,
         "scopeDataCheck": false,
-        "uglifyFileName": true,
+        "uglifyFileName": false,
         "checkInvalidKey": true,
         "checkSiteMap": true,
         "uploadWithSourceMap": true,
@@ -27,20 +27,19 @@
             "disablePlugins": [],
             "outputPath": ""
         },
-        "enableEngineNative": false,
-        "useIsolateContext": true,
+        "useIsolateContext": false,
         "userConfirmedBundleSwitch": false,
         "packNpmManually": false,
         "packNpmRelationList": [],
         "minifyWXSS": true,
         "disableUseStrict": false,
+        "minifyWXML": true,
         "showES6CompileOption": false,
-        "useCompilerPlugins": false,
-        "minifyWXML": true
+        "useCompilerPlugins": false
     },
     "miniprogramRoot": "dist/wx/",
     "compileType": "miniprogram",
-    "appid": "wx937625b28b7f85fd",
+    "appid": "wxae95a07ffdf11548",
     "projectname": "mayi-mp-shop",
     "simulatorType": "wechat",
     "simulatorPluginLibVersion": {},

project.private.config.json

@@ -86,6 +86,12 @@
                     "pathName": "pages/contact/main",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/pages_subpack/article/main",
+                    "query": "article_id=395",
+                    "scene": null
                 }
             ]
         }

src/App.vue

@@ -11,7 +11,7 @@ export default {
     let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
     console.log(extConfig, "-----------extConfig");
     if (JSON.stringify(extConfig) == "{}") {
-      extConfig = process.env.NODE_ENV == "development" ? { mixid: "antgood", shopid: 67}:{ "mixid":"CL", "shopid":1166 };
+      extConfig = process.env.NODE_ENV == "development" ? { mixid: "antgood", shopid: 67}:{ "mixid":"zantest", "shopid":1166 };
     }
 
 

src/components/basicTool/transverse-label/index.vue

@@ -68,7 +68,7 @@
             <banner :datas="item1"></banner>
           </div>
           <div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
-            <goods-list class="goodsListItem" :datas="item1"></goods-list>
+            <goods-list v-if="active == index" :class="['goodsListItem','goodsListItemIndex'+index]" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
           </div>
           <div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
             <area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
@@ -421,6 +421,7 @@ export default {
         })
       }
       this.active=res.target.index;
+      wx.setStorageSync('datasIndex', res.target.index);
     },
     timeOutInitTabs(notGetAllTabWidth) {
       setTimeout(() => {

src/pages/home/index.vue

@@ -13,7 +13,7 @@
             <banner :datas="item"></banner>
           </div>
           <div v-else-if="item.componentCode=='goods-list' && item.componentInfo.visible == 1" style="height:100%;">
-            <goods-list :class="'goodsListItem' + index" :datas="item"></goods-list>
+            <goods-list :class="['goodsListItem' + index,'goodsListItemIndex0']" :datas="item" :single="true"></goods-list>
           </div>
           <div v-else-if="item.componentCode == 'area-navigation' && item.componentInfo.visible == 1">
             <area-navigation :datas="item" :changeLocation="changeLocation"></area-navigation>
@@ -158,7 +158,7 @@ import indexApi from "@/api/index.js";
 import { throttle, concatUrl } from "../../utils/index.js"
 import mpvueCropper from '@/components/mpvue-cropper'
 const app = getApp();
-const { log } = app;
+const { log,tool } = app;
 export default {
   data() {
     return {
@@ -382,11 +382,24 @@ export default {
         this.themeColor = res
       }
     }
+
     // 不是冬奥会项目不调用此接口
     if(this.$store.state.mixid !='CL'){
       // 新人有礼弹窗
       this.newUserFun();
     }
+
+    //清除懒加载缓存
+    wx.removeStorage({
+      key: 'storageGoodsList'
+    })
+    wx.removeStorage({
+      key: 'storageDatasList'
+    })
+     wx.removeStorage({
+      key: 'datasIndex'
+    })
+    console.log('storageGoodsList---detory');
   },
   onShow() {
     // 设置显示条件
@@ -408,10 +421,14 @@ export default {
       this.active=checkTabbarPage('/')
     }
 
-    this.$mp.page.onPageScroll= (el)=>{
-      throttle(this.scrolls(el),100)
-    };
+    // this.$mp.page.onPageScroll= (el)=>{
+    //   throttle(this.scrolls(el),100)
+    // };
   },
+  onPageScroll: tool.throttle(function (el) {
+    // console.log(el);
+    this.scrolls(el)
+  },1000),
   methods: {
     async setVisible(pageList, cb) {
       // 首页显示条件
@@ -534,6 +551,7 @@ export default {
       this.active=checkTabbarPage('/');
       this.setVisible(this.mpApp.globalData.pageList,(res)=>{
         this.pageInfo = res;
+        console.log(this.pageInfo,'this.pageInfo');
         this.pageData = JSON.parse(this.pageInfo.pageData);
       });
       log.info("36----------------------559", this.pageData,this.pageInfo.pageSettingData);
@@ -593,7 +611,7 @@ export default {
     getSpokesmanInit(extConfig) {
       //绑定上下级关系
       app.fenxiaoModel.becomeRelation(extConfig).then(res=>{
-        if(res) {
+        if(res.data.code == '200') {
           wx.removeStorage({
             key: "becomeInfo"
           });

static/css/skeleton.wxss

+.skeleton-item{
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.5px;
+}
+.skeleton-bg {
+    background: #f2f3f5;
+}
+
+.skeleton-img{
+    height: 150px;
+    margin-top: 10px;
+}
+.skeleton-title{
+    height: 25px;
+    margin-top: 10px;
+}
+
+.skeleton-detail{
+    height: 10px;
+    margin-top: 5px;
+}
+.skeleton-price{
+    height: 15px;
+    margin-top: 5px;
+}
+
+.skeleton-animate {
+    animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+@keyframes skeleton-blink {
+    50% {
+        opacity: 0.6;
+    }
+}
\ No newline at end of file

static/nativeComponents/GoodsList/GoodsItem/index.wxml

 <!-- 商品列表item -->
+<!-- {{items.loadState}}--{{items.loadProductImgUrl}}--{{items.productImgUrl}} -->
+<view wx:if="{{items && datas.componentData['style'] == 'list' &&  items.loadState == false}}">
+	<view class="skeleton-animate">
+    	<view class="skeleton-bg skeleton-img"></view>
+        <view class="skeleton-bg skeleton-title"></view>
+		<view class="skeleton-bg skeleton-detail"></view>
+		<view class="skeleton-bg skeleton-price"></view>
+    </view>
+</view>
 <view
  class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
  style="--proGap2:{{datas.componentData.proGap*2}}rpx;"
  bindtap="onclickProduct"
+ wx:else
 >
 	<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius*2}}rpx;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
 		<!-- 商户入口-顶部 -->
@@ -56,6 +66,7 @@
 					<image mode="widthFix" src="{{datas.componentData['angleSignImg']}}" />
 				</view>
 				<!-- 商品主图 -->
+				<!-- {{items.loadState}}--{{items.loadProductImgUrl}}--{{items.productImgUrl}} -->
 				<image
 				 lazy-load
 				 mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"

static/nativeComponents/GoodsList/GoodsItem/index.wxss

 @import "/static/font/common_icon.wxss";
+/* 商品列表骨架屏 */
+@import "/static/css/skeleton.wxss";
 .flex{
   display: flex;
 }

static/nativeComponents/GoodsList/index.wxml

@@ -25,15 +25,20 @@
       style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
     >
       <view
-        wx:for="{{goodsList}}"
+        wx:for="{{pageGoodsList[datasIndex]}}"
         wx:key="index"
-        class="goods-item"
+        class="goods-item {{'goodsItemIndex'+index}}"
         style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
       >
-        <goods-item
+        <!-- <goods-item
           datas="{{datas}}"
           items="{{goodsList[index]}}"
           indexs="{{index}}"
+        ></goods-item> -->
+        <goods-item
+          items="{{pageGoodsList[datasIndex][index]}}"
+          datas="{{datas}}"
+          indexs="{{index}}"
         ></goods-item>
       </view>
     </view>