Tdesign 零售电商模板小程序云开发指南

一. 新建项目

用微信开发者工具选择模板新建小程序
模板的github地址

二. 项目构成

零售行业模版小程序采用基础的 JavaScript + WXSS + ESLint 进行构建，降低了使用门槛。

项目目录结构如下：

|-- tdesign-miniprogram-starter
    |-- README.md
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- components	//	公共组件库
    |-- config	//	基础配置
    |-- custom-tab-bar	//	自定义 tabbar
    |-- model	//	mock 数据
    |-- pages
    |   |-- cart	//	购物车相关页面
    |   |-- coupon	//	优惠券相关页面
    |   |-- goods	//	商品相关页面
    |   |-- home	//	首页
    |   |-- order	//	订单售后相关页面
    |   |-- promotion-detail	//	营销活动页面
    |   |-- usercenter	//	个人中心及收货地址相关页面
    |-- services	//	请求接口
    |-- style	//	公共样式与iconfont
    |-- utils	//	工具库

三. 新建页面

1. pages文件夹下右键新建文件夹，此处会要求输入名称。
2. 然后在新文件夹中右键新建Page，此处会要求输入名称。
3. 新建Page后，会在根目录的app.json的pages对应的数组下自动添加当前页面，只有在pages数组下的页面才可以被显示，不然就报错。
   
   

四. 修改底栏

1. 因为app.json的tabBar里的custom被设置为了true，它的意思是这个模板使用自定义底栏，所以不能在app.json里修改底栏。
   
2. 我们需要找到根目录下的custom-tab-bar文件夹，这里是自定义底栏。
3. 这里的目录结构是
   

custom-tab-bar
	├── data.js // 存储自定义标签栏的数据或配置信息
	├── index.js // 自定义标签栏的主要逻辑代码
	├── index.json // 自定义标签栏的配置信息
	├── index.wxml // 自定义标签栏的WXML布局模板
	└── index.wxss // 自定义标签栏的WXSS样式文件

4. 只有data.js是存储数据的，也就是具体指向哪些页面，其他的文件就跟普通的页面文件一样。
5. 在data.js里新加一条，意思是图标用star，文字是测试页面，url就是新建page时app.json里自动添加的那个，添加后保存运行就能看到底栏已经有了，但是此时还不能点击。

  {
    icon: 'star',
    text: '测试页面',
    url: 'pages/testpage/test',
  },

6. 此时需要在app.json的tabBar的list数组里添加上，pagePath和text都要对的上，不然会出点小错误。

     {
        "pagePath": "pages/testpage/testpage",
        "text": "测试页面"
      },

7. 此时点击底栏就可以正常切换页面了
   

五. 云开发的增和查

1. 先创建集合，也可以理解为数据库的一个表
   
2. 再在根目录下的app.js里配置以使用云。

  onLaunch: function () {
    if (!wx.cloud) {
      console.log('请使用2.2.3或以上使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true
      })
    }
  },

3. 在testpage.wxml里添加两个按钮，一个获取数据（获取所有数据并展示），一个添加数据（数据是固定的）

注意这里我用到了t-tag这个标签，这是TDesign提供的组件，TDesign在这个模板已经内置，只需要在根目录app.json里引入，在usingComponents里添加。 TDesign的tag组件文档链接
下面是要添加的：
“usingComponents”: {
“t-tag”: “tdesign-miniprogram/tag/tag”,
}

<button type="primary" bind:tap="getData">获取数据</button>
<view wx:for="{{dataObj}}">
  <t-tag theme="primary">{{item.key}}</t-tag>
  <t-tag theme="success">{{item.value}}</t-tag>
</view>
<button type="warn" bind:tap="addData">添加数据</button>

5. 在testpage.js写获取数据和添加数据的函数

  // 获取数据，我的表是test1
  getData() {
    db.collection('test1').get().then(res => {
      console.log(res.data)
      this.setData({
        dataObj: res.data
      })
    })
  },
  // 添加数据
  addData() {
    //  wx.showLoading的作用是出现一个加载动画，完成添加数据操作后再结束掉这个动画
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    db.collection("test1").add({
      data: {
        key: "testKey",
        value: "testValue"
      }
    }).then(res => {
      console.log(res);
      // 结束动画
      wx.hideLoading()
    })
  },

6. 这时候页面长这样，添加数据和显示数据可以正常操作