百度小程序使用在线Web IDE工具简单的布局及列表循环展示数据功能

微信(小程序)  /  管理员 发布于 3年前   1250

偶然间点进来的，在加上看到Web IDE这个工具：

Web IDE 无需安装随时进行百度小程序的开发、调试、预览、发布小程序。并支持 git 、效率云等版本管理功能。

它说无需安装软件直接开发，相当于直接在服务器上给你开了个文件夹了

用了一下还真是挺方便的，特别是简单的单页展示功能，如果要求不多的话分分钟搞出来

我今天就简单搞个列表展示功能 测试了 

百度小程序账号开通啊 啥的 自行查阅手册吧 这里就不多说了

工具：

Web IDE

https://ide.smartprogram.baidu.com/

进入后点击新建项目 如图：

新建文件夹pages/index 如图：

简单的搞个布局，头部 中间 尾部 直接贴代码

pages/index/index.css代码：

.hearder {
    height: 300rpx;
}
.hearder-title {
    padding-left: 10rpx;
    line-height: 50rpx;
    font: 30rpx;
    color: red;
}
.h-fgx{
    width: 100%;
    height: 15rpx;
    background: #eee;
}
/* 中间 */
.center {
    height: 500rpx;
}
.center-title {
    padding-left: 10rpx;
    line-height: 50rpx;
    font: 30rpx;
    color: rgb(61, 211, 106);
}
.liebiao {
    height: 100rpx;
    border: 1px solid rgb(175, 161, 161);
    padding: 5rpx;
}
.liebiao-title {
    line-height: 50rpx;
    font-size: 28rpx;
}
/* 尾部 */

pages/index/index.json代码 （头部标题啥的）

{
    "navigationBarTitleText": "小程序测试demo"
}

pages/index/index.js代码

定义一个testArr用来存放循环的数据，这里先写死数据，下一篇在调后端接口

const app = getApp();

Page({
  data: {
  
    testArr: []
    
  },
  onPageScroll: function (e) {
  },
  contactCB(e){
    console.log(e)
  },
  
  onLoad: function () {
     this.testArr();
  },
  
  testArr() {
    let _this = this;
    _this.setData({
        testArr: [{"name":'测试循环name',"adds":'地址'},{"name":'测试循环name2',"adds":'地址2'}]
      });
    console.log("test", [{"name":'测试循环name',"adds":'地址'},{"name":'测试循环name2',"adds":'地址2'}]);
    
    这里就是调用后端接口的方法 后面的文章在介绍
    // app.requireApi.get('/api/XX').then(res => {
    //   _this.setData({
    //     testArr: res
    //   });
    //   console.log("XX", res);
    // });
  }
});

打印出来看看：

整体效果：

下一篇介绍小程序调后端接口，编写全局get，post函数