新的一年，祝大家新年快樂(lè)！當(dāng)然對(duì)于程序員來(lái)說(shuō)，新的一年，也要有新的改變。因此燈燈決定湊熱鬧編寫(xiě)微信小程序啦！

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

要做個(gè)什么

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

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

本文就和大家一起來(lái)制作第一個(gè)無(wú)用戶系統(tǒng)版本。

應(yīng)用構(gòu)架非常簡(jiǎn)單，就是2個(gè)頁(yè)面：新聞列表、新聞詳情。

今日頭條截圖

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

動(dòng)手開(kāi)發(fā)

首先是首頁(yè)，即新聞列表

布局上，頂部一個(gè)懸浮固定的分類條，用橫向的scroll-view即可實(shí)現(xiàn)。下面是列表，循環(huán)渲染每個(gè)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;
}

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

文章列表布局如下：

<!--文章列表-->
<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)選中第一個(gè)分類
          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再去獲取分類下的文章列表，這邊照理說(shuō)是要實(shí)現(xiàn)下拉刷新和無(wú)限加載的，第一版暫時(shí)不做，所以參數(shù)里面start_id和limit我寫(xiě)死了。

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

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

這邊有個(gè)問(wèn)題是橫向的scroll-view不能隱藏滾動(dòng)條，非常難看，我沒(méi)有查到解決辦法，希望知道的朋友留言說(shuō)下。

最終效果圖（數(shù)據(jù)是我以前做的一個(gè)藏文化App的數(shù)據(jù)，不要見(jiàn)怪哈哈）：

文章列表

然后是文章詳情

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

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

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

所以詳情頁(yè)的JS代碼非常簡(jiǎn)單：

 

var WxParse = require('../../wxParse/wxParse.js');//引入解析庫(kù)
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);//富文本解析
        }
    })
  }
})

布局代碼中：

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

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

@import "/wxParse/wxParse.wxss";

最終效果圖，點(diǎn)擊圖片還支持全屏瀏覽，非常人性化：

詳情頁(yè)

總結(jié)

至此，一個(gè)簡(jiǎn)單的頭條的就開(kāi)發(fā)完了。看起來(lái)很容易但實(shí)際做的時(shí)候會(huì)遇到很多莫名的bug，主要原因還是微信提供的那一套東西問(wèn)題太多了。例如：不支持富文本、不支持外鏈、滾動(dòng)條不能隱藏、百分比布局有時(shí)候有問(wèn)題......

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

Todo

• 增加3幅圖片的item樣式

• 增加下拉刷新、無(wú)限加載

• 增加用戶登陸

• 增加收藏功能

• 增加評(píng)論功能

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