use jsonApi parse data

app.js

@@ -1,5 +1,10 @@
 App({
   onLaunch: function () {
-    
+    this.store = new(this.jsonApi())
+  },
+
+  jsonApi: function() {
+    const jsonApi = require('node_modules/jsonapi-datastore/dist/jsonapi-datastore.js').JsonApiDataStore
+    return jsonApi
   }
 })

pages/index/index.js

@@ -8,10 +8,11 @@ Page({
     var that = this
 
     product.getSlides().then(function(result) {
-      that.setData({'slides': result.data.data})
+      var data = getApp().store.sync(result.data)
+      that.setData({'slides': data})
       wx.setStorage({
         key:"indexSlides",
-        data:result.data
+        data:data
       })
     })
 
@@ -20,15 +21,16 @@ Page({
         var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi
         if (networkType) {
           product.getProducts().then(function(result) {
-            that.data.items = result.data.data
-            wx.setStorageSync('products', result.data)
+            var data = getApp().store.sync(result.data)
+            that.setData({'items': data})
+            wx.setStorageSync('products', data)
           })
         } else {
            cache = wx.getStorageSync('products')
            if (cache) {
-             this.data.items = cache
+             that.setData({'items': cache})
            } else {
-             this.data.items = []
+             that.setData({'items': []})
            }
         }
       }

pages/index/index.wxml

@@ -3,8 +3,8 @@
     <swiper style="height:230px;" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
       <block wx:for="{{slides}}" wx:for-item="slide">
         <swiper-item>
-          <navigator url="{{slide.attributes.url}}">
-            <image class="slide-img" src="{{slide.attributes.img}}" mode="aspectFit"/>
+          <navigator url="{{slide.url}}">
+            <image class="slide-img" src="{{slide.img}}" mode="aspectFit"/>
           </navigator>
         </swiper-item>
       </block>
@@ -13,11 +13,11 @@
     <block wx:for="{{items}}" wx:for-item="item">
       <navigator url="../show_product/show_product?id={{item.id}}">
         <view>
-          <image class="head-img" src="{{item.attributes['image-url']}}"  mode="aspectFit"></image>
+          <image class="head-img" src="{{item['image-url']}}" mode="aspectFit"></image>
         </view>
         <view>
-          <text> {{item.attributes.name}} </text>
-          <text> ¥{{item.attributes.price}} </text>
+          <text> {{item.name}} </text>
+          <text> ¥{{item.price}} </text>
         </view>
       </navigator>
     </block>

pages/show_product/show_product.js

@@ -17,7 +17,6 @@ Page({
   onLoad (params) {
     var that = this
     this.data.id = params.id
-
     that.data.product = wx.getStorageSync('products').find(function(i){
       return i.id === that.data.id
     })
@@ -34,6 +33,8 @@ Page({
   },
 
   bindAddToCart (e) {
+    //var existItem = wx.getStorageSync('cartItems')
+    // TODO
     wx.setStorage({
       key: `cart-${this.data.id}`,
       data: {quantity: this.data.quantity}

pages/show_product/show_product.wxml

@@ -1,18 +1,18 @@
 <view>
   <view>
-    <image class="head-img" src="{{product.attributes['image-url']}}" mode="aspectFit" />
+    <image class="head-img" src="{{product['image-url']}}" mode="aspectFit" />
   </view>
 
-  <text>{{product.attributes.name}}</text>
+  <text>{{product.name}}</text>
 
   <view>
-    <form bindsubmit="formSubmit" data-sku="{{product.attributes.sku}}">
+    <form bindsubmit="formSubmit" data-sku="{{product.sku}}">
       <view class="section quantity">
         <view class="quantity">数量：</view>
         <input id="quantity" name="quantity" bindinput="bindQuantityInput" value="1" />
       </view>
       <view class="section">
-        <text id="price" >¥{{product.attributes.price || '无法获取价格'}}</text>
+        <text id="price" >¥{{product.price || '无法获取价格'}}</text>
       </view>
       <view class="btn-area">
         <button formType="submit" type='primary'>立即购买</button>