Use WeChat applets (app numbers) to develop news client instances

This article mainly introduces the relevant information about the development of news client instances by using mini programs (application numbers). If you need it, refer to the following article to introduce mini programs (application numbers) for more information about how to develop news client instances, see

Download the latest mini-program development tool, which is currently v0.9.092300

: Https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

Official documents: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

Git: http://git.oschina.net/dotton/news

Let's take a look at it first:

About homepage configuration:

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "debug":true}

The pages attribute indicates the existence of each page. The first page is the homepage, that is, pages/index.

2. Request Network API

1. prerequisites:

Here we need to use the news interface for aggregating data.

2. use a applet interface to access the network:

Rewrite the index. js file:

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {// network interface for accessing aggregate data wx. request ({url: 'http: // v.juhe.cn/toutiao/index', data: {type: '', key: '482e213ca7520ff1a8ccbb262c90320a'}, header: {'content-type ': 'application/json'}, success: function (res) {console. log (res. data)}) console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo })})}})

3. view the results and check the Console to obtain the following information:

The swipe component is used for big Image carousel. For more information, see routing:

2. add the following code to the onLoad method of the index. js file to obtain network data.

// Index. js // Obtain the application instance var app = getApp () Page ({data: {topNews: [], techNews: []}, onLoad: function () {var that = this // network interface for accessing aggregated data-Toutiao news wx. request ({url: 'http: // v.juhe.cn/toutiao/index', data: {type: 'topnews', key: '482e213ca7520ff1a8ccbb262c90320a'}, header: {'content-type ': 'application/json'}, success: function (res) {if (res. data. error_code = 0) {that. setData ({topNews: res. data. result. data})} else {console. log ('retrieval failed ');}}})}})

3. the carousel has been successfully displayed.

Paste_Image.png

4. Read the list news with the same operation as the image gourd:

  
   
   
    {{index + 1}}. {{item.title}}
    
  
 

In combination with the style sheet, otherwise the text layout of the list is horizontal. add the following css to index. wxss:

.news-list { display: flex; flex-direction: column; padding: 40rpx;}.news-item { margin: 10rpx;}

Paste_Image.png

Style Sheet and layout file index. wxss

/**index.wxss**/.news-list { display: flex; flex-direction: column; padding: 40rpx;}.news-item { display: flex; flex-direction: row; height:200rpx;}.news-text { display: flex; flex-direction: column;}.news-stamp { font-size: 25rpx; color:darkgray; padding: 0 20rpx; display: flex; flex-direction: row; justify-content:space-between;}.news-title { margin: 10rpx; font-size: 30rpx;}.container { height: 5000rpx; display: flex; flex-direction: column; align-items: center; justify-content: space-between; /*padding: 200rpx 0;*/ box-sizing: border-box;}.list-image { width:150rpx; height:100rpx;}

Index. wxml

 
  
   
     
     
    
  
 
  
   
     
      
      
     
      {{item.title}}
       
        
      
       {{item.author_name}}
         
      
       {{item.date}}
        
       
     
    
  
 

4. jump to the details page and pass value

Save the title in the news entry information for the current click, see the official documentation: https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

Transfer value to details page

 
  
  
   
{Title }}
   
  
   
Currently, the WebView component interface cannot be found, so webpage data cannot be loaded.
  
 // BindViewTap: function (event) {wx. navigateTo ({url: '../detail? Title = '+ event. currentTarget. dataset. newsTitle})} // index. js // bindViewTap: function (event) {wx. navigateTo ({url :'.. /detail? Title = '+ event. currentTarget. dataset. newsTitle })}

 // Add the data-xxx element to pass the value
  
   
     
      
      
     
      
{Item. title }}
       
        
      
        {Item. author_name }}
         
      
        {Item. date }}
        
       
     
    
  
 

Of course, you can also pass the value by obtaining global variables. the scenario here is that a page has a one-to-one value transfer relationship with the child page, so it is not recommended, you can refer to the value transfer method of personal information in quickStart. Add at the end of app. js

 globalData:{    userInfo:null,    newsItem:null  }})

The overall development process is quite comfortable and difficult to get started. CSS syntax is used in the process, which essentially reflects an H5 development mode. WXML is essentially a template label language.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more articles about how to develop news client instances for small programs (application numbers), please follow the PHP Chinese network!