分享一個(gè)自己在公司開(kāi)發(fā)的一個(gè)微信小程序商城項(xiàng)目，花了很多的時(shí)間設(shè)計(jì)和開(kāi)發(fā)，功能齊全。收獲巨大。
微信小程序商城的效果還是很不錯(cuò)的，原因如下：
1、入口眾多
商城小程序本身作為小程序的一個(gè)種類，具有很多開(kāi)放入口，比如：附近的小程序、小程序碼、微信搜一搜、群分享、好友分享、公眾號(hào)關(guān)聯(lián)、推送等五十多個(gè)的入口。這些入口有助于企業(yè)更好的獲取流量，從而進(jìn)行轉(zhuǎn)化、變現(xiàn)。
2、微信助力
相信大家都知道，商城小程序是基于微信運(yùn)行的，這本身就是一個(gè)很大的優(yōu)勢(shì)。如果是運(yùn)營(yíng)一個(gè)購(gòu)物商城的網(wǎng)站或是APP，首先要做到的就是有用戶基數(shù)，而一個(gè)新平臺(tái)，獲取流量的難度是非常大的。
但微信小程序，背靠微信，坐擁10億用戶，在這些用戶中，一定會(huì)有很多有相關(guān)需求的用戶。再加上附近的小程序、搜索發(fā)現(xiàn)小程序、公眾號(hào)關(guān)聯(lián)等，小程序可以非常輕松的獲取到大量流量。
3、方便快捷
與其他購(gòu)物平臺(tái)的APP、網(wǎng)站相比，小程序有一個(gè)很大的優(yōu)勢(shì)——方便快捷。例如在使用其他購(gòu)物平臺(tái)的APP時(shí)，不僅需要下載、安裝，而且還需要注冊(cè)、登陸。操作步驟繁瑣。即使不使用APP，直接登陸購(gòu)物平臺(tái)的網(wǎng)站，也需要經(jīng)過(guò)注冊(cè)、登陸的環(huán)節(jié)。
但微信小程序不同，由于小程序是依附在微信上面使用的，因此無(wú)需下載和安裝，此外，在登陸時(shí)，還可以選擇在利用微信賬號(hào)來(lái)登錄小程序，一鍵登陸，操作簡(jiǎn)單、快捷。
4、場(chǎng)景營(yíng)銷
上述提到，小程序擁有很多的入口，其中包括線上入口和線下入口，而商城小程序主要作為購(gòu)物使用，所以，線下的入口很重要。商城小程序很多的使用頻率都是線下，再加上其擁有的營(yíng)銷屬性，使得很多的商家解決了很多業(yè)務(wù)上的難題，更是大大節(jié)省了人力、物力、財(cái)力等成本，很大的提升了店鋪的業(yè)務(wù)效率。
界面效果截圖
管理后臺(tái)截圖
首頁(yè)功能實(shí)現(xiàn)
<!-- index.wxml -->
<view class="page">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item.photo}}" class="slide-image" width="100%" height="200" />
</swiper-item>
</block>
</swiper>
<view class="cont">
<navigator class="pr" url="../product/detail?productId={{item.id}}" hover-class="changestyle"
wx:for="{{productData}}">
<image class="photo" src="{{item.photo_x}}"></image>
<view class="title">{{item.name}}</view>
<view style="display:flex;line-height:50rpx;padding:10rpx 0;">
<view class="gmxx" style=" color: red;">￥ {{item.price_yh}}</view>
<view class="gmx">￥ {{item.price}}</view>
</view>
<view style="display:flex;line-height:50rpx;color:#999">
<view class="gmxx" style="font-size:28rpx;width:30%">
<text wx:if="item.is_show==1">新品</text>
<text wx:elif="item.is_hot==1">熱銷</text>
<text wx:else>推薦</text>
</view>
<view class="ku" style="width:60%">銷量：{{item.shiyong}}</view>
</view>
</navigator>
</view>
<view class="clear mt10" bindtap="getMore">點(diǎn)擊查看更多</view>
</view>
var app = getApp();
Page({
data: {
imgUrls: [],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
circular: true,
productData: [],
proCat:[],
page: 2,
index: 2,
brand:[],
// 滑動(dòng)
imgUrl: [],
kbs:[],
lastcat:[],
course:[]
},
//跳轉(zhuǎn)商品列表頁(yè)
listdetail:function(e){
console.log(e.currentTarget.dataset.title)
wx.navigateTo({
url: '../listdetail/listdetail?title='+e.currentTarget.dataset.title,
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
//跳轉(zhuǎn)商品搜索頁(yè)
suo:function(e){
wx.navigateTo({
url: '../search/search',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
//品牌街跳轉(zhuǎn)商家詳情頁(yè)
jj:function(e){
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../listdetail/listdetail?brandId='+id,
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
tian: function (e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../works/works',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
//點(diǎn)擊加載更多
getMore:function(e){
var that = this;
var page = that.data.page;
wx.request({
url: app.d.ceshiUrl + '/Api/Index/getlist',
method:'post',
data: {page:page},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
var prolist = res.data.prolist;
if(prolist==''){
wx.showToast({
title: '沒(méi)有更多數(shù)據(jù)！',
duration: 2000
});
return false;
}
//that.initProductData(data);
that.setData({
page: page+1,
productData:that.data.productData.concat(prolist)
});
//endInitData
},
fail:function(e){
wx.showToast({
title: '網(wǎng)絡(luò)異常！',
duration: 2000
});
}
})
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
},
onLoad: function (options) {
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Index/index',
method:'post',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
var ggtop = res.data.ggtop;
var procat = res.data.procat;
var prolist = res.data.prolist;
var brand = res.data.brand;
var course = res.data.course;
//that.initProductData(data);
that.setData({
imgUrls:ggtop,
proCat:procat,
productData:prolist,
brand: brand,
course: course
});
//endInitData
},
fail:function(e){
wx.showToast({
title: '網(wǎng)絡(luò)異常！',
duration: 2000
});
},
})
},
onShareAppMessage: function () {
return {
title: '友購(gòu)在線',
path: '/pages/index/index',
success: function(res) {
// 分享成功
},
fail: function(res) {
// 分享失敗
}
}
}
});
需要可以加微信（LGY178888）了解下！
