小程序---引用本地js的json数据

最新推荐文章于 2025-05-23 14:51:24 发布

小水91

最新推荐文章于 2025-05-23 14:51:24 发布

阅读量1.4w

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lsy__lsy/article/details/80417560

本文介绍了一个关于小程序中数据绑定的基本实现方式及其在页面加载过程中的应用。具体包括了如何通过 posts-data.js 文件来组织数据，如何在 post.js 中进行数据绑定，以及如何在 post.wxml 文件中展示这些数据。

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

1、posts-data.js

var local_database = [...

]

module.exports = {    //数据暴露出去
    postList: local_database
}

2、数据绑定post.js

  var postsData=require('../../data/posts-data.js');  //引入

  data: {  //小程序总是会读取data对来做数据绑定，这个动作我们称为
           //动作a,而这个动作A是在load事件执行之后发生的 
  },
  /**
   * 生命周期函数--监听页面加载 页面初始化  on开头的函数监听函数
   */
  onLoad: function (options) {
    //this.data.postList =postsData.postList;   //数据绑定的两种方法  不建议使用 
    this.setData({posts_key:postsData.postList});  //如果是异步操作赋值那么必须用this.setData
  },

3、显示post.wxml

<block wx:for="{{posts_key}}"  wx:for-item="item"> 
  <view class='post-container'>
    <view class='post-author-date'>
        <image src='{{item.avatar}}'></image>
        <text>{{item.author}}</text>
    </view>
    <text class='post-title'>{{item.title}}</text>
    <image class='post-image' src='{{item.imgSrc}}'></image>
    <text class='post-content'>{{item.content}}</text>
    <view class='post-like'>
        <image class='view' src='/images/view.png'></image>
        <text class='view-txt'>92</text>
        <image class='collect' src='/images/star.jpg'></image>
        <text class='collect-txt'>65</text>
    </view>
   </view>
  </block> 