本文共 1113 字，大约阅读时间需要 3 分钟。

1.先写静态页面，使用静态数据设计好样式。将要测试的页面放在app.json的pages首个路径，方便运行查看效果。

wxml:

     
        
     姓名：    
     小明  
      
        
     班级：    
     一（8）班  
      
        
     学号：    
     666  
    
   

wcss:

page{  background-color: #f0f0f0;}.container{  margin: 20rpx;  background-color: white;}.item{  padding: 10rpx;  flex-direction: row;  display: flex;  line-height: 80rpx;  border-bottom: 1rpx solid #f0f0f0;}

运行结果：

2.样式设计好后，将静态数据换成动态数据。这里用本地数据库模拟request请求返回的数据进行渲染。

（1）新建data文件夹，创建students.js作为本地数据库

var local_database = [  {    username:"小红",    classname:"三（8）班",    Sno:"777"  }]module.exports = {  studentsList: local_database}

（2）在要获取本地数据库的js中引入students.js文件：

var postsData = require('../../../data/students.js')

在onLoad函数中获取本地数据库里的数据：

onLoad: function (options) {    this.setData({      studentsList: postsData.studentsList    });    console.log(this.data.studentsList);  },

获取后的打印结果为：

（3）在wxml文件中动态渲染数据：

     
        
           
      姓名：      
      {
  {items.username}}    
         
           
      班级：      
      {
  {items.classname}}    
         
           
      学号：      
      {
  {items.Sno}}    
       
    
   

运行结果：

转载地址：http://llssi.baihongyu.com/