1. 程式人生 > >微信小程式生成詳情內容頁 Thinkphp後臺呼叫資料庫

微信小程式生成詳情內容頁 Thinkphp後臺呼叫資料庫

列表頁連結加上產品ID,如下:

<navigator url="../goods/goods?goods_id={{item.goods_id}}" ></navigator>

wxml頁面: 

<!--pages/goods/goods.wxml-->
<scroll-view scroll-y="true">
  <view class="meta">
    <image class="poster" mode="aspectFit" src="{{imgurl}}{{goods.goods_big_img}}" ></image>
    <text class="title">{{goods.goods_name}}</text>
    <text class="info">價格:{{goods.goods_price}}</text>
    <text class="info">數量:{{goods.goods_number}}</text>
    <text class="info">時間:{{goods.goods_create_time}}</text>
  </view>
  <view class="summary">
    <text class="label">商品描述:</text>
    <text class="content">{{goods.goods_introduce}}</text>
  </view>
</scroll-view>

js頁面:

// pages/goods/goods.js
const app = getApp()
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    imgurl: "https://cs.xxxxxx.com/shop/",
    goods: []
  },

  
  /**
   * 生命週期函式--監聽頁面載入  goods_id: params.goods_id
   */
  onLoad: function (params) {
    wx.showToast({
      title: "載入中..",
      icon: "loading",
      duration: 10000
    });
    var that = this;
    console.log(params);
    wx.request({
      url: "https://cs.xxxxxx.com/shop/index.php/Home/Goods/detailjson/goods_id/" + params.goods_id,
      data: {},
      header: {
        'content-type': 'json' // 預設值
      },
      success: function (res) {
       // console.log(res.data.info);
        wx.hideToast();
        that.setData({
          goods: res.data.info
        })
      },
     
    })
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxss頁面(隨便寫的可以忽略):

/* pages/goods/goods.wxss */
.meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500rpx;
  padding: 50rpx 40rpx;
}
.title {
  font-size: 34rpx;
  color: #444;
}

.info {
  font-size: 30rpx;
  color: #666;
  margin-top: 20rpx;
  width: 80%;
}

.summary {
  width: 80%;
  margin: 30rpx auto;
}

.label {
  display: block;
}

.content {
  color: #666;
  font-size: 20rpx;
  padding: 10rpx
}

Thinkphp後臺(3.2.3):

public function detailjson(){
			
			S(array('prefix'=>('detailjson'.I('goods_id'))));
			if(!S('detailjson')){
			$goods = D('Goods');
			$info = $goods -> find(I('goods_id'));

			$data['info']=$info;
			S('detailjson',$data,300);//300秒  5分
			dump($this->ajaxReturn($data,'json'));
			exit;
			}else{
				dump($this->ajaxReturn(S('detailjson')));
			exit;
				
			}
			
		}

結束!

類似這樣的(磕磣點.. 哈哈哈):