微信小程序商城

时间：2022-08-31 21:17:22
微信小程序太火了，逼得我不得不也来凑热闹，闲来无事准备开发一个基于拼好货的微信小程序商场。今天刚开始画了一个简单的框架。

目前通过拼好货的api接口在微信小程序下能够获取到商品列表／商品详细情况／商城分类，后续我会将完成的功能写出来，各位大神勿喷。

主要就用到是下面代码

[html]  view plain  copy 
  1. <view id="main"> <view class="container"> <view class="main-view" id="co-focus"> <view class="index_loctaion"> <view class="location"> <view class='i'></view> <view class='span'></view> </view> <view class='location-arrow'> </view> </view> <view class='header'></view> <view class="div" id="tuan"> <!--头部图片轮播开始--> <swiper style="height:200px;" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgTopUrls}}"> <swiper-item> <navigator url="{{item.redirectUrl}}" redirect="{{item.redirect}}"> <image src="{{item.url}}" class="slide-image" style="width: 412px;"/> </navigator> </swiper-item> </block> </swiper> <view class="for-margin-top"></view> <block wx:for="{{goods_list}}"> <!--item start--> <view class="goods_list tuan-new div"> <view class="tuan_g div"> <view class="i"></view> <navigator hover-class="none" url="../goods/goods?goods_id={{item.goods_id}}"> <view class="tuan_g_img div"> <image class="loadThumb img" src="{{item.image_url}}"></image> <view class="goods-tag label-blue span" wx:if="{{item.key_words.label_style == '蓝标'}}" >{{item.key_words.label}}</view> <view class="goods-tag label-oranget span" wx:elif="{{item.key_words.label_style == '黄标' && item.key_words.label != '热卖'}}" >{{item.key_words.label}}</view> <view class="goods-tag label-red span" wx:elif="{{item.key_words.label_style == '红标' && item.key_words.label != '直降'}}" >{{item.key_words.label}}</view> <view class="goods-tag label-orange-hot span" wx:elif="{{item.key_words.label_style == '黄标' && item.key_words.label != '热卖'}}" >{{item.key_words.label}}</view> <view class="goods-tag label-red-reduce span" wx:elif="{{item.key_words.label_style == '红标' && item.key_words.label == '直降'}}" >{{item.key_words.label}}</view> <view class="goods-tag label-orange-hot span" wx:else>{{item.key_words.label}}</view> </view> <view class="tuan_goods_info div"> <view class="tuan_goods_name">{{item.goods_name}}</view> <view class="p tuan_goods_cx"> <view class="span"></view> <block wx:for="{{item.key_words.normal_keywords}}" wx:for-index="index_nk" wx:for-item="item_nk"> <view class="span" wx:if="{{index_nk == 0}}" >{{item_nk}}</view> <view class="span" wx:else ><view class="span">·</view>{{item_nk}}</view> </block> </view> </view> <view class="tuan_goods_core div"> <view class="tuan_goods_btn div"> <view class="span">{{item.event_desc}}</view> <view class="tmp span"></view> <view class="span">去开团</view> </view> <view class="tuan_goods_price"> <view class="red span"> <view class="small">￥</view> <span>{{item.sale_price}}</span> </view> <view class="divide span"> / </view> <view class="spec span">{{item.spec_desc}}</view> </view> </view> </navigator> </view> </view> <!--item end--> </block> </view> </view> </view> </view> <include src="../common/footer.wxml"/>


[javascript]  view plain  copy 
  1. 

    Page({
  data:{
      "URL" : 1,
      "imgTopUrls": [
         {
           "url" : 'http://imagecdn.yqphh.com/3/2016/10/5bh9ftcpeckhksyl.jpg',
           "redirect" : false,
           "redirectUrl" : "../groups/groups?page=1"
         },
         {
           "url" : 'http://imagecdn.yqphh.com/3/2016/10/hr47iieyoxpkp1y5.jpg',
           "redirect" : false,
           "redirectUrl" : "../groups/groups?page=2"
         },
         {
           "url" : 'http://imagecdn.yqphh.com/3/2016/10/obtv454aqh62bvk5.jpg',
           "redirect" : false,
           "redirectUrl" : "../groups/groups?page=3"
         },

      ],
      "goods_list" : [
          {
            "goods_id": "9377",
            "goods_name": "突尼斯软籽石榴中果4个42.9元【拼拼甄选 10.14发货】",
            "key_words": {
               "country": {
                  "name": "",
                  "img_url": ""
              },
              "normal_keywords": [
                "250-350g/个",
                "有故事有来头",
                "籽软小",
                "汁水多"
              ],
              "label_style": "蓝标",
              "label": "热卖"
              },
              "image_url": "http://imagecdn.yqphh.com/3/2016/10/hddljox8q6g7ossr.jpg",
              "spec_desc": "4个 ",
              "goods_desc": "250-350g/个·有故事有来头·籽软小·汁水多\n1. 来自突尼斯的石榴品种，是世界上最好吃的石榴！！！颗粒大，籽粒软，是石榴中难得的珍品是为名副其实的红宝石石榴。\n2. 突尼斯软籽石榴果个大，果皮薄，果肉饱满，果味甜，果粒像阳光下的玛瑙般媚动人心，籽特软还小，无需吐籽即可食用。\n3. 籽大、色红、味甜，落地不沾尘。籽粒中核软渣少，食之甜汁欲滴，满腮生津，是宴宾佳品。其软籽被当地人们称为喝石榴。\n",
            "sale_price": "42.90",
            "event_desc": "2人团"
          },

          {
            "goods_id": "5904",
            "goods_name": "越南红心火龙果（小果）5个34.9元",
            "key_words": {
               "country": {
                  "name": "",
                  "img_url": ""
              },
              "normal_keywords": [
                "单果340-450g",
                "细腻爽滑",
                "甜而不腻"
              ],
              "label_style": " ",
              "label": "热卖"
            },
            "image_url": "http://imagecdn.yqphh.com/3/2016/10/rsuhy2ygtidzgdbr.jpg",
            "spec_desc": "5个 ",
            "goods_desc": "单果340-450g·细腻爽滑·甜而不腻\n",
            "sale_price": "42.90",
            "event_desc": "2人团"
          }
      ],
      indicatorDots: false,
      autoplay: true,
      interval: 2500,
      duration: 1000
  },
  onLoad:function(options){
      //wx.showNavigationBarLoading();
      //wx.hideNavigationBarLoading()
      console.log(options);
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
    
微信小程序商城
      
    2.  
 




标签：
相关文章