异行星低代码平台使用的技术栈是？

Question

异行星低代码平台使用的技术栈是？
有使用过或者了解过异行星低代码平台所使用的技术栈么？
想去学习一下

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7538232
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：微信小程序 在开发者工具调试可以，在真机调试和预览没数据的解决办法
• 您还可以看一下 刘建萍老师的人工智能系列课程零基础讲解知识点和实例应用线性回归梯度下降逻辑回归课程中的 讲解机器学中会涉及到的有关数学方面的知识储备有哪些小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 答题类微信小程序开发实践与开源学习分享中的 五、 缓存用户的答题数据 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  首先我们需要一个Logs页面来展示用户的答题数据。在新建小程序项目时已经生成了一个Logs页面，我们就在上面改改就好。

  1. 设置缓存

  因为是纯前端的小程序，所以我们用缓存来保存答题记录。 在test.js里设置。

   

  

   

  // test.js
  
    // 设置缓存
    var logs = wx.getStorageSync('logs') || []
    let logsList = { "date": Date.now(), "testId": this.data.testId, "score": this.data.totalScore }
    logs.unshift(logsList);
    wx.setStorageSync('logs', logs);
  

  每次答题结束都拿到当前的logs缓存数据，在logList手动定义数据格式（当前时间戳/试题id/得分），追加到拿到的logs数据里，最后调用wx.setStorageSync()接口保存logs数据。

  2. 拿到缓存

  logs.js

   

  //logs.js
  const util = require('../../utils/util.js')
  
  Page({
    data: {
      logs: [],
    },
    onShow: function () {
      this.setData({
        logs: this.formatLogs()
      })
    },
    // 拿到缓存并格式化日期数据
    formatLogs: function () {
      let newList = [];
      (wx.getStorageSync('logs') || []).forEach(log => {
        if (log.date) {
          log['date'] = util.formatTime(new Date(log.date));
          newList.push(log);
        }
      })
      return newList;
    }
  })
  

  因为数据的时间是个时间戳，所以我们导入util.js文件，使用里面的formatTime方法来转换时间格式。
  在data里我们定义了logs空数组，在formatLogs函数里进行wx.getStorageSync('logs')拿到缓存并遍历-转换时间格式-添加到新的空数组，最后返回新数组的操作。在OnShow生命周期里，我们调用formatLogs方法，给logs赋值。

  3. 数据渲染

  logs.wxml

   

  <!--logs.wxml-->
  <view class="page">
    <view class="table" wx:if="{{logs.length>0}}">
      <view class="tr bg-w">
        <view class="th first">时间</view>
        <view class="th">试题</view>
        <view class="th ">得分</view>
      </view>
      <block wx:for="{{logs}}" wx:for-item="item">
        <view class="tr">
          <view class="td first">{{item.date}}</view>
          <view class="td">{{item.testId}}</view>
          <view class="td">{{item.score}}</view>
        </view>
      </block>
    </view>
    <view class="no-record" wx:else>
      <image src="/image/wechat.png" class="no-image"></image>
      <text class="no-text">没有数据哦~</text>
    </view>
  </view>
  

  自己写一个table结构，遍历logs缓存数据，展示 答题时间/试题id/得分 等数据。 这里我们还进行了判断，如果没有数据，展示没有数据的提示。

  logs.wxss

   

  .table {
   border: 0px solid darkgray;
   font-size: 12px;
  }
  .tr {
   display: flex;
   width: 100%;
   justify-content: center;
   height: 2rem;
   align-items: center;
  }
  .td {
    width:40%;
    justify-content: center;
    text-align: center;
  }
  .bg-w{
   background: snow;
  }
  .th {
   width: 40%;
   justify-content: center;
   background: #3366FF;
   color: #fff;
   display: flex;
   height: 2rem;
   align-items: center;
  }
  .first {
    flex:1 0 auto;
  }
  .no-record {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .no-image {
    width: 200rpx;
    height: 200rpx;
    margin-top: 200rpx;
    margin-bottom: 40rpx;
  }
  .no-text {
    font-size: 16px;
    color: #ccc;
    display: block;
  }
  

  4. tabBar页面

  这里我们已经完成了logs页面，但是它的入口在哪里呢？不要急，我们现在把home页改改，改成tabBar页面。

  app.json

   

    "tabBar": {
      "color": "#666666",
      "selectedColor": "#3cc51f",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "list": [
        {
          "pagePath": "pages/home/home",
          "iconPath": "image/icon_component.png",
          "selectedIconPath": "image/icon_component_HL.png",
          "text": "答题"
        },
        {
          "pagePath": "pages/logs/logs",
          "iconPath": "image/icon_API.png",
          "selectedIconPath": "image/icon_API_HL.png",
          "text": "记录"
        }
      ]
    }
  

  首先在app.json里配置tabBar参数。图片放在和pages同级的image文件夹中。

  在index.js中，使用 wx.switchTab 跳转到tabBar页。

   

  // index.js
  bindViewTap: function() {
      wx.switchTab({
        url: '../home/home'
      })
  }
  

  效果

  

  

  Gitee源码地址

  答题类微信小程序完整源码

  end.

   

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^