TP5+小程序开发简单示例

'http://tp5.test.com:7888/static/images/littlecodeimages/logo.png','detail'=>'http://tp5.test.com:7888/static/images/littlecodeimages/detail.png','title'=>'标题的文字','des'=>'这是我付钱设计师结束时间'),
            array('logo'=>'http://tp5.test.com:7888/static/images/littlecodeimages/logo2.png','detail'=>'http://tp5.test.com:7888/static/images/littlecodeimages/detail.png','title'=>'新闻标题2','des'=>'这飒飒飒飒21212121'),
            array('logo'=>'http://tp5.test.com:7888/static/images/littlecodeimages/logo3.jpg','detail'=>'http://tp5.test.com:7888/static/images/littlecodeimages/detail.png','title'=>'就介绍介绍就','des'=>'这些都是描述啦啦啦啦啦'),
        );

        return json_encode($data);
    }
}

先在TP5中准备好接口数据,

 

 

 

 

小程序开发,在index.js文件使用接口数据,先替换列表页数据,具体如下

home.wxml文件如下

  
    
      
    
  



    
      
        
          {
    {item.title}}
          {
    {item.des}}
          
          
         
           
          
        
    

复制文字

home.js具体文件

// pages/index/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls:null,
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    proList: null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.setData({
      test:'01',
    }),
      this.getImgUrls();
      this.getProList();
  },
    toDetail: function(e){
      console.log(e);
      var index=e.currentTarget.dataset.index;
      var proList=this.data.proList;
      var title=proList[index].title;
      console.log(index);
      console.log(title);

      wx.navigateTo({
        url: '/pages/detail/detail?index='+index+'&title='+title,
      })
     
    },
    copy: function () {
      if(wx.setClipboardData){
      wx.setClipboardData({
        data: '这是我要复制的内容,啦啦啦嘎嘣脆2019.1.8',
        success(res) {
          wx.getClipboardData({
            success(res) {
              console.log(res.data) // data
              wx.showModal({
                title: '复制成功',
                content: '内容复制成功',
              })
            }
          })
        }
      })
      }else{
        wx.showModal({
          title: '提示',
          content: '你的微信版本太低,请先升级!',
        })
      }
    },
    getProList: function () {
      var self=this;
      wx.request({
        url: 'http://tp5.test.com:7888/api/index/index',
        method: 'GET',
        success: function (res) {
          console.log(res);
          self.setData({
            proList: res.data,
        })
        }
      })
    },
  getImgUrls: function () {
    var self = this;
    wx.request({
      url: 'http://tp5.test.com:7888/api/index/banner',
      method: 'GET',
      success: function (res) {
        console.log(res);
        self.setData({
          imgUrls: res.data,
        })
      }
    })
  }
  
  })

 

替换后效果如下,点击详情也后效果

 

 

小程序demo下载地址,公简单易懂,仅供学习使用

https://download.csdn.net/download/resilient/10904224

技术点:

包括首页banner轮播图

列表数据循环输出