WeChat applets (Application Numbers) Develop news client instances and mini program instances

Small Program (application number) Development News client instance, small program instance

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:

Paste_Image.png

1. Create an application

1. for developers without an internal test number, click AppId.

Paste_Image.png

2. Select a local directory as the project directory.

Paste_Image.png

3. If the project name is arbitrary, set the Directory and check the current directory to create a quick start Project.

Paste_Image.png

4. Click "add project" to display the running results. Is your personal information and a HelloWorld text box.
5. There are two warnings in the debugging window on the right, which are caused by the absence of AppID. You can ignore them temporarily without affecting development.

Paste_Image.png

6. tip: In the app. set debug: true in json, so that the console can view Real-time interaction information and set breakpoints in js files in the future, similar to debugging tools with Chrome and Firebug of Firefox.

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 you need to use the aggregated data of the news interface, go to: https://www.juhe.cn/docs/api/id/235 registration, application interface, get key, I have applied for a key here: 482e213ca7520ff1a8ccbb262c90320a, you can take it directly for testing, then you can integrate it into your own application.

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:

Paste_Image.png

It indicates that data has been obtained successfully.

3. Rendering data in json format to the view

The swipe component is used to achieve big picture carousel here, see: https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
1. Clear the original index. wxml content and add the following code:

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{topNews}}"> <swiper-item>  <image src="{{item.thumbnail_pic_s02}}" class="slide-image" width="355" height="150"/> </swiper-item> </block></swiper>

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:

<view class="news-list"> <block wx:for="{{techNews}}"> <text class="news-item">{{index + 1}}. {{item.title}}</text> </block></view>

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;}

The text list is also in the format of thumbnail + title + Source + date.

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

<!--index.wxml--><swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{topNews}}"> <swiper-item>  <image src="{{item.thumbnail_pic_s02}}" mode="aspectFill" class="slide-image" width="375" height="250"/> </swiper-item> </block></swiper><view class="container news-list"> <block wx:for="{{techNews}}"> <view class="news-item">  <image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/>  <view class="news-text">  <text class="news-title">{{item.title}}</text>  <view class="news-stamp">   <text>{{item.author_name}}</text>   <text>{{item.date}}</text>  </view>  </view> </view> </block></view>

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/framework/view/wxml/event.html

Transfer value to details page

<! -- Logs. wxml --> <view class = "container"> <text class = "news-title" >{{ title }}</text> <text class = "news-info"> currently, the WebView Component Interface cannot be found, therefore, webpage data cannot be loaded </text> </view> // event processing function 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 })}

<! -- Index. wxml --> // Add the data-xxx element to pass the value <view class = "container news-list"> <block wx: for = "{techNews }}"> <view class =" news-item "data-news-title =" {item. title }}" bindtap = "bindViewTap"> <image src = "{item. thumbnail_pic_s} "mode =" aspectFill "class =" list-image "/> <view class =" news-text "> <text class =" news-title "> {{ item. title }}</text> <view class = "news-stamp"> <text >{{ item. author_name }}</text> <text >{{ item. date }}</text> </view> </block> </view>

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
  }
})

Paste_Image.png

The WebView component is not found in the official document, so the webpage body of the details cannot be implemented for the time being.

Conclusion

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!