Build a Simple WeChat Mini Program News List in Minutes

Below we create a very simple Mini Program (list news, click title to view details) to experience the development approach.

There are two pages: a list page and a detail page.

Through this example you can learn:

How to obtain data in the view.

How to add a page.

How pages navigate and pass parameters.

How to control view styles.

Main Steps

1. Create Project

Mini Program development tool download address:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364

Open the tool and select “Add Project”. If you have no AppID, click No AppID ; functionality will be limited mainly for API calls, but view development is unrestricted.

2. Prepare Test Data Set

If you want to fetch data from your own server, you must add the domain in the Mini Program configuration on the public platform.

Since I cannot set this, I use fake test data by creating a data file in the project root. data.js The content format is:

module.exports = [
    {
        image: '...',
        title: '...',
        content: '...'
    },
    ...
]

This is a JSON array where each item contains a news image, title, and content.

Import the test data in app.js:

// app.js

var newsdata = require('data.js');
App({
  globalData:{
    data:newsdata
  }
})

3. List Page Logic and View

pages/index/index.js

// Get the app object
var app = getApp()

Page({
  data: {
    // Retrieve global data and set it to the page's data object
    news: app.globalData.data
  }
})

pages/index/index.wxml

<view class="news_item" wx:for="{{news}}">
  ...
  {{item.title}}
  ...
</view>

The outer wx:for="{{news}}" iterates over the news array, allowing the view to directly access data set in the Page object.

Inside the loop, {{item.title}} fetches the title of the current item; item is the default object representing each entry.

4. Create Detail Page and Add to Configuration

Create a detail directory under pages with three files: detail.js (logic), detail.wxml (view), and detail.wxss (styles).

└── pages
    ├── detail
    │   ├── detail.js
    │   ├── detail.wxml
    │   └── detail.wxss

After adding the page, update app.json to include it (omit file extensions):

{
  ...
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  ...
}

5. Navigate to Detail Page on Title Click

Navigation is achieved with the navigator component.

pages/index/index.wxml

...
<navigator url="../detail/detail?index={{index}}">
  <view class="title">{{item.title}}</view>
</navigator>
...

This works like an HTML a link; the query string after ? passes the index parameter (the loop index) to the detail page.

6. Detail Page Retrieves and Displays the Selected News

pages/detail/detail.js

var app = getApp() // obtain app object
Page({
  onLoad: function (options){
    // Get the passed parameter
    var news_index = options.index;

    // Retrieve the target data from the data set and set it to the page's data
    this.setData({
      news : app.globalData.data[news_index]
    });
  }
})

The setData method is crucial for updating the page's data object.

pages/detail/detail.wxml

<view class="title">{{news.title}}</view>
<view class="content">{{news.content}}</view>

Demo Code Download

This small example is suitable for beginners. The main parts of the code are shown above; to obtain the full source, send the message ‘ 02 ’.