微信小程序

几年前第一次听说微信小程序，我就知道会大火，果然。。。

emmm，最近又开始重新做点东西了，买了服务器，买了域名

如下文件结构表（简直我等小白必备啊）、首页（不要在意界面丑的那些细节，等熏陶了自己的审美之后慢慢改）：

如下为界面：

  
    
      
        
        
      
    
  
  
  
    
  

  
  精选推荐
  
  
      
        
        {{item.vfname}}
        {{item.vfjinge}}
      
      
  
  
  
  最新求购
  
  
    
      
    
    
      {{item.user}}
      {{item.phone}}
      {{item.email}}
      {{item.address}}
    
   

  
  

样式（虽然还要改，但是先贴上也可）：

/* 清除浮动 */
.clear{
  clear:both;
}

/**index.wxss**/
/* 整体页面设置 */
.index{
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  font-size: 24rpx;
}
/* banner图充满界面 */
.slide-image{
  width: 100%;
}
/* 搜索按钮 */
.search {
  width: 90%;
  height: 60rpx;
  background-color: white;
  border: 1rpx solid rgb(224, 213, 213);
  border-radius: 10rpx;
  margin: 20rpx auto;
  padding-left: 10rpx;
  padding-top: 10rpx;
}
/* 精选推荐 最新求购 按钮 */
.urlclass{
  width: 90%;
  height: 60rpx;
  text-align: center;
  /* border: 1rpx solid red; */
  margin: 20rpx auto;
  padding-top: 18rpx;
  background-color: #acc;
}
/* 精选推荐 最新求购 按钮点击样式 */
.listsell-hover {
  /* color:blue; */
  background-color: #fff;
}

/* 精选推荐总 */
.imgview{
  width: 100%;
}
/* 精选推荐 */
.imgviewo{
  width: 17%;
  margin: 10rpx 4%;
  border-radius: 10rpx;
  float: left;
}
/* 精选推荐-图片 */
.imgimg{
  width: 100%;
  border: 1rpx solid rgb(218, 215, 215);
  border-radius: 20rpx;
}
/* 精选图片文字说明 */
.imglabel{
  display: block;
  width: 100%;
  margin: 10rpx;
}
/* 菜价 */
.imglabelmon{
  width: 100%;
  font-size: 20rpx;
}

/* 卖家发布信息 */
.buyview{
  width: 100%;
}
.buylistview{
  width: 92%;
  margin: 10rpx auto;
  /* border-bottom: 1rpx solid red; */
}
.buyimg{
  width: 20%;
  float: left;
  margin-left: 5rpx;
  border: 1px solid rebeccapurple;
  border-right: none;
  border-radius: 10rpx;
}
.buycontent{
  width: 70%;
  float: left;
  margin: 15rpx 4%;
}
.buymsg{
  display: block;
  width: 100%;
}

js如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      '/image/1.jpg',
      '/image/2.jpg',
      '/image/3.jpg'
    ],
    // 显示面板指示点
    indicatorDots: true,
    // 是否自动切换
    autoplay: true,
    // 自动切换事件间隔
    interval: 5000,
    // 滑动动画时长
    duration: 1000,
    vefrdata:{},
    userdata:{},
  },

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

// 蔬果列表
  listvefr : function(){
    var page = this;
    wx.request({
      url: 'https://api.huxinai.com/vefreight.php',
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log('调用接口');
        console.log(res.data);
        page.setData({
          vefrdata: res.data
        })

      }
    })
  },

  // 用户列表
  listuser:function(){
    var page = this;
    wx.request({
      url: 'https://api.huxinai.com/usereight.php',
      header: { 'content-type': 'application/json'},
      success(res){
        page.setData({
          userdata: res.data
        })
      }
    })
  },

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

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

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

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

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

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

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