Wechat applet news website details page

Ingenious application of extension operator

For this template template, the bound data is prefixed with item

 

When using a template, you must also ensure that it is an item

Data helps bind data to enclose item s with double curly braces

Wx: for item is also an item by default, so it can be omitted

 

 

With item s like this is not conducive to code reuse, solution:

Remove the item prefix from the template template

 

 

Then when using the template, add... (ES6 syntax) before data binding

 

The benefits are:

You can change the attribute value and data attribute value of Wx: for item (they must be consistent), but you do not need to change the data prefix in the template

 

Can still display normally

 

 

Custom properties and get properties of components

Create news detail page

 

 

Bind click events to news. Note that template and block can't bind events, so I wrap a view outside template, and then bind events on view

 

 

Define the function to jump to the news details page

 

 

You can see from the data that each news has its corresponding postId

 

 

Custom attribute for each news, pass postId

In an applet, the custom attribute must start with data -, otherwise it is invalid

 

You can see that the delivery has been successful

 

 

Using the event object of the applet to get the attributes of the element in js

posts.js

 

 

In currentTarget--dataset, custom attributes are stored

 

 

Add a knowledge point

If the custom property name you set is hyphenated

 

You can see that the actual structure is all lowercase, which is spliced with hyphens

 

 

In js, if the attribute is obtained through the event object, it will be converted to the hump form

 

 

Static before dynamic, style before data

In order to view the real-time effect conveniently, first set the news details page as the default page

 

 

 

So every refresh is this page

 

Now write the news detail page post-detail.wxml

 

<view class="container">
  <image src="/images/post/crab.png" class="head-image"></image>
  <view class="author-date">
    <image src="/images/avatar/3.png" class="avatar"></image>
    <text class="author">cyy</text>
    < text class = "const date" > published in < / text >
    < text class = "date" > 3 days ago < / text >
  </view>
  < text class = "title" > it's when the shrimp is fat and the crab is strong < / text >
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image src="/images/icon/share.png" class="share-img"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">
  Chrysanthemum yellow crab is fat, taste the taste of autumn. Xu Zhimo listed "seeing the first flowers of Dilu" and "eating crabs outside the building" as the elegant things that can't be missed when he comes to Hangzhou in autumn. In sister Lin's words, it's "the claws cover the delicate jade, both are full, the shell is protruding, the red fat and the block is fragrant"; in the new words of the world, Jin Bizhuo even exclaimed that "holding the wine cup in the right hand, holding the crab claws in the left hand, and photographing the floating wine boat will be enough for a lifetime." How can food and love live up to the long life? So as a foodie, I want to recall my taste buds. The autumn crabs in my memory are the flavor of my family and filled with deep affection. \n\n who comes from mountains, rivers, lakes and seas, but is confined to day and night, kitchen and love? It's a mother, thoughtful, intelligent and patient. Before eating crabs, I always take out a few tools, and I'm happy to do so. It tells us that when the crab is cold, it needs ginger tea to dispel the cold. In the rice vinegar saucer, ginger and perilla are also added, the former to dispel the cold and the latter to increase the fragrance. Make chrysanthemum tea, time is quiet, we are quiet and so on.
  </text>
</view>

 

post-detail.wxss

/* pages/posts/post-detail/post-detail.wxss */
.container{
  display: flex;
  flex-direction:column;
}
.head-image{
  width:100%;
  height:460rpx;
}
.author-date{
  display: flex;
  margin:20rpx 20rpx 0 30rpx;
  align-items:center;
}
.avatar{
  width:64rpx;
  height:64rpx;
}
.author{
  font-size:30rpx;
  font-weight:300;
  margin-left:20rpx;
  color:#666;
}
.const-date{
  font-size:24rpx;
  color:#999;
  margin-left:20rpx;
}
.date{
  font-size:24rpx;
  margin-left:30rpx;
}
.title{
  margin-left:40rpx;
  font-size:36rpx;
  font-weight:700;
  margin-top:30rpx;
  letter-spacing: 2rpx;
  color:#4b556c;
}
.tool{
  margin-top:20rpx;
}
.circle-img{
  display: flex;
  justify-content: flex-end;
  margin-right:40rpx;
}
.circle-img image{
  width:90rpx;
  height:90rpx;
}
.horizon{
  width:660rpx;
  height:1rpx;
  background-color: #e5e5e5;
  position: relative;
  bottom:45rpx;
  z-index:-99;
  margin:0 auto;/* Center the line horizontally */
}
.share-img{
  margin-left:30rpx;
}
.detail{
  color:#666;
  margin:20rpx 30rpx;
  line-height: 44rpx;
  letter-spacing: 2rpx;
}

 

Public styles can be written in app.wxss

text{
    font-family: MicroSoft Yahei;
    font-size: 24rpx;
    color: #666;
}

input{
    font-family: MicroSoft YaHei;
}

 

Set top text

 

 

 

 

 

 

Fill in the news details page with data

The postId has been obtained in posts.js. You can directly add parameters after the url to pass a small amount of data

Use & symbol division between multiple parameters

 

 

 

In the onload function of post-detail.js, you can use options to receive the passed parameters

 

 

 

 

 

 

Using require to import data files

Use id in onload function to get the required data and send it to data

 

 

 

Note that the data structure of all setData can be viewed in AppData of the console

 

 

 

Change the static data in post-detail.wxml to dynamic data

 

 

 

Design sketch

 

 

 

Basic usage of Storage cache

Collection function, which needs to be recorded by the server (now it can be temporarily replaced by cache)

 

 

 

In the console storage, you can view the cache

 

 

 

Binding event (role demonstration, non actual function)

 

 

 

Common cache operations (applet cache size cannot exceed 10M)

 

 

 

More usage or document searching

 

 

 

With sync is synchronous, without sync is asynchronous. Generally speaking, asynchrony is not easy to block, and synchronization is simpler

 

Using cache to realize the function of text collection

post-details.js

The effect of onload function is as follows:

Read the cache, send it to data if there is a cache, set to false if there is no cache, and update the cache

  onLoad: function (options) {

    var postId=options.id;
    this.data.postId = postId;//hold postId Send to data It is convenient to call in other functions (because there is no need for data binding, so there is no need to use them. setData)
    var pdata = postData.postList[postId];//postId Just the same as the data index, get the data of a single article
    this.setData({...pdata});//Send data to data in
   
    var postcollected = wx.getStorageSync("postcollected");//Read cache
    //Send to if cache exists data
    if (postcollected){
      var collected = postcollected[postId];//Single article cache exists
      if (collected){
        this.setData({collected});
      }
    }else{
      postcollected={};
      postcollected[postId]=false;
      //Set cache
      wx.setStorageSync("postcollected", postcollected);
    }
  },

 

The effect implemented in the onCollectionTap function is:
Read whether this article is a favorite cache or not, and reverse (after clicking, the status is opposite to)
Update cache and send data to data
  //Click the favorite button
  onCollectionTap: function () {
    //Read cache
    var postcollected = wx.getStorageSync("postcollected");
    var collected = postcollected[this.data.postId];
    collected = !collected;
    postcollected[this.data.postId] = collected;//Update cache
    wx.setStorageSync("postcollected", postcollected);
    this.setData({ collected });//Send data to data
  },

 

In this case, there must be a collected attribute in the data. The value is true or false

 

 

Using wx:if and wx:else to implement in the page

 

 

 

Interactive feedback wx.showToast

Text reminders for favorites or not

 

 

 

Effect picture

 

Interactive feedback wx.showModal

Use wx.showModal to overwrite the previous wx.showToast (with the same function and different implementation effect)

  //Click the favorite button
  onCollectionTap: function () {
    //Read cache
    var postcollected = wx.getStorageSync("postcollected");
    var collected = postcollected[this.data.postId];

    wx.showModal({
      title: collected ? 'Cancel collection' : "Collection",
      content: 'Are you sure you want to perform this operation?',
      success:(res) =>{//Arrow function can keep the previous this point
        if (res.confirm) {//Click OK

          collected = !collected;
          postcollected[this.data.postId] = collected;//Update cache
          wx.setStorageSync("postcollected", postcollected);
          this.setData({ collected });//Send data to data

        } else if (res.cancel) {//Click Cancel
          console.log('Cancel operation')
        }
      }
    });
  },

 

The above is the arrow function of ES6, which keeps this point. You can also use the variable to save the previous this point

//Click the favorite button
  onCollectionTap: function () {
    //Read cache
    var postcollected = wx.getStorageSync("postcollected");
    var collected = postcollected[this.data.postId];

    var self=this;//Retain this point

    wx.showModal({
      title: collected ? 'Cancel collection' : "Collection",
      content: 'Are you sure you want to perform this operation?',
      success(res){
        if (res.confirm) {//Click OK

          collected = !collected;
          postcollected[self.data.postId] = collected;//Update cache
          wx.setStorageSync("postcollected", postcollected);
          self.setData({ collected });//Send data to data

        } else if (res.cancel) {//Click Cancel
          console.log('Cancel operation')
        }
      }
    });
  },

 

Design sketch

 

Add tabbar tab

Using tabbar requires at least two pages, so we can create a demo page for demonstration

 

View document

 

 

Add in app.json:

 

Effect picture

 

If these components can't meet the needs, the applet has many custom components, which can be written by others

 

At this time, select normal editing and go back to welcome page. You will find that you can't jump to the page by clicking the button because of the influence of tabBar

 

 

 

 

The applet specifies that if you want to jump to a page with a tabBar, you must use wx.switchTab

 

 

Some useful small program framework

https://github.com/TaleLin

Recommend lin ui http://doc.mini.7yue.pro/

 

 

If you like to write small programs with vue, mpvue is recommended

If you like to write small programs with react, taro is recommended

Tags: Javascript Attribute shell JSON github

Posted on Tue, 24 Mar 2020 03:52:48 -0400 by krox