小程序的商城模板（一）

小程序的商城模板首先需要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)
    })
},

如此，完成使用云端图片展示轮播图的功能。

页面其他内容可自行完成排版设计。