最近在尝试做一个食堂月度评估反馈的小程序,用来收集大家的评估反馈,里面涉及到一页查看反馈详情的功能,这里就需要用到跳转并传值,主要功能就是用来让详情页读取列表页传过来的值,然后根据这个值,来从数据库查询到想要的详情清单,直接上代码:
首先,就是列表页,这里就不放代码了,直接假定我们已经读取到数据库数据,并以列表的形式展现出来,列表中有一个是“myid”的值,是数据自动添加的编号,因为他的唯一性,所以我用来作为传送的值(可以改成其他的值),添加如下代码到列表页.wxml中:
1 |
<view class="showaqdetails" id="{{item.myid}}" bindtap="showaqdetails">查看详情</view> |
然后在列表页. js中,给bindtap绑定点击触发事件,读取当前 “myid”的值 ,并通过wx.navigateTo来跳转到详情页details
1 2 3 4 5 6 7 |
showaqdetails: function (e) { console.log(e) console.log(e.currentTarget.id) wx.navigateTo({ url: '/pages/details/details?myid=' + e.currentTarget.id, }) }, |
下面就是在details.js中,添加读取传过的值,并通过wx.request,把值传到后台PHP,然后通过PHP查询对应myid的数据,并最终返回到小程序中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
onLoad: function (option) { var that = this; console.log() that.setData({ myid: option.myid //接收读取列表页传过来的值 }) wx.request({ url: 'https://yourwebsite/showdetails.php?myid=' + option.myid, //连接服务器从表中查询的接口 data: { }, header: { 'content-type': 'application/json' }, success: function (res) { console.log(res.data) that.setData({ fbdetails: res.data.fbdetails,//将表中查询出来的信息传给list }) } }) }, |
最后就是在详情页details.xml中,前台显示想要的值
1 2 3 |
<view wx:for="{{fbdetails}}" wx:key=""> <view class="datetitle">日期:{{item.fb_date}}</view> </view> |
为了方便使用,最后Sham附上PHP后台代码,供参考:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php $servername = "localhost"; $username = "数据库名"; $password = "密码"; $mysqlname = "用户名"; $json = ''; $data = array(); class Fbdetails { public $myid; public $fb_date; } $conn = mysqli_connect($servername, $username, $password, $mysqlname); $myid =isset($_GET['myid'])?$_GET['myid']:''; $sql = "SELECT * FROM 具体数据库表 where myd='$myid' ORDER BY fb_date DESC""; $result = $conn->query($sql); if($result){ //echo "查询成功"; while ($row = mysqli_fetch_array($result,MYSQL_ASSOC)) { $fbdetails = new Fbdetails(); $fbdetails->myid= $row["myid"]; $fbdetails->fb_date= $row["fb_date"]; $data[]=$fbdetails; } $json = json_encode($data);//把数据转换为JSON数据. echo "{".'"fbdetails"'.":".$json."}"; }else{ echo "查询失败"; } ?> |
最新评论