本文介绍如何利用微信小程序结合拼好货API接口，实现商品列表、详情及商城分类展示。作者计划分享更多完成的功能。
微信小程序太火了，逼得我不得不也来凑热闹，闲来无事准备开发一个基于拼好货的微信小程序商场。今天刚开始画了一个简单的框架。
目前通过拼好货的api接口在微信小程序下能够获取到商品列表／商品详细情况／商城分类，后续我会将完成的功能写出来，各位大神勿喷。
主要就用到是下面代码
-
<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"/>
-
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万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
