[Practice of Mini Program] Imitate Sina News and simulate fake data with mockjs to achieve a big job

01 Preface

Last semester is the first semester of junior year

At the end of the big homework, I imitated Sina News to simulate this fake homework with mockjs

The bottom navigation bar has the following:
Insert picture description here
A rough introduction to each page:
Insert picture description here

02 Home-News-Rendering

Insert picture description here
Click here to see the details page. Pull
Insert picture description here
to the bottom to click the share function
Insert picture description here

03 Comment page-renderings

Insert picture description here
Click here to see the details page.
Insert picture description here
Similarly, pull to the bottom to click to share
Insert picture description here

04 Ranking page-renderings

Insert picture description here
Click to enter the details page
Insert picture description here
Insert picture description here

05 The key realization process

Create a new folder: api
writes the encapsulation method in it, and introduces it in the page that needs to be used.
Insert picture description here
Some source codes are as follows:

const events = require('../mocks/events.js')

//获取评论列表
//这里的函数里面取的就是mocks的数据
const getEventsList = () => {
  // const detail=news.find(e=>e.id===id);
  return events;
}
//获取评论详情
const getEventsDetail = (id) => {
  const detail = events.find(e => e.id == id);
  return detail;
}
module.exports = {
  getEventsList,
  getEventsDetail
}

Create a new folder: mocks
write fake data in it, call it in wsml to
dynamically obtain data
, import data in the page circularly, and display data in the detail page respectively
Insert picture description here
Insert picture description here
My tools
Insert picture description here
Insert picture description here

06 Directory structure

Insert picture description here
Insert picture description here

Published 252 original articles · Like 106 · Visits 30,000+

Guess you like

Origin blog.csdn.net/weixin_42554191/article/details/105524244