微信小程序（一）代码的编写顺序：先静后动

最新推荐文章于 2024-04-29 15:25:04 发布

Skye Lin

最新推荐文章于 2024-04-29 15:25:04 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/skye_95/article/details/96897878

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在小程序中从静态页面过渡到动态数据渲染的过程。首先使用静态数据完成页面样式设计，然后通过本地数据库模拟API请求返回的数据进行动态展示。文章详细展示了如何创建本地数据库、在JS文件中获取数据并动态渲染到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

wxml:

<view class='container'>
  <view class='item'>
    <label class='labelname'>姓名：</label>
    <label class='labeldata'>小明</label>
  </view>
  <view class='item'>
    <label class='labelname'>班级：</label>
    <label class='labeldata'>一（8）班</label>
  </view>
  <view class='item'>
    <label class='labelname'>学号：</label>
    <label class='labeldata'>666</label>
  </view>
</view>

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文件中动态渲染数据：

<view class='container'>
  <block wx:for="{{studentsList}}" wx:for-item="items" wx:for-index="index">
    <view class='item'>
      <label class='labelname'>姓名：</label>
      <label class='labeldata'>{{items.username}}</label>
    </view>
    <view class='item'>
      <label class='labelname'>班级：</label>
      <label class='labeldata'>{{items.classname}}</label>
    </view>
    <view class='item'>
      <label class='labelname'>学号：</label>
      <label class='labeldata'>{{items.Sno}}</label>
    </view>
  </block>
</view>

运行结果：