【小程序系列】[01]优购项目 起步,tabBar,首页

88 阅读1分钟

小程序项目

一定要 npm init -y 不然很多BUG

 "subpackages":[
      {
        "root":"subpkg",
        "pages":[
          {
            "path":"goods_detail/goods_detail",
            "style":{
              "enablePullDownRefresh":false
            }
          }
        ]
      }
    ],
 <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
          <image :src="item.image_src"></image>
</navigator>

封装请求提示信息

uni.$showMsg=function(title="数据加载失败!",duration = 1500){
  uni.showToast({
    title,
    icon: 'none',
    duration
  })
}


 if (res.meta.status !== 200) return uni.$showMsg()
        uni.$showMsg('请求数据成功')

前后端配合来写 分包的
如果地址用不了,就需要和后端沟通改返回地址,

 "subpackages": [{
    "root": "subpkg",
    "pages": [{
      "path": "goods_detail/goods_detail",
      "style": {
        "enablePullDownRefresh": false
      }
    },
    {  "path" : "goods_list/goods_list" }]
  }],
async getfloorList(){
      const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
      if(res.meta.status !== 200) return uni.$showMsg()
      res.message.forEach(floor=>{
        floor.product_list.forEach(prod=>{
          prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
        })
      })
      this.floorList = res.message
<view class="floor-img-list">
       <navigator class="floor-left-list" :url="item.product_list[0].url">
          <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width + 'rpx'}"  mode="widthFix" ></image>
       </navigator>
      <view class="floor-right-list">
          <navigator :url="item2.url" class="floor-left-item" v-for="(item2,index2) in item.product_list" :key="index2" v-if="index2 != 0">
            <image class="floor-left-img" :src="item2.image_src" :style="{width:item2.image_width + 'rpx'}" mode="widthFix"></image>
          </navigator>
       </view>
     </view>
   </view>