首先说段pi话，我是一个菜鸡前端小白，我不只是菜鸡前端我还没过英语四级，如今大三了有点着急，可是我相信我会过的，因此我选择仿了一个跟英语有关的小程序想着可以潜移默化的受到影响，这个小程序就是标题所说的“沪江英语”(黑体加粗)。这是我作的第一个小程序，可是大家不能由于我菜就不往下看了说不定就能有些收获呢你说是吧（嘿嘿嘿嘿嘿）html

项目预览及开始前的准备

项目预览

开始前准备及使用工具

申请帐号：进入微信公众平台根据指示申请注册帐号
开发工具：VScode和微信开发者工具
使用的文档及第三方工具

EasyMock(一个可视化,而且能快速生成模拟数据的第三方服务)
小程序云开发的数据库功能和存储功能(在这里我主要用来存储图片，利用其生成的图片地址)
VantWeapp以及其开发文档
微信官方文档
markMan(能够进行图片测量和标注的工具)
iconfont(阿里巴巴矢量图标库，有大量icon资源)
wxParse(富文本解析组件，可以显示富文本并且它的思路是将整个HTML String转换成一个Node数组一句话就是可以把html直接渲染到小程序中)

项目完成过程

刚开始的时候看到原小程序以下图所示前端

个人天，这些均可以点并且每一个页面都不同，个人天，是否是每一个页面都要跳转，是否是要建好多个页面，这也太烦了吧，我当时就想着有没有别的方法能够在同一个页面实现这个功能，一开始我没有想出来，由于我连数据该怎么建都不知道，可是我没有放弃，我思前想后头皮发麻，终于我选择了先切页面下面这一段是介绍页面结构的，再后面就是数据的构建以及逻辑了(不想看下面一段内容的请直接跳到下下段内容)

页面结构

"pages": [
    "pages/index/index", //首页
    "pages/theme/theme", //主题页
    "pages/articlels/articlels", //文章列表页
    "pages/content/content", //文章详情页
    "pages/search/search" //搜索页面
  ],
复制代码

首页

<!-- index.wxml -->
<view class="container">
  <!-- 搜索 -->
  <view class="search" bindtap="toSearch">
    <van-search value="{{ value }}" placeholder="搜索" background="#49b849" />
  </view>
  <!-- 导航 -->
  <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>
复制代码

/**index.wxss**/
page {
  height: 100%;
  background-color: #f8f8f8;
}
.contaner{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* 搜索 */
.search{
  width: 100%;
  height: 108rpx;
}
.van-search{
  position: absolute;
  left: 0;
  right: 0;
}
.van-search__content{
  height: 54rpx;
  align-items: center;
}
/* 导航 */
.weui-grids{
  width: 100%;
  background-color: #ffffff;
  margin-bottom: 18.75rpx;
}
.weui-grid{
  width: 25%;   /*每份占父容器宽度的25%，一排可容纳四个*/
  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{
  width: 100%;
  height: 150rpx;
  margin-bottom: 21rpx;
}
.slide-image{
  width: 100%;
  height: 170rpx;
}
/*  */
.article{
  width: 100%;
  padding: 28rpx 37.5rpx 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;
}
.article-list{
  width: 33.33%;
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 65.625rpx;
}
.article-list__titlt{
  color: #000000;
  line-height: 26rpx;
  font-size: 26rpx;
  margin-bottom: 15.625rpx;
}
.article-list__des{
  line-height: 20.79rpx;
  font-size: 20.79rpx;
  color: rgba(0,0,0,0.7);
}
复制代码

文章列表页

<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>
复制代码

/* miniprogram/pages/articlels/articlels.wxss */
page{
    width: 100%;
}
.articlePage{
    width: 100%;
    background-color: #fff;
}
.articlesection{
    padding: 21.857rpx 35.42rpx 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.5rpx;
    margin-top:37.5rpx ;
}
.list-Left{
    flex: 1;
}
.list-Left__title{
    width: 398rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 31.25rpx;
    color: #333333;
    margin-bottom: 90rpx;
}
.list-Left__num{
    font-size: 23.75rpx;
    color: #cccccc;
}
.list-Right{
    width: 200rpx;
    height: 151rpx;
}
.list-ight__img{
    width: 200rpx;
    height: 151rpx;
}
复制代码

文章详情页

<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>
</view>
复制代码

/* miniprogram/pages/content/content.wxss */
@import"../../wxParse/wxParse.wxss";
.content{
    width: 100%;
}
.artContent{
    width: 100%;
    background-color: #fbfbfb;
    padding: 52rpx 36.45rpx 0;
    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.375rpx;
    width: 100%;
    margin-bottom:  147rpx;
}
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 16.67rpx 0;

}
 .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 94.79rpx;
    background-color: #fff;
    justify-content: space-around;
    align-items: center;

}
.footer-follow,.footer-share{
    text-align: center;
}
.footer-follow__icon,.footer-share__icon{
    width: 31.25rpx;
    height: 31.25rpx;
}
.footer-follow__text,.footer-share__text{
    font-size: 16.67rpx;
    color: #8a8a8a;
}

.langs_en{
  line-height: 57rpx;
  font-size: 31.25rpx;
  margin-bottom: 41.67rpx;
}
.langs_cn{
  color: #666666;
  font-size: 28.125rpx;
  line-height: 55.2rpx;
  margin-bottom: 41.67rpx;
}
复制代码

搜索页面

由动图可知搜索页面由四个部分组成：搜索框+搜索得到内容列表+文章列表(彻底引用了文章列表页面的结构,可是没有封装成组件因此你们先将就着看)+ 搜索示例，我直接上代码吧

<van-search value="{{ value }}" placeholder="请输入搜索关键词" 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>
复制代码

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.857rpx 35.42rpx 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.5rpx;
    margin-top:37.5rpx ;
}
.list-Left{
    flex: 1;
}
.list-Left__title{
    width: 398rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 31.25rpx;
    color: #333333;
    margin-bottom: 90rpx;
}
.list-Left__num{
    font-size: 23.75rpx;
    color: #cccccc;
}
.list-Right{
    width: 200rpx;
    height: 151rpx;
}
.list-ight__img{
    width: 200rpx;
    height: 151rpx;
}
复制代码

主题页没啥能够介绍的因此就不介绍了node

接下来重点来了小程序数据的构建还有功能逻辑

数据的构建

Easy-Mock

一开始本小辣鸡就说了连怎么建数据都不知道，后来天天盯着沪江英语小程序的页面看，点了一遍又一遍，格物致知，终于，我想通了 git

正经的我要开始告诉大家了。首先我主页的数据是在 Easy-Mock里面建立的接口数据

主要由三部分组成： navigation为首页顶部的文章类型列表的数据， advertPic为swiper广告图片数据， article为flex布局部分的数据此数组内部还嵌套了数组放上我建的 EsayMock数据接口的连接能够点进去去看一眼。每一个 navigation以及 article中的每一项里面的 typeList中的item都有一个id/lId，这个id主要是用来从云数据库从取得文章列表内容(articlels页面)中的数据的，其余的数据都是用来渲染页面的。接下来说一下嵌套数据渲染的使用

<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>
复制代码

如上代码，第一层的循环在上述代码第一行github

<block wx:for="{{article}}" wx:key="index" wx:for-item="article">
复制代码

第二层循环在第......倒数第七行web

<navigator wx:for="{{article.typeList}}" wx:key="{{typeList.lId}}" wx:for-item="typeList" 
复制代码

咱们将article中的typList遍历了出来。须要注意的是我把两处代码中的item都经过wx:for-item="xxx*"将item更名，两处不是都须要改，但必须经过wx:for-item="xxx"将一处的item改名，防止渲染时都使用item.xxx进行渲染致使混乱数据库

云开发数据库

第一次本身建数据库中的数据的时候，我真的是一个加号一个加号的点，一个字段一个字段的敲，真的！是真的敲的我头皮发麻，精神失常，差点放弃了这个小程序，直到我发现导入那两个字。因而我在桌面上建了记事本把它改为了**.json**格式，里面的数据都用对象的形式敲出来，可是必定要注意格式(细心，必定要细心)，不然导入时会失败。数据格式及内容以下json

此数据在集合名为 ShanghaiEnglish 当中全部数据都包含在articles中及下标为0的数据中

而后articles中有41条数据article为文章列表内容，id这个字段用于逻辑匹配

article里面的articleid时文章id，typeListId与上一个数据表中的id一致

云存储

这个小程序中我主要用云存储储存图片来获取图片地址小程序

点击第一张图的左侧文件名部分会出现第二张图中的信息复制下载地址能够在浏览器中访问图片

因为数据实在太多手撸了几千行假数据(爬虫真的是很好的东西，惋惜我还不太会，等我写完这个再学)，不想继续造假了，因此我放过了本身，页面有些地方很差看，你也放过我微信小程序

页面逻辑的实现

首页跳转至文章列表页

我就直接上代码

import {
  API_BASE 
 } from '../../config/api'
复制代码

因为我把EasyMock的放在了config文件夹的api.js中首先在index.js中引入EasyMock

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

  onLoad: function() {
    wx.showLoading({
      title: '玩命加载中',
    })
    self = this
    wx.request({
      url: API_BASE,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: 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: '提示',
            content: 您的网络状态不佳,
            showCancel:false
        })
      },
      complete: function() {
        // complete
      }
    })
复制代码

onPullDownRefresh实现下拉刷新，当数据没有请求到的时候，现实玩命加载中，当数据请求成功之后消失。在小程序onLoad(页面加载)生命周期中，用 wx.request API请求easymock中的数据，并将数据放入data中，请求前进行 wx.showLoading请求成功 wx.hideLoading();失败则显示网络情况不佳(自从写了这个小程序我就晓得了这些个小程序，要真的是数据有问题请求不到，就说我网很差，我可能之前都被骗到过，我太单纯了)

<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>
复制代码

因为从首页点进去之后标题不一样因此在页面跳转中传了navigationText，又因为须要在下一个页面判断这是在首页的哪一个list上点进来的，因此又传了个id到articlels页面

// miniprogram/pages/articlels/articlels.js
const db = wx.cloud.database(); //获取数据库引用
复制代码

data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.showLoading({
      title: '玩命加载中',
    })
    let that = this
    // console.log(options)
    wx.setNavigationBarTitle({ // 设置当前标题
      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();
  },
复制代码

在onLoad中经过options.xxx获取上一个页面传过来的值。如在

wx.setNavigationBarTitle({ // 设置当前标题
      title: options.navigationText
    })
复制代码

经过options.navigationText获取navigationTitle的值并经过 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)
      })
复制代码

这段代码主要获取数据库中下标为0的数据(全部数据)中的articles里的id字段与index页面传入的id值相等的整个article数组，即对应的文章列表而后再经过

that.setData({
        articles:data.article,
        totalId:data.article.length,
        typeListId:data.article.typeListId
      })
复制代码

将数据放入data中。articles是文章列表，用来渲染页面的。totalId表示的是articles的文章总数(不写文章不知道，一写文章就发现应该把名字设置为total没有Id的)，typeListId就是文章属于哪个类型的id啦。

<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> 
复制代码

而后又传了值给下一个页面。本段结束。请听下回分解。看累了的话您也去休息会儿

文章列表页到content页以及下一篇功能的实现

我好累啊我不想说了，可是我一得说完。上回说到经过跳转传了值，来咱们来看看怎么用的。

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({ // 设置当前标题
      title: that.data.title
    })
复制代码

又双叒来接收传过来的值了，又要从数据库里取值了，而后你会发现取值的这部分和上个页面一毛同样，为何呢，由于我这个小程序不是又了思路再写的，是一个页面一个页面慢慢实现的。而我又懒得封装了。因此只能骗本身大家这样看不用去别的页面找方法，理解起来更方便。咱们伪装以及将完了取数据。而后咱们经过上个页面传过来的文章本身自己的id其实也就是下标去完数据源里面塞数据就像这样。

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,
      })
复制代码

而后内容部分就渲染出来了，而后讲下一部分

下一篇功能的实现

<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>
复制代码

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: '提示',
        content: '别贪心哦~已经没有内容了',
        showCancel: false,
        success: function (res) {
        } })
        return;
    }
复制代码

我经过给下一篇的view绑定点击事件而后还给了个data-id='{{id}}'用来点击时获取此文章的id属性其实也就是下标。原本不用这个直接用that.data.id就好了，可是我以为这样洋气一点就加了。经过判断currentTargetID也就是点击下一篇时当时文章的id(下标)时候小于文章列表中总篇数减一。(为啥减一呢？？由于我是先把下标加了一再进行跳转操做的。)，而后就像这样

wx.navigateTo({
        url: 'content?id=' + that.data.article[nextTarget].articleId + '&totalId=' + that.data.totalId + '&typeListId=' + that.data.article[nextTarget].typeListId
      })
复制代码

把下一篇文章的值传到这个页面。而后又进行上一阶段的朴实的操做。最后呢就是没有文章了给了个提示。这段结束。谢谢你们。下回再见

搜索页面的实现

<van-search value="{{ value }}" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" bind:change="searchInput" />
复制代码

首先我给这个组件绑定了三个bind:search="onSearch" bind:cancel="onCancel" bind:change="searchInput"事件，分别时搜索，取消还有输入框改变。咱们一个一个来看

再首先

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)
    })
  },
复制代码

再onLoad中把全部articles中的全部article中的每一条数据都取了出来，并组成了一个新的数组allAticle。

// 输入时匹配含有输入内容的字段
 searchInput: function(e) {
    console.log(e.detail)
    // 将搜索内容存入缓存
    wx.setStorageSync('keywords', e.detail); 
    // 调用getList方法搜索数据
    let search_list = this.getList(e.detail);//经过getList方法查询标题中包含此内容的全部文章
    if (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
    });
  },
复制代码

图上注释的挺详细的，那么问题来了getList方法是啥？请往下看一丢丢

getList(attr) {
    let self = this
    return self.data.allAticle.filter(item => {
      return item.articledesc.toString().toLowerCase().indexOf(attr) > -1;
    });
  },
复制代码

模糊查询圈起来要考。这个代码的意思就是在allArticle中查找标题中有这个attr的全部项。上面调用这个方法传了个e.detail(输入的内容)实参，因此也就是返回标题中含有输入内容的全部项。

onSearch(e) {
  //  将缓存中的keywords值赋值给keywords
    const keywords = wx.getStorageSync('keywords');
    wx.showLoading({
      title: '请稍等',
    });
    setTimeout(() => {
      this.setData({
        articles: this.getList(keywords),//articles为全部包含这个keywords的项
        is_hidden: true
      });
      wx.hideLoading();
    }, 500);
  },
复制代码

上面我以为我标注的还蛮清楚的我就不讲了

onCancel() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
复制代码

onCancel就是用来返回主页面的，这里须要注意的就是，跳转到tabbar页面必须用wx.switchTab。

内容页中的文章内容的完成

一开始看到内容页里面没篇文章结构都有不同的地点的时候我就佛了，不晓得怎么完成，直到我遇到了它 wxPaser它能将html的结构转换为微信小程序的组件并渲染到页面。先在gitup中下载wxPaser，而后放入目录中作以下配置

<import src="../../wxParse/wxParse.wxml" />
复制代码

@import"../../wxParse/wxParse.wxss";
复制代码

var WxParse = require('../../wxParse/wxParse.js')
复制代码

分别在content的wxml，wxss和js中引入wxPaser 而后再在js中

var content = that.data.content;
    WxParse.wxParse('content', 'html', content, that, 5);
复制代码

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

1.bindName绑定的数据名(必填)
2.type能够为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,通常为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
再在wxml中使用转换事后的数据

<view class="artContent-body">
            <template is="wxParse" data="{{wxParseData:content.nodes}}" />
        </view>
复制代码

还能够在wxss中给你的htmlclass类加上样式

最后还没完还另外加一个商城tap切换功能

看到不少人用是否hidden来操做，我以为tab一多太麻烦了，因此发动了一下聪明的小脑壳瓜

<view class="list {{curIndex === index ? 'listActive' : ''}}" bindtap="toList" data-id="{{item.id}}">{{item.name}}</view>
复制代码

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
    })
  },
复制代码

主要的代码就上面几行，代码我放在gitup了能够本身拿哦，随便拿不要客气

结语

GitHub地址个人第一篇文章终于写完了！！！(撒花撒花撒花～) 但愿天下无双仪态万千母仪天下活力四射魅力无边婀娜多姿人间极品美得超越了凡间全部事物气若幽兰莲步生花沉鱼落雁闭月羞花国色天香倾国倾城花容月貌艳如桃李千娇百媚如花似玉楚楚可人亭亭玉立绝世容颜眉清目秀清的小姐姐 和一表人才博学多才彬彬有礼才貌双全鹤立鸡群翩翩少年神机妙算仪表不凡气宇轩昂眉清目秀玉树临风剑眉星眸清新俊逸挺鼻薄唇风流风倜傥潇洒英俊古雕刻画淡定优雅飘逸宁人探扇浅笑俊美无涛气宇轩昂风度翩翩仪表堂堂的小哥哥 能给我一个star！！(加粗)也但愿各位能不吝赐教，带我和个人技术脱离底层走向巅峰爱您！尊敬您！

微信小程序-沪江英语(资讯类)+商城商品列表切换功能