小程序模板網(wǎng)

小燈燈實戰(zhàn)系列《二》微信小程序:仿今日頭條(上)

發(fā)布時間:2017-11-23 17:50 所屬欄目:小程序開發(fā)教程

寫在前面新的一年,祝大家新年快樂!當(dāng)然對于程序員來說,新的一年,也要有新的改變。因此燈燈決定湊熱鬧編寫微信小程序啦!上一篇文章《記一次小程序開發(fā)過程》中,燈燈大致寫了下 ...

 

寫在前面

新的一年,祝大家新年快樂!當(dāng)然對于程序員來說,新的一年,也要有新的改變。因此燈燈決定湊熱鬧編寫微信小程序啦!

上一篇文章《記一次小程序開發(fā)過程》中,燈燈大致寫了下自己第一次開發(fā)小程序的感受和流程。這一次燈燈會詳細(xì)記錄下自己制作一個小程序的思路、遇到的問題、涉及到的代碼等和大家分享。

要做個什么

首先我們要確定做一個什么小程序,我決定先做一個很常規(guī)的新聞App練練手,樣式就模仿頭條啦!

開發(fā)分為兩次進(jìn)行,第一次完成新聞列表、內(nèi)容閱讀這兩個常規(guī)功能,不涉及用戶交互。第二次完善功能,加上評論、收藏等互動功能。

本文就和大家一起來制作第一個無用戶系統(tǒng)版本。

應(yīng)用構(gòu)架非常簡單,就是2個頁面:新聞列表、新聞詳情。

今日頭條截圖

當(dāng)然樣式不一定要做那么復(fù)雜先,比如我們就統(tǒng)一1幅封面預(yù)覽圖,暫時不做3幅圖的item。

動手開發(fā)

首先是首頁,即新聞列表

布局上,頂部一個懸浮固定的分類條,用橫向的scroll-view即可實現(xiàn)。下面是列表,循環(huán)渲染每個item即可。

頂部分類效果

分類布局代碼如下:

<scroll-view class="segments" scroll-x="true">
  <view wx:for="{{sections}}" class="section {{item.active ? 'active' : ''}}" data-sid="{{item.section_id}}" bindtap="onSectionClicked">
    <text>{{item.name}}</text>
  </view>
</scroll-view>

分類布局代碼如下:

.segments{
  width:100%;
  height:35px;
  background: #f6f6f6;
  white-space: nowrap;
  font-size:15px;
  position: fixed;
  top: 0;
  z-index:1;
}

.section{
  width:20%;
  height:100%;
  text-align: center;
  color:#000;
  display: inline-block;
  line-height: 35px;
}

.section.active{
  color:#d43d3d;
}

注意這邊有個active類,就是當(dāng)前選中的分類,我把字體顏色設(shè)為了紅色,當(dāng)然你也可以加個橫線。

文章列表布局如下:

<!--文章列表-->
<view class="articles">
  <view wx:for="{{articles}}" class="article" data-aid="{{item.article_id}}" bindtap="onArticleClicked">
            <view class="left">
                <view class="title">
                    {{item.title}}
                </view>
                <view class="subTitle">
                    <!--這邊可以加副標(biāo)題-->
                </view>
                <view class="date">
                    <text>{{item.date}}</text>
                </view>
                <view class="cnt">
                    <text>閱讀:{{item.read_cnt}}</text>
                </view>
            </view>
            <view class="right">
                <image src="{{item.cover1}}"/>
            </view>
            <view style="clear:both"></view>
        </view>
</view>

Js邏輯代碼如下:

var app = getApp()
var sectionData = null
var currentSectionIndex = 0
Page({
  data: {},
  onLoad: function () {
    var that = this
    //獲取分類信息
    wx.request({
        url : 'http://你的服務(wù)器/news/section',
        data : {},
        success : function(res){
          sectionData = res.data.sections;
          sectionData[0]['active'] = true //默認(rèn)選中第一個分類
          that.loadArticles(sectionData[0]['section_id'])
          that.setData({
              sections : sectionData
          });
        }
    })
  },
  onSectionClicked: function(e){
    var sid = e.currentTarget.dataset.sid;
    //刷新選中狀態(tài)
    for(var i in sectionData){
      if(sectionData[i]['section_id'] == sid){
        sectionData[i]['active'] = true
        currentSectionIndex = i
      }
      else
        sectionData[i]['active'] = false
    }
    this.setData({
        sections : sectionData
    });
    //加載文章
    if(sectionData[i]['articles']){
      this.setData({
          articles : sectionData[i]['articles']
      });
    }else{
      this.loadArticles(sid)
    }   
  },
  loadArticles: function(section_id){
    var that = this
    //獲取文章列表
    wx.request({
        url : 'http://你的服務(wù)器/news/article',
        method: 'POST',
        data : {
          section_id:section_id,
          start_id:0,
          limit:10
        },
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success : function(res){
          var articleData = res.data.articles;
          sectionData[currentSectionIndex]['articles'] = articleData
          that.setData({
              articles : articleData
          });
        }
    })
  },
  onArticleClicked: function(e){
    var aid = e.currentTarget.dataset.aid
    wx.navigateTo({
      url: '/pages/detail/detail?article_id='+aid
    })
  }
})

解釋一下,就是從服務(wù)器獲取分類信息,然后根據(jù)分類的section_id再去獲取分類下的文章列表,這邊照理說是要實現(xiàn)下拉刷新和無限加載的,第一版暫時不做,所以參數(shù)里面start_id和limit我寫死了。

這邊我為了防止重復(fù)請求服務(wù)器,把每次分類請求完的數(shù)據(jù)都記錄下來了,詳情見onSectionClicked事件的處理。

注意:POST請求時,header參數(shù)要寫成'Content-Type': 'application/x-www-form-urlencoded',不然服務(wù)器得不到post參數(shù),很奇怪

這邊有個問題是橫向的scroll-view不能隱藏滾動條,非常難看,我沒有查到解決辦法,希望知道的朋友留言說下。

最終效果圖(數(shù)據(jù)是我以前做的一個藏文化App的數(shù)據(jù),不要見怪哈哈):

文章列表

然后是文章詳情

這邊我本來要放棄去做了,因為當(dāng)時做后臺接口的時候文章content是以html代碼形式記錄的,然后客戶端直接webview去解析。但是現(xiàn)在微信小程序并不支持富文本、也不支持iframe、也不支持外鏈視頻。但是偶然間我看見了一個神器:

wxParse微信小程序富文本解析 Github

正好實現(xiàn)了我需要的富文本解析功能,而且圖片還自帶懶加載、自帶全屏瀏覽功能,感謝作者。

所以詳情頁的JS代碼非常簡單:

 

var WxParse = require('../../wxParse/wxParse.js');//引入解析庫
var article_id = ''
Page({
  data:{},
  onLoad:function(options){
    var that = this
    article_id = options.article_id // 獲取文章id
    wx.request({
        url : 'http://你的服務(wù)器/news/detail',
        method: 'POST',
        data : {
          article_id: article_id
        },
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success : function(res){
          var _content = res.data.article['content']
          that.setData({
              article: res.data.article
          });
          WxParse.wxParse('content', 'html', _content, that,0);//富文本解析
        }
    })
  }
})

布局代碼中:

<!--引入庫-->
<import src="../../wxParse/wxParse.wxml"/> 
<!--...其他布局省略-->
<!--解析生成-->
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>

當(dāng)然別忘了在樣式代碼里也引入:

@import "/wxParse/wxParse.wxss";

最終效果圖,點擊圖片還支持全屏瀏覽,非常人性化:

詳情頁

總結(jié)

至此,一個簡單的頭條的就開發(fā)完了。看起來很容易但實際做的時候會遇到很多莫名的bug,主要原因還是微信提供的那一套東西問題太多了。例如:不支持富文本、不支持外鏈、滾動條不能隱藏、百分比布局有時候有問題......

當(dāng)然我相信之后微信也會一次次迭代一次次修復(fù)加強(qiáng)的,所以也不用太擔(dān)心,畢竟微信小程序的理念就是簡單,設(shè)計得太復(fù)雜就沒有意義了。

Todo

  • 增加3幅圖片的item樣式

  • 增加下拉刷新、無限加載

  • 增加用戶登陸

  • 增加收藏功能

  • 增加評論功能

這些功能燈燈會在開發(fā)完成后繼續(xù)和大家分享,目前源碼由于功能不完整暫時沒有在Github上開源,等做完后我再一起開源。對了,整個后臺系統(tǒng)是用ThinkPHP做的,其實并不難,有興趣的同學(xué)可以自己學(xué)學(xué)。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17941.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢