微信小程序table

前言

项目需要所以需要研究一下微信小程序，昨天下午看了两个小时，把编译的工具什么都梳理的一遍，发微信小程序相对于开发来说我觉得还是很简单的，整体复杂性并不高。比我写的vue及微服务等简单多了，初步研究，这里记录一下实现过程中感觉比较重要的东西，我这里就不做深入的代码解说，因为刚研究担心说错了给您后续的研究带来不便。

项目目录

table实现

table.js文件代码【业务逻辑代码】

const app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nodes: [{ //表格配置
      name: "table",
      attrs: {
        style: "  text-align: center",
      },
      children: [
        {
          name: "thead",   //thead不能改变表示表头
          attrs: {
            style: "border:1px solid #000;color：black",
            class: "black"
          },
          //表头
          children: [
            {
              name: "tr",
              attrs: {
                style: "border:1px solid #000;color:black",
                class: "red"
              },
              children: [
                {
                  name: "th",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "姓名"
                  }]
                },
                {
                  name: "th",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "年龄"
                  }]
                },
                {
                  name: "th",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "地址"
                  }]
                }]

            }],
        },
        
        {
          name: "tbody",  //tbody不能改变
          attrs: {
            style: "border:1px solid #000;color:black",
            class: "red"
          },
          children: [
            {
              name: "tr",
              attrs: {
                style: "border:1px solid #000;color:black",
                class: "red"
              },
              children: [
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "张三"
                  }]
                },
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "18"
                  }]
                },
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "陕西省西安市"
                  }]
                }                
                ]
            }
            ],
        }
        ,

        {
          name: "tbody",  //tbody不能改变
          attrs: {
            style: "border:1px solid #000;color:red",
            class: "red"
          },
          children: [
            {
              name: "tr",
              attrs: {
                style: "border:1px solid #000;color:black",
                class: "red"
              },
              children: [
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "李四"
                  }]
                },
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "21"
                  }]
                },
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "陕西省榆林市"
                  }]
                }
              ]
            }
          ],
        },

        {
          name: "tbody",  //tbody不能改变
          attrs: {
            style: "border:1px solid #000;color:blue",
            class: "red"
          },
          children: [
            {
              name: "tr",
              attrs: {
                style: "border:1px solid #000;color:black",   //设置表格内容是黑色
                class: "red"
              },
              children: [
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "王五"
                  }]
                },
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "45"
                  }]
                },
                {
                  name: "td",
                  attrs: {},
                  children: [{
                    type: "text",
                    text: "陕西省渭南市"
                  }]
                }
              ]
            }
          ],
        }
      ],
    }]
  },
  tap() {
    console.log('tap')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

table.json文件代码【界面设置代码】

{
  "usingComponents": {},
  "navigationBarTitleText": "表格"
}

table.wxml文件代码【UI代码】

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

table…wxss文件代码【样式代码代码】

运行效果