小程序如何实现数据与逻辑分离

Posted 2020-10-10

　　看过前面的文章的童鞋都知道，前端开发使用的是假数据去渲染页面，从而实现前后端分离。在小程序中，我们的数据与JS脚本混合在一起，意味着我们的逻辑和数据代码都混在一起了，这是非常不好的，实现数据与逻辑分离是非常有必要

　　下面，来看看小程序如何实现数据与逻辑分离：

1.新建一个JS脚本，把在原来JS脚本混合一起的数据截切到新建的脚本

　　

var local_database = [

{

date: ‘OCT 12 2016‘,

title: ‘葉秋月‘,

imgSrc: ‘/image/post/crab.png‘,

avatar: ‘/image/avatar/1.png‘,

img_condition: true,

content: ‘《你的名字。》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影‘,

reading: ‘9999‘,

collection: ‘9999‘

},

]

 

2.把这些数据（module）暴露出去(类似nodejs)

module.export={

　　postList:local_database;

}

3.在需要用数据的JS脚本中require module;

var postsData=require(‘../../data/posts-data.js‘);

 

4.设置数据

this.setData({

//使用postData中的数据

postList: postsData.postList

});

此时在wxml中postList就是数组的名称了，使用for语句即可使用数组数据。

<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="index">