微信小程序生成详情内容页 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;
}
}
结束!
类似这样的(磕碜点.. 哈哈哈):