微信小程序详细页面的实现

先附上详细页面的图片：
列表页面的显示：

详细页面的显示：

代码部分：
因为我使用mysql和小程序连接的，所以链接代码为：

'配置值'
     //'配置项'=>'配置值'
	'TMPL_PARSE_STRING'=>array(
    'DB_TYPE'   => 'mysql', // 数据库类型
    'DB_HOST'   => 'localhost', // 服务器地址
    'DB_NAME'   => '', // 数据库名
    'DB_USER'   => 'root', // 用户名
    'DB_PWD'    => '', // 密码
    'DB_PORT'   => '3306', // 端口
    'DB_CHARSET'=> 'utf8', // 字符集

      ),
);

order('id desc')->select();
	    // dump($list);
	    $this->ajaxReturn($list);
	}
	//获取数据库中对应id的数据
	public function test03(){
		$map['id']=I('id',1,'intval');
		$info=M('weixinmysql')->where($map)->find();
		// $info['ctime']=time_format($info['ctime']);
		$this->ajaxReturn($info);
	}


	
}

列表页面的index.js,从数据库中获取数据

Page({

  /**
   * index.js
   */
  data: {
    newsList:[
  
      
    ]
    
  },
  ChangePage:function(){
    wx.navigateTo({
      url: '../writing/writing',
    })
  },
  onLoad:function(){
    var that=this
    wx.request({
      url: 'http://localhost/weixin/Admin/Test/test02',
      header:{
        'Content-Type':"application/json"
      },
      success:function(res){
        console.log(res.data)
        that.setData({
          newsList:res.data
        })
      }
    })
   }
 
})

列表页面的index.wxml

详细页面的detail.wxml

  
    {{info.title}}
    {{info.ctime}}
    {{info.content}}
  

  
    
  

详细页面的detail.js

// pages/detail/detail.js
var app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:{}
  },
  onLoad:function(options){
    var that=this
    wx.request({
      url: 'http://localhost/weixin/Admin/Test/test03',
      data:{id:options.id},
    
      header:{
          'Content-Type':'application/json',
      },
      success:function(res){
        that.setData({
          info:res.data
        })
      }
    })
    console.log(options);
  }


})