Period of PI speaking first, I’m a chicken dish front small white, I not only is food chicken front-end I haven’t the English four levels, three now a little worried, but I believe I can, so I choose to copy a small programs related to English thinking can exert a subtle influence on affected, this small program is the title of “hj English” (blackbody bold). This is my first little program, but you can’t stop reading just because I like it. Maybe you’ll get something, right? (hey hey hey hey hey)

Project preview and preparation before start

Project preview

Prepare and use tools before starting

Apply for an account: Enter the wechat public platform and apply for an account according to the instructions
Development tools: VScode and wechat developer tools
Documentation and third party tools used

EasyMock(a visual, third-party service that quickly generates mock data)
Small program cloud development of the database function and storage function (here I mainly used to store pictures, using the generated picture address)
Vantretry P and its development documentation
Official wechat document
MarkMan (tools that can measure and annotate images)
Iconfont (Alibaba Vector icon library, with a large number of icon resources)
WxParse (rich text parsing component that can display rich text and the idea is to convert an entire HTML String into a Node array. In short, it can render HTML directly into applets.)

Project Completion Process

When you start, you’ll see the original applet as shown below

Page structure

 "pages": [
    "pages/index/index", / / home page"pages/theme/theme"// Theme page"pages/articlels/articlels", // Article list page"pages/content/content", // Article details page"pages/search/search"// search page],Copy the code

Home page

<! -- index.wxml --> <view class="container"> <! -- search --> <view class="search" bindtap="toSearch">
    <van-search value="{{ value }}" placeholder="Search" background="#49b849"/> </view> <! -- navigation --> <view class="weui-grids">
    <block wx:for="{{navigation}}" wx:key="{{item.id}}">
      <navigator url="" class="weui-grid" hover-class="none" url=".. /articlels/articlels? id={{item.id}}&navigationText={{item.navigationText}}">
        <image class="weui-grid__icon" src="{{item.typePic}}" />
        <view class="weui-grid__label">{{item.typeName}}</view> </navigator> </block> </view> <! --> <swiper class="banner" indicator-dots="true" autoplay="true" interval="5000" duration="500">
    <block wx:for="{{advertPic}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image"/> </swiper-item> </block> </swiper> <! -- --> <scroll-view scroll-y="true">
    <block wx:for="{{article}}" wx:key="index" wx:for-item="article">
      <view class="article">
        <view class="article-title">
          <view class="article-title__text">{{article.title}}</view>
          <view class="article-title__time">{{article.time}}</view> </view> <! -- --> <view class="article-column">
          <image class="article-column__img" src="{{article.imgUrl}}" />
          <view class="article-column__text">{{article.text}}</view> </view> <! -- --> <view class="article-content">
          <navigator wx:for="{{article.typeList}}" wx:key="{{typeList.lId}}" wx:for-item="typeList" url=".. /articlels/articlels? id={{typeList.lId}}&navigationText={{typeList.navigationText}}" class="article-list" hover-class="none">
            <view class="article-list__titlt"> {{typeList.listTitle}}</view>
            <view class="article-list__des"> {{typeList.listdes}}</view>
          </navigator>
        </view>
      </view>
    </block>
  </scroll-view>
</view>
Copy the code

/**index.wxss**/
page {
  height: 100%;
  background-color: #f8f8f8;} .contaner{ width: 100%; height: 100%; box-sizing: border-box; } /* search */.search{width: 100%; height: 108rpx; } .van-search{ position: absolute; left: 0; right: 0; } .van-search__content{ height: 54rpx; align-items: center; } /* navigation */. Weui-grids {width: 100%; background-color:#ffffff;Margin - bottom: 18.75 the RPX; } .weui-grid{ width: 25%; */ align: center; text-align: center; display: inline-block; }. Weui-grid__icon {width: 54rpx; height: 46rpx; margin-top: 53rpx; margin-bottom: 21rpx; } .weui-grid__label{ font-size: 22rpx; color:# 333333;margin-bottom: 46rpx; } /* banner */. Banner {width: 100%; height: 150rpx; margin-bottom: 21rpx; } .slide-image{ width: 100%; height: 170rpx; } /* */ .article{ width: 100%; 28 the RPX padding: 37.5 the RPX 0; margin-bottom:21rpx; background:#fff;
  /* padding-top: 28rpx; */
  box-sizing: border-box;
}
.article-title{
  position: relative;
  width: 100%;
  height: 73rpx;
  color: # 797979;
}
.article-title__text{
  font-size: 29rpx;
  position: relative;
  top: 0;
  left: 0;
}
.article-title__time{
  line-height: 29rpx;
  font-size: 20rpx;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}
/*  */
.article-column{
  width: 100%;
  margin-bottom: 53rpx;
  position: relative;
}
.article-column__img{
  width: 100%;
  height: 290rpx;
}
.article-column__text{
  position: absolute;
  font-size: 31rpx;
  color: #ffffff;left: 21rpx; bottom: 25rpx; padding-right: 21rpx; } /* */ .article-content{ width: 100%; display: flex; flex-flow: row wrap; /* justify-content: space-around; */ align-content: flex-start; }. The article - the list {width: 33.33%; flex: 0 0 auto; text-align: center; Margin - bottom: 65.625 the RPX; } .article-list__titlt{ color:# 000000;line-height: 26rpx; font-size: 26rpx; Margin - bottom: 15.625 the RPX; }. The article - list__des {line - height: 20.79 the RPX; The font - size: 20.79 the RPX; Color: rgba (0,0,0,0.7); }Copy the code

Article list page

<view class="articlePage">
    <view class="articlesection">
        <navigator url=".. /content/content? id={{item.articleId}}&totalId={{totalId}}&typeListId={{typeListId}}" class="articlesection-list" hover-class="none" wx:for="{{articles}}" wx:key="articleId">
            <view class="list-Left">
                <view class="list-Left__title">{{item.articledesc}}</view>
                <view class="list-Left__num">{{item.num}}</view>
            </view>
            <view class="list-Right">
                <image class="list-ight__img" src="{{item.img}}" />
            </view> 
        </navigator> 
    </view>
</view>
Copy the code

/* miniprogram/pages/articlels/articlels.wxss */
page{
    width: 100%;
}
.articlePage{
    width: 100%;
    background-color: #fff;}. Articlesection {padding: 21.857 RPX 35.42 RPX 0; box-sizing: border-box; width: 100%; } .articlesection-list{ width: 100%; display: flex; justify-content: space-between; flex-direction: row; border-bottom: 1px solid#f3f3f3;Padding - bottom: 37.5 the RPX; Margin - top: 37.5 the RPX; } .list-Left{ flex: 1; } .list-Left__title{ width: 398rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; The font - size: 31.25 the RPX; color:# 333333;margin-bottom: 90rpx; - Left__num {}. List the font - size: 23.75 the RPX; color:#cccccc;
}
.list-Right{
    width: 200rpx;
    height: 151rpx;
}
.list-ight__img{
    width: 200rpx;
    height: 151rpx;
}
Copy the code

Article Details page

<import src=".. /.. /wxParse/wxParse.wxml" />
<view class="content">
    <scroll-view scroll-y="true"  enable-back-to-top="true" class="artContent">
        <view class="artContent_header">
            <text class="artContent_header--title">{{title}}</text>
            <view class="artContent_header--bottom">
                <view class="artContent_header--author">{{author}}</view>
                <view class="artContent_header--time">{{time}}</view>
            </view>
        </view>
        <view class="artContent-body">
            <template is="wxParse" data="{{wxParseData:content.nodes}}" />
        </view>
    </scroll-view>
    <view class="footer">
        <view class="footer-follow">
            <image class="footer-follow__icon" bindtap="backHome" src=".. /.. /images/back.png"/>
            <view class="footer-follow__text"</view> </view> <view class="footer-share" bindtap="nextArticle" data-id='{{id}}'>
            <image class="footer-share__icon" src=".. /.. /images/next.png"/>
            <view class="footer-share__text"</view> </view> </view>Copy the code

/* miniprogram/pages/content/content.wxss */
@import".. /.. /wxParse/wxParse.wxss";
.content{
    width: 100%;
}
.artContent{
    width: 100%;
    background-color: #fbfbfb;36.45 the RPX zero padding: 52 the RPX; box-sizing: border-box; } .artContent_header{ height: 198rpx; display: flex; flex-direction: column; justify-content: space-between; font-weight: 500; border-bottom: 1px solid#ededed;
}
.artContent_header--title{
    font-size: 40rpx;
    color: # 333333;
}
.artContent_header--bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 22rpx;
    color: #d1d1d1;margin-bottom: 24rpx; }. ArtContent - body {margin - top: 59.375 the RPX; width: 100%; margin-bottom: 147rpx; } .footer{ position: fixed; bottom: 0; width: 100%; background-color:#fff;Padding: 16.67 the RPX 0; } .footer{ position: fixed; bottom: 0; width: 100%; display: flex; flex-direction: row; Height: 94.79 the RPX; background-color:#fff;justify-content: space-around; align-items: center; } .footer-follow,.footer-share{ text-align: center; }. The footer - follow__icon. The footer - share__icon {width: 31.25 the RPX; Height: 31.25 the RPX; }. The footer - follow__text. The footer - share__text {the font - size: 16.67 the RPX; color:#8a8a8a;} .langs_en{ line-height: 57rpx; The font - size: 31.25 the RPX; Margin - bottom: 41.67 the RPX; } .langs_cn{ color:# 666666;The font - size: 28.125 the RPX; The line - height: 55.2 the RPX; Margin - bottom: 41.67 the RPX; }Copy the code

Search page

<van-search value="{{ value }}" placeholder="Please enter your search terms" show-action bind:search="onSearch" bind:cancel="onCancel" bind:change="searchInput" />
<scroll-view scroll-y class="search-list {{is_hidden? 'hidden':''}}">
    <block wx:for="{{search_list}}" wx:key="{{item.articleId}}">
      <text class="search-item" bindtap="showItemDetail" data-articledesc="{{item.articledesc}}">{{item.articledesc}}</text>
    </block>
</scroll-view>
<block wx:if="{{articles==''}}">
  <view class="case">
    <view class="case-item" wx:for="{{word}}"  wx:key="index"  bindtap="showItemDetail" data-articledesc="{{item}}">
        <text>{{item}}</text>
    </view>
  </view>
</block>
<view class="articlePage">
    <view class="articlesection">
        <navigator url=".. /content/content? id={{item.articleId}}&totalId={{totalId}}&typeListId={{item.typeListId}}" class="articlesection-list" hover-class="none" wx:for="{{articles}}" wx:key="item.articleId">
            <view class="list-Left">
                <view class="list-Left__title">{{item.articledesc}}</view>
                <view class="list-Left__num">{{item.num}}</view>
            </view>
            <view class="list-Right">
                <image class="list-ight__img" src="{{item.img}}" />
            </view> 
        </navigator> 
    </view>
</view>
Copy the code

page {
    width: 100%;
}
.case{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: center;
}
.case-item{
    width: 30%;
    height: 70rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.case-item text{
    font-size: 35rpx;
    width: 140rpx;
    background-color:#2cb62c;
    /* border-radius: 50%; */
    color:rgb(116, 18, 62);
    border: 1px solid rgba(0, 0, 0, .3);
    text-align: center;
    border-radius: 20rpx;
}

/*  */
/*  */
.search-list{
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 2;
    background: #fff;
    border-bottom: 1rpx solid #eee;
}
.search-list .search-item{
    display: inline-block;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    padding: 8rpx 30rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 20rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-list .search-item:last-child{
    border-bottom: none;
}
.search-list.hidden{
    display: none;
}

/*  */
/*  */
.articlePage{
    width: 100%;
    background-color: #fff;}. Articlesection {padding: 21.857 RPX 35.42 RPX 0; box-sizing: border-box; width: 100%; } .articlesection-list{ width: 100%; display: flex; justify-content: space-between; flex-direction: row; border-bottom: 1px solid#f3f3f3;Padding - bottom: 37.5 the RPX; Margin - top: 37.5 the RPX; } .list-Left{ flex: 1; } .list-Left__title{ width: 398rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; The font - size: 31.25 the RPX; color:# 333333;margin-bottom: 90rpx; - Left__num {}. List the font - size: 23.75 the RPX; color:#cccccc;
}
.list-Right{
    width: 200rpx;
    height: 151rpx;
}
.list-ight__img{
    width: 200rpx;
    height: 151rpx;
}
Copy the code

The theme page has nothing to introduce so I won’t introduce it

Next focus on the construction of small program data and functional logic

Construction of data

Easy-Mock

At the beginning of this small hot chicken said even how to build data do not know, then every day staring at the HJenglishsmall program page, click again and again, geogyzhizhi, finally, I think

Easy-Mock

navigation
advertPic
article
EsayMock data
navigation
article
typeList

 <block wx:for="{{article}}" wx:key="index" wx:for-item="article">
      <view class="article">
        <view class="article-title">
          <view class="article-title__text">{{article.title}}</view>
          <view class="article-title__time">{{article.time}}</view> </view> <! -- --> <view class="article-column">
          <image class="article-column__img" src="{{article.imgUrl}}" />
          <view class="article-column__text">{{article.text}}</view> </view> <! -- --> <view class="article-content">
          <navigator wx:for="{{article.typeList}}" wx:key="{{typeList.lId}}" wx:for-item="typeList" url=".. /articlels/articlels? id={{typeList.lId}}&navigationText={{typeList.navigationText}}" class="article-list" hover-class="none">
            <view class="article-list__titlt"> {{typeList.listTitle}}</view>
            <view class="article-list__des"> {{typeList.listdes}}</view>
          </navigator>
        </view>
      </view>
    </block>
Copy the code

In the code above, the first layer loops on the first line

<block wx:for="{{article}}" wx:key="index" wx:for-item="article">
Copy the code

The second loop is at…… Seventh line from last

<navigator wx:for="{{article.typeList}}" wx:key="{{typeList.lId}}" wx:for-item="typeList" 
Copy the code

We’ve iterated through typList in article. It should be noted that I renamed the item in both codes by wx:for-item=” XXX *”. Not both codes need to be changed, but the item in one must be renamed by wx:for-item=” XXX “to prevent confusion caused by the use of item. XXX for rendering

Cloud development database

The first time I built the data in the database, I was really a plus point by plus point, a field by field, really! It was real. I got pins and needles in my scalp, freaked out, and almost gave up on this little program, until I found the word import. So I built a notepad on the desktop to change it to **. Json ** format, the data inside are typed out in the form of objects, but must pay attention to the format (careful, must be careful), otherwise the import will fail. The data format and content are as follows

Cloud storage

In this small program, I mainly use cloud storage to obtain the picture address

Due to the data is too much hand stroked thousands of lines of false data (crawler is really a very good thing, but I am not too good, and so I write this to learn), do not want to continue to fake, so I let myself, some pages are not good, you let me

Implementation of page logic

Home jumps to the article list page

import {
  API_BASE 
 } from '.. /.. /config/api'
Copy the code

I first introduced EasyMock in index.js since I put EasyMock in api.js in config folder

Page({
  data: {
    navigation:[],
    advertPic:[],
    article:[]
  },
  toSearch:function() {
    wx.navigateTo({
      url: '/pages/search/search',}}),onPullDownRefresh() {
    wx.showLoading({
      title: 'Death on fire',
    })
    wx.request({
      url: API_BASE,
      success: (res) => {
        wx.hideLoading();
        wx.stopPullDownRefresh()
      }
    })
  },

  onLoad: function() {
    wx.showLoading({
      title: 'Death on fire',
    })
    self = this
    wx.request({
      url: API_BASE,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {},function(res){
        // success
        console.log(res)
        self.setData({
          advertPic:res.data.data.advertPic,
          navigation:res.data.data.navigation,
          article:res.data.data.article
        })
        wx.hideLoading();
      },
      fail: function() {
       wx.showModal({
            title: 'tip', Content: Your network status is not good, showCancel:false
        })
      },
      complete: function() {
        // complete
      }
    })
Copy the code

OnPullDownRefresh implements pull-down refresh. When the data is not requested, the reality is loaded and disappears after the data request is successful. Wx.showloading wx.hideloading (); wx.hideloading (); wx.hideloading (); Failure shows that the network condition is not good (since writing this small program I know these small programs, if it is really the data has a problem to request, say my network is not good, I may have been cheated before, I am too simple)

<view class="article-content">
          <navigator wx:for="{{article.typeList}}" wx:key="{{typeList.lId}}" wx:for-item="typeList" url=".. /articlels/articlels? id={{typeList.lId}}&navigationText={{typeList.navigationText}}" class="article-list" hover-class="none">
            <view class="article-list__titlt"> {{typeList.listTitle}}</view>
            <view class="article-list__des"> {{typeList.listdes}}</view>
          </navigator>
        </view>
Copy the code

NavigationText is passed in the page jump because the title is different after clicking in from the home page. Also, an ID is passed to the Articlels page because it needs to determine which list is clicked in from the home page on the next page

// miniprogram/pages/articlels/articlels.js const db = wx.cloud.database(); // Get the database referenceCopy the code

Data: {}, /** * lifecycle function -- listen for page load */ onLoad:function(options) {
    wx.showLoading({
      title: 'Death on fire',})letThat = this // console.log(options) wx.setnavigationBarTitle ({// set the current title: options. NavigationText}) db.collection("ShanghaiEnglish").get().then(res => {
       let data = res.data[0].articles.find((item) => {
        return item.id == options.id;
        // console.log(data.article)
      })
      that.setData({
        articles:data.article,
        totalId:data.article.length,
        typeListId:data.article.typeListId
      })
    })
    wx.hideLoading();
  },
Copy the code

Get the values from the previous page in onLoad via options. XXX. As in the

Wx.setnavigationbartitle ({// set the current title: options. NavigationText})Copy the code

NavigationTitle is available via options.navigationText and is set via wx.setNavigationBarTitle API

db.collection("ShanghaiEnglish").get().then(res => {
       let data = res.data[0].articles.find((item) => {
        return item.id == options.id;
        // console.log(data.article)
      })
Copy the code

This code gets the entire article array where the id field in articles is equal to the id value passed in by the index page in the database with subscript 0 (all data)

that.setData({
        articles:data.article,
        totalId:data.article.length,
        typeListId:data.article.typeListId
      })
Copy the code

Put data into data. A articles is a list of articles used to render a page. TotalId = total; typeListId = total; totalId = total; typeListId = total

<navigator url=".. /content/content? id={{item.articleId}}&totalId={{totalId}}&typeListId={{typeListId}}" class="articlesection-list" hover-class="none" wx:for="{{articles}}" wx:key="articleId">
            <view class="list-Left">
                <view class="list-Left__title">{{item.articledesc}}</view>
                <view class="list-Left__num">{{item.num}}</view>
            </view>
            <view class="list-Right">
                <image class="list-ight__img" src="{{item.img}}" />
            </view> 
        </navigator> 
Copy the code

It then passes the value to the next page. End of paragraph. Listen next time. If you’re tired, go and have a rest

Article list page to content page and implementation of the next feature

 that.setData({
      id:options.id,
      totalId:options.totalId,
      typeListId:options.typeListId
      })
    db.collection("ShanghaiEnglish").get().then(res => {
      let data = res.data[0].articles.find((item) => {
        return item.id == options.typeListId;
      })
      that.setData({
        article:data.article
      })
      let id = that.data.id
      that.setData({
        author: that.data.article[id].author,
        time:that.data.article[id].day,
        title:that.data.article[id].articledesc,
        content:that.data.article[id].content,
      })
    var content = that.data.content;
    WxParse.wxParse('content'.'html', content, that, 5); Wx.setnavigationbartitle ({// set the current title: that.data.title})Copy the code

And double 叒 to receive the value of the transmission, and to value from the database, and then you will find that the value of this part and the last page hair, why, because I this small program is not the idea to write again, is a page a page slowly realized. And I’m tired of wrapping it. So you have to lie to yourself and you don’t have to go to another page to figure it out, it’s easier to understand. We pretend as well as finish fetching data. And then we’re going to go through the id of the article that was passed in from the previous page and actually subscript it and stuff it into the data source like this.

let id = that.data.id
      that.setData({
        author: that.data.article[id].author,
        time:that.data.article[id].day,
        title:that.data.article[id].articledesc,
        content:that.data.article[id].content,
      })
Copy the code

And then the content is rendered, and then we move on to the next part

The implementation of the next feature

<view class="footer-share" bindtap="nextArticle" data-id='{{id}}'>
            <image class="footer-share__icon" src=".. /.. /images/next.png"/>
            <view class="footer-share__text"</view> </view>Copy the code

nextArticle: function(e) {
    let that = this
    let currentTargetID = e.currentTarget.dataset.id
    let totalId = that.data.totalId
    if(currentTargetID < totalId - 1){
      let nextTarget = Number(currentTargetID)+1
      wx.navigateTo({
        url: 'content? id=' + that.data.article[nextTarget].articleId + '&totalId=' + that.data.totalId + '&typeListId=' + that.data.article[nextTarget].typeListId
      })
    }
    else {
      wx.showModal({
        title: 'tip',
        content: 'Don't be greedy. There's no more content.',
        showCancel: false,
        success: function (res) {
        } })
        return;
    }
Copy the code

I did this by binding the click event to the view of the next post and then giving data-id='{{ID}}’ to get the id property of the post, which is actually the subscript. I would have used that.data.id instead of that, but I think that would have made it a little more fashionable. CurrentTargetID, when you click on the next article, the id of the article is less than the number of articles in the list minus one. Why do you subtract one? Because I added the subscript first and jumped again. And then it looks like this

 wx.navigateTo({
        url: 'content? id=' + that.data.article[nextTarget].articleId + '&totalId=' + that.data.totalId + '&typeListId=' + that.data.article[nextTarget].typeListId
      })
Copy the code

Upload the value of the next article to this page. And then the last stage of the simple operation. And finally, there are no articles and I’ll give you a hint. End of paragraph. Thank you. See you next time

Search page implementation

<van-search value="{{ value }}" placeholder="Please enter your search terms" show-action bind:search="onSearch" bind:cancel="onCancel" bind:change="searchInput" />
Copy the code

First I bind this component with three bind:search=”onSearch” bind:cancel=”onCancel” bind:change=”searchInput” events, search, cancel and input field changes. Let’s take it one by one

Then the first

 onLoad: function (options) {
    let that = this
    db.collection("ShanghaiEnglish").get().then(res => {
      let data = res.data[0].articles
      const flatterArticle = data.reduce((pre, next) => {
        return pre.concat(next.article);
      }, [])
      that.setData({
        allAticle: flatterArticle
      })
      console.log(flatterArticle)
    })
  },
Copy the code

In onLoad, each item of all articles is extracted and a new array allAticle is formed.

// Match the input field searchInput:functionWx.setstoragesync (e) {console.log(e.log) // Store search contents in cache'keywords', e.detail); // Call getList to search for dataletsearch_list = this.getList(e.detail); // Use the getList method to query all articles with this content in the titleif (e.detail == "") {
      search_list = [];
      this.data.is_hidden = true;
    } else {
      this.data.is_hidden = false;
    }
    this.setData({
      search_list,
      is_hidden: this.data.is_hidden
    });
  },
Copy the code

The graph is quite detailed, so the question is what is getList? Please read down diu-diu

 getList(attr) {
    let self = this
    return self.data.allAticle.filter(item => {
      return item.articledesc.toString().toLowerCase().indexOf(attr) > -1;
    });
  },
Copy the code

Fuzzy query circle to test. What this code means is to find all items in allArticle that have this attR in their title. The above call to this method passes an e.mail argument, so it returns all items with input in the title.

OnSearch (e) {// Assign the cache keywords to keywords const keywords = wx.getStoragesync ('keywords');
    wx.showLoading({
      title: 'Just a moment, please.'});setTimeout(() => {this.setData({articles: this.getList(keywords),//articles: is_hidden:true
      });
      wx.hideLoading();
    }, 500);
  },
Copy the code

I don’t think I’m going to talk about it because I think it’s pretty clear

onCancel() {
    wx.switchTab({
      url: '/pages/index/index',}}),Copy the code

OnCancel is used to return to the main page. Note that you must use wx.switchTab to jump to the tabbar page.

Completion of the article content in the content page

At the beginning, I was lost when I saw that the structure of each article in the content page had different locations. I didn’t know how to complete it until I came across wxPaser, which can convert the structure of HTML into a component of wechat applet and render it to the page. Download wxPaser in Gitup and put it in a directory to do the following configuration

<import src=".. /.. /wxParse/wxParse.wxml" />
Copy the code

@import".. /.. /wxParse/wxParse.wxss";
Copy the code

var WxParse = require('.. /.. /wxParse/wxParse.js')
Copy the code

Introduce wxPaser in CONTENT WXML, WXSS, and JS respectively and then in JS

var content = that.data.content;
    WxParse.wxParse('content'.'html', content, that, 5);
Copy the code

WxParse.wxParse(bindName , type, data, target,imagePadding)

1. BindName Binding data name (required)
2. Type can be HTML or MD (required)
3. Data is the specific data passed in (mandatory)
4. Target is the Page object, usually this(required)
5. ImagePadding is a single padding when the image is adaptive left and right (default: 0, optional)
The transformed data is then used in WXML

 <view class="artContent-body">
            <template is="wxParse" data="{{wxParseData:content.nodes}}" />
        </view>
Copy the code

You can also style your HTMLClass classes in WXSS

Finally, there is a new store tap switching feature

<view class="list {{curIndex === index ? 'listActive' : ''}}" bindtap="toList" data-id="{{item.id}}">{{item.name}}</view>
Copy the code

toList: function (e) {
    let that = this
    let currentId = e.currentTarget.dataset.id
    that.setData({
      curIndex: e.currentTarget.dataset.id,
      typeList: that.data.typeLists[currentId].typeList
    })
  },
Copy the code

The main code is just a few lines above, the code I put in Gitup can take oh, feel free to take

conclusion

My first post is finally finished!! (flowers and flower ~) and hope that the unique deportment myriad mother instrument all energetic charm with graceful and juicy beyond the earth all things beautiful gas if LianBu orchid flowers drop-dead gorgeous an amusement America laguna beauty yan such as plum beautiful and charming and graceful graceful and clear as beautiful as flowers and pure as jade beautiful appearance and good features of small sister Decent well-read polite prompting a standout engaging young resourceful instrument uncommon promenading red well proportioned, knife-shaped eyebrows star eyes and fresh elegance pretty nose his thin merry ti tang wind natural and unrestrained handsome ancient carvings detachment elegant elegant ning explore fan chuckled and handsome no tao promenading personable handsome little brother can give me a star!! (bold) also hope that you can not hesitate to give advice, take me and my technology from the bottom to the peak love you! Respect you!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Wechat small program – Hujiang + shopping mall list switching function

Project preview and preparation before start

Project preview

Prepare and use tools before starting

Project Completion Process

Page structure

Home page

Article list page

Article Details page

Search page

Construction of data

Easy-Mock

Cloud development database

Cloud storage

Implementation of page logic

Home jumps to the article list page

Article list page to content page and implementation of the next feature

Search page implementation

Completion of the article content in the content page

Finally, there is a new store tap switching feature

conclusion

Wechat small program – Hujiang + shopping mall list switching function

Project preview and preparation before start

Project preview

Prepare and use tools before starting

Project Completion Process

Page structure

Home page

Article list page

Article Details page

Search page

Construction of data

Easy-Mock

Cloud development database

Cloud storage

Implementation of page logic

Home jumps to the article list page

Article list page to content page and implementation of the next feature

Search page implementation

Completion of the article content in the content page

Finally, there is a new store tap switching feature

conclusion

Related Posts

How to be a good programmer: What programming advice can 97 “experts” give? (2)

Vue Watcher and Scheduler principle

An experience doing Webpack performance optimization | Project Review