小程序的商城模板首先需要1.底部导航栏,首页轮播广告图,一些功能按钮,热卖推荐;2.商品详情页,添加或者减少购买的按钮(同步数据库库存),购物车同步数据,结算键;3.模拟支付结算;4.个人信息页
首先实现底部导航栏:在app.json文件中添加代码:
"tabBar": {
"color": "#515151",
"selectedColor": "#2E8B57",
"borderStyle": "white",
"list": [{
"selectedIconPath": "image/ok1.png",
"iconPath": "image/no1.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"selectedIconPath": "image/ok2.png",
"iconPath": "image/no2.png",
"pagePath": "pages/mall/mall",
"text": "二手商城"
},
{
"selectedIconPath": "image/ok3.png",
"iconPath": "image/no3.png",
"pagePath": "pages/fabu/fabu",
"text": "发布"
},
{
"selectedIconPath": "image/ok5.png",
"iconPath": "image/no5.png",
"pagePath": "pages/me/me",
"text": "我的"
}
]
},
导航栏按照自己的意愿,需要几个按钮都可以, “selectedIconPath”: “image/ok3.png”,是被选中后图片的路径,“iconPath”: “image/no3.png”,未选中时图片的路径,“pagePath”: “pages/fabu/fabu”,是点击后跳转的页面路径。将要使用的图片放进路径中的文件夹即可。
首页的轮播图:两种实现方法,1,放在js的data里,也就是将图片放在项目文件夹中;2,将图放在云端数据库
第一种实现方法:
<!-- 顶部轮播图 -->
<view>
<swiper indicator-dots="{{true}}" indicator-color="#2E8B57" autoplay="true" circular="true">
<block wx:for="{{banner}}" wx:key="banner">
<swiper-item bindtap="goHuiShou">
<image src='{{item.picUrl}}' mode="widthFix" style="width:100%;height:100%;" />
</swiper-item>
</block>
</swiper>
</view>
这里使用for循环,将js的data中叫做banner的数列里的picUrl循环播放,js文件
data: {
banner: [{
picUrl: '/image/1.png'
},
{
picUrl: '/image/2.png'
},
{
picUrl: '/image/3.png'
}
],
},
第二种方法,先将图上传到云端的存储里,系统会自动分配一个对应的fileid,将其填写在图片数据库中
点击上传文件,将图片上传,得到cloud:开头的一串ID
将其填入数据库,
在js文件中加入:
onLoad: function (options) {
this.getTopBanner()
},
//获取首页顶部轮播图
getTopBanner() {
wx.cloud.database().collection("goods")
.get()
.then(res => {
console.log("首页banner成功", res.data)
if (res.data && res.data.length > 0) {
//如果后台配置轮播图就用后台的,没有的话就用默认的
this.setData({
book: res.data
})
}
}).catch(res => {
console.log("首页banner失败", res)
})
},
如此,完成使用云端图片展示轮播图的功能。
页面其他内容可自行完成排版设计。