Micro channel small program teaching chapter 4 section 3 (including video) : small program intermediate actual combat tutorial: details – perfect functions

Details – Fully functional

Video address: v.qq.com/x/page/f055…

Before starting, please import the code/ directory in ch4-3 branch into the section of wechat development tools. We will perfect the other functions of details: next, share, return list.

Step 1. IncreaseThe next articlefunction

To add functionality to the next article, we need to bind an event in the view that triggers a response function in the code that calls the interface and returns the next article content data.

1. Modify the view file detail. WXML and add corresponding binding events

<button class="footbar-btn clearBtnDefault" bindtap="next">The next article</button>
Copy the code

2. Modify the code detail.js and add next and related functions corresponding to binding events:

next(){
  this.requestNextContentId()
    .then(data= > {
      let contentId = data && data.contentId || 0;
      this.init(contentId);
    })
},
requestNextContentId () {
  let pubDate = this.data.detailData && this.data.detailData.lastUpdateTime || ' '
  let contentId = this.data.detailData && this.data.detailData.contentId || 0
  return util.request({
    url: 'detail'.mock: true.data: {
      tag:'Wechat Hot'.pubDate: pubDate,
      contentId: contentId,
      langs: config.appLang || 'en'
    }
  })
  .then(res= > {
    if (res && res.status === 0 && res.data && res.data.contentId) {
      util.log(res)
      return res.data
    } else {
      util.alert('tip'.'No more articles! ')
      return null}})}Copy the code

A brief introduction to these two functions: Click to trigger the next function, which calls requestNextContentId first, passing the current article’s lastUpdateTime and contentId parameters to the back end, which returns the next article’s contentId. This gives us the article Id, and as we started, we pass the contentId function init(contentId) again to get the details of the article, and then render the view…

At this point, you may have noticed a user experience bug: when you scroll to a certain point and click on the next page, the new page doesn’t scroll to the top. So we need to fix this bug, when the article is updated, under normal circumstances, the page should scroll to the top, that is, the scrollbar at the beginning. Now let’s fix it:

The scroll view component has a property called scroll top, which represents the current position of the scroll bar. In other words, when its value is 0, the scroll bar is at the top, so we need to record this value in the data. When we need to scroll the article to the top of the page, We just need to change the scroll top. Here we use scrollTop to represent:

// Modify the detail.js data data
data:{
  scrollTop: 0.detailData: {}}Copy the code

Add enable-back-to-top attribute to view file

<scroll-view scroll-y="true" scroll-top="{{ scrollTop }}" enable-back-to-top="true" class="root-wrap">
Copy the code

When we need the article to return to the top, we simply set this variable value. Here we extract a separate function for assignment:

goTop () {
  this.setData({
    scrollTop: 0})}Copy the code

Call in function init() :

init (contentId) {
  if (contentId) {
    this.goTop()
    this.requestDetail(contentId)
        .then(data= > {
          this.configPageData(data);
        })
        / / call wxparse
        .then((a)= >{
          this.articleRevert(); }); }}Copy the code

Step 2. Increasesharefunction

Calling the applet will listen on the sharing event. If the sharing function is triggered, the listening event will return an object containing the information to be shared, and it can handle the sharing success and failure respectively

<! -- <button class="footbar-share clearBtnDefault"> <view class="icon footbar-share-icon"></view> </button> -->
<button class="footbar-share clearBtnDefault" open-type="share">
  <view class="icon footbar-share-icon"></view>
</button>
Copy the code

Button component with open-type=”share” attribute can trigger onShareAppMessage listening event:

onShareAppMessage () {
  let title = this.data.detailData && this.data.detailData.title || config.defaultShareText;
  let contentId = this.data.detailData && this.data.detailData.contentId || 0;
  return {
    // Share out the title of the content
    title: title,

    // The user clicks on the shared content to jump to the address
    // contentId is the article id parameter; The share parameter indicates that the user is coming from the shared address, which we'll use later
    path: `/pages/detail/detail? share=1&contentId=${contentId}`.// Share success
    success: function(res) {},
    
    // Share failed
    fail: function(res) {}}},Copy the code

Note that some versions of this interface are not supported, so if the version is not supported, we need to give the user a message. So we need to bind another click event to the share button, and if not, tell the user:

notSupportShare () {
  // deviceInfo is the user's device information that we have retrieved in app.js and saved in globalData
  let device = app.globalData.deviceInfo;
  let sdkVersion = device && device.SDKVersion || '1.0.0';
  return / 1 \. \. 0 0 \ | 1. 0 \. 1 \ | 1. 1 \. 0 \ | 1. 1 \. 1 /.test(sdkVersion);
},
share () {
  if (this.notSupportShare()) {
    wx.showModal({
      title: 'tip'.content: 'Your wechat version is too early, please click on the upper right corner to share'}}})Copy the code

Bind the share listening event to the view:

<! -- <button class="footbar-share clearBtnDefault" open-type="share"> <view class="icon footbar-share-icon"></view> </button> -->
<button class="footbar-share clearBtnDefault" bindtap="share" open-type="share">
  <view class="icon footbar-share-icon"></view>
</button>
Copy the code

Step 3. IncreaseReturns a list offunction

We need to add a function to detail.js that returns a list, and then bind the trigger event to the view

// detail.js add the following contents
Page({
  back(){
    wx.navigateBack()
  }
})
Copy the code

Bind events in a view:

<! -- <button class="footbar-back clearBtnDefault"> <view class="icon footbar-back-icon"></view> </button> -->
<button class="footbar-back clearBtnDefault" bindtap="back">
  <view class="icon footbar-back-icon"></view>
</button>
Copy the code

Since wx.navigateBack is equivalent to the browser’s history, it is returned by browsing history. What if the user doesn’t come in from a list, like a shared detail? The record doesn’t exist at this point.

Share =1 =1 =1 =1 =1 =1 =1 =1 =1

onLoad (option) {
  let id = option.contentId || 0;
  this.setData({
    isFromShare:!!!!! option.share });this.init(id);
},
Copy the code

Then modify the back function to return the list by navigation if it comes from the share portal. If not, return normal by loading records:

// detail.js add the following contents
Page({
  back(){
    if (this.data.isFromShare) {
      wx.navigateTo({
        url: '.. /index/index'})}else {
      wx.navigateBack()  
    }
  }
})
Copy the code

So far, our simple small program actual combat has been completed!!

IKcamp website: www.ikcamp.com

Visit the official website to read all the free sharing courses: iKcamp produced | the latest network | wechat small program | Share the beginner and intermediate training course based on the latest version 1.0 developer tools. Contains: articles, videos, source code

IKcamp’s original new book “Mobile Web Front-end Efficient Development Combat” has been sold on Amazon, JD.com and Dangdang.

[November 11] Latest event of iKcamp in Shanghai

Registration address: www.huodongxing.com/event/54099…

Face-to-face communication with the R&D team that ranked fourth in the total list of “Everyday Speaking” small programs and first in the education category.

In 2019, iKcamp’s original new book Koa and Node.js Development Actual Combat has been sold on JD.com, Tmall, Amazon and Dangdang!