WeChat mini-Program Development diary -- high imitation zhihu daily (below), high imitation of Program Development

Small Program Development diary-high imitation zhihu daily (lower), high imitation of Program Development

I have a special liking for zhihu daily. I read my blog and github and wrote several zhihu daily apps of different technical types.

To do a small program, you must firstHtml,Css,JsHave a certain degree of foundation, and be familiar with small program APIs.

I will divide this tutorial into the following three parts:

Different components and functional blocks

This article is about

• Daily Topic report
• My favorites
• Set
• Image Correction

Daily Topic report

The style of the topic daily report is almost the same as that of the homepage. The difference is that there is an additional line of editing area. However, the editor-in-chief area does not provide any functions. I used to click the editor-in-chief's avatar to jump to the editor's personal homepage introduction. I don't need to do it if I don't have time to schedule it. This also requires parsing html (tired ), therefore, you can share a page with the homepage Based on the topic id. If it is a daily topic report, replace swiper on the top with image, and display the editor information.

The topic daily report list needs to accept a specific topic daily report id. Based on this id, the interface is requested to obtain the daily report list of the topic daily report.
Click the corresponding topic to trigger this method. Load the data and collapse the slide menu.

toThemePage: function( e ) {    var _this = this;    _this.setData( { loading: true,themeId:e.currentTarget.dataset.id });    console.log( 'themeId',  _this.data.themeId );    requests.getThemeStories( _this.data.themeId, ( data ) => {    data.background=data.background.replace("pic1","pic3");    data.background=data.background.replace("pic2","pic3");    for(var i=0;i<data.editors.length;i++){      data.editors[i].avatar=data.editors[i].avatar.replace("pic1","pic3");      data.editors[i].avatar=data.editors[i].avatar.replace("pic2","pic3");    }    data=utils.correctData(data);    _this.setData( {      pageData: data.stories,      background: data.background,      description: data.description,      editorData: data.editors    });    slideDown.call( this );  }, null, () => {      _this.setData( { loading: false });    });  },The request list of the topic daily report is similar to that of the home page. Because no paging parameter is found, the daily report list of the topic daily report does not contain paging requests. The topic daily report details page is displayed.

Add to favorites page

The favorites page only contains the following list items, so it also shares the homepage page. Based on the topic daily report, you can judge whether the top picture and editor information are not displayed on my favorites page.
Click my favorites to trigger the following method:

toCollectPage: function( ) {    var _this = this;    _this.setData( { themeId:-1});    var pageData = wx.getStorageSync('pageData') || []    console.log(pageData);    _this.setData({      themeId:-1,      pageData:pageData    })    slideDown.call( this );  },

Settings page

I originally wanted to set the functions listed on the page, but I was busy with work. I 'd like to add them to the improvement plan below. At this stage, I only made a simple page layout.

But let's talk about our own ideas.
-The night mode is to change the display style of the application. With css, we can place a top-level view in the page to include all the wxml elements, when a topic is switched, a topic control class is assigned to the top-level elements of the page.

<view class="light">    ....</view><view class="night">    ...</view>

How can the skin change take effect immediately? When a page is startedonLoad、onShowAnd so on.onLoadThe event will not be triggered once, but will be triggeredonShowEvent, we canonShowEvent to obtain the theme settings that exist in the global cache.

onShow: function() {    var app = getApp();    this.setData({theme: app.globalData.theme});}

<view class="{{theme}}">    ...</view>

• To clear the cache, clear the temporary files and data in localStorage.

ClearDataEvent: function () {wx. clearStorage (); // clear application data}

• The application's no-Image Browsing mode is similar to the topic's idea, that is, to determine whether the settings in the application cache are in no-image mode. If yes, add a judgment when the content is displayed, determine whether to display the image content based on this value.

onLoad: function() {    var app = getApp();    this.setData({imageMode: app.getImageMode()});}

<View> <image wx: if = "{imageMode}" src = "..."/> <! -- Or --> <block wx: if = "{imageMode}"> <image src = "..."/> </block> </view>

Image Correction

If you use the image address provided by zhihu daily, for example:

http://pic1.zhimg.com//9e26ccbadca80e2e94f89d24b7ce6b04.jpg

Pictures of pic1 and pic2 cannot be normally displayed. This should be a bug in mini-program development tools, so we can only replace them with pic3 or pic4, later, I found that pic4 can be used to display the list of home pages and top images normally. pic3 can be used to display the edited Avatar normally. pic3 is also used to display the detailed page. I have created a new method to correct the Home Page image address, for others, just replace them at the corresponding position.

/*** Modify the image url and change pic1 and pic2 to pic4 * @ param data * @ returns {*} */function correctData (data) {if ("top_stories" in data) {var top_stories = data. top_stories; for (var I = 0; I <top_stories.length; I ++) {top_stories [I]. image = top_stories [I]. image. replace ("pic1", "pic4"); top_stories [I]. image = top_stories [I]. image. replace ("pic2", "pic4");} data. top_stories = top_stories;} var stories = data. stories; for (var I = 0; I <stories. length; I ++) {if ("images" in stories [I]) {var s = stories [I]. images [0]; s = s. replace ("pic1", "pic4"); s = s. replace ("pic2", "pic4"); stories [I]. images [0] = s;} data. stories = stories; return data ;}

Summary

• The code structure is poor, and is not optimized in many places. The reuse rate is low and needs to be reconstructed.
• The page layout is unreasonable and the size control is not good enough.
• Some wxml does not use the template function to replace repeated rendering tasks, and the reuse effect cannot be achieved.

Xianyu

The small program I wrote used a lot of knowledge points. Although it took a lot of time, everything was very worthwhile. The biggest difficulty encountered during the compilation process is parsing html content. It can be said that it is a battle of brains. Haha, there is not enough IQ. We are looking forward to providing better solutions for some netizens. This small example is simple, and many functions are not fully implemented. Compared with other people's Android and React imitation clients, this is a little dumb. You have to take the time to complete the subsequent functions.

So far, the applet has been updated several times and supports ES5/ES6 conversion, pull-down refresh events, file upload, and other functions, however, there are still many APIs that cannot be displayed in a simulated environment. I feel that I have always been doing something similar to Douban books and zhihu daily news, and it is not good to apply anything except network requests. I need to try new APIs to expand my horizons, in the future, we plan to create a case for unused APIs. I have been preparing for campus for four months without knowing it. I miss my previous study days and have done many cases, but I have no habit of writing or saving logs. I wrote a lot of words this time, but I am exhausted. We are lucky to be able to run into a small program storm when we first enter the work circle. We look forward to its official public Beta!

A complete effect dynamic diagram at the current stage

Source Code address: http://www.hotlist.com.cn/archives/189.html

If you like itStartInspire me to share better works with you in the future :)