新的一年，祝大家新年快樂！當(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é)。