TP5+小程序开发简单示例

<?php
/**
 * User: may
 * Date: 2019/1/8
 * Time: 下午3:37
 */
namespace app\api\controller;

use think\Controller;

class Index extends Controller{


    public function banner(){
        $data=array(
            'http://tp5.test.com:7888/static/images/littlecodeimages/index.jpg',
           'http://tp5.test.com:7888/static/images/littlecodeimages/index2.jpg',
            'http://tp5.test.com:7888/static/images/littlecodeimages/index3.jpg',
            'http://tp5.test.com:7888/static/images/littlecodeimages/index4.jpg'
        );
        return json_encode($data);
    }

    public function index(){
        $data=array(
            array('logo'=>'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文件如下

<!--pages/index/home.wxml-->

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  indicator-dots="true"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

<view class='items-list'>
    <view class='pro-item' wx:for="{{proList}}"  bindtap='toDetail' data-index='{{index}}'>
      <image class='pro-logo' src='{{item.logo}}'></image>
        <view class='pro-body'>
          <view class='pro-title'>{{item.title}}</view>
          <text class='pro-des'>{{item.des}}</text>
          <view class='pro-footer'>
          <image src='{{item.detail}}' class='btn-detail'></image>
         
          <button open-type='contact' class='btn-ask'> <image src='/images/ask1.png'/></button>
          </view>
        </view>
    </view>
</view>
<button bindtap='copy'>复制文字</button>

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,
        })
      }
    })
  }
  
  })

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