寫在前面

新的一年，祝大家新年快樂！當然對於程式設計師來說，新的一年，也要有新的改變。因此燈燈決定湊熱鬧編寫微信小程式啦！

上一篇文章《記一次小程式開發過程》中，燈燈大致寫了下自己第一次開發小程式的感受和流程。這一次燈燈會詳細記錄下自己製作一個小程式的思路、遇到的問題、涉及到的程式碼等和大家分享。

要做個什麼

首先我們要確定做一個什麼小程式，我決定先做一個很常規的新聞App練練手，樣式就模仿頭條啦！

開發分為兩次進行，第一次完成新聞列表、內容閱讀這兩個常規功能，不涉及使用者互動。第二次完善功能，加上評論、收藏等互動功能。

本文就和大家一起來製作第一個無使用者系統版本。

應用構架非常簡單，就是2個頁面：新聞列表、新聞詳情。

今日頭條截圖

當然樣式不一定要做那麼複雜先，比如我們就統一1幅封面預覽圖，暫時不做3幅圖的item。

動手開發

首先是首頁，即新聞列表

佈局上，頂部一個懸浮固定的分類條，用橫向的scroll-view即可實現。下面是列表，迴圈渲染每個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類，就是當前選中的分類，我把字型顏色設為了紅色，當然你也可以加個橫線。

文章列表佈局如下：

<!--文章列表-->
<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">
                    <!--這邊可以加副標題-->
                </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://你的伺服器/news/section',
        data : {},
        success : function(res){
          sectionData = res.data.sections;
          sectionData[0]['active'] = true //預設選中第一個分類
          that.loadArticles(sectionData[0]['section_id'])
          that.setData({
              sections : sectionData
          });
        }
    })
  },
  onSectionClicked: function(e){
    var sid = e.currentTarget.dataset.sid;
    //重新整理選中狀態
    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://你的伺服器/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
    })
  }
})

解釋一下，就是從伺服器獲取分類資訊，然後根據分類的section_id再去獲取分類下的文章列表，這邊照理說是要實現下拉重新整理和無限載入的，第一版暫時不做，所以引數裡面start_id和limit我寫死了。

這邊我為了防止重複請求伺服器，把每次分類請求完的資料都記錄下來了，詳情見onSectionClicked事件的處理。

注意：POST請求時，header引數要寫成'Content-Type': 'application/x-www-form-urlencoded'，不然伺服器得不到post引數，很奇怪

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

最終效果圖（資料是我以前做的一個藏文化App的資料，不要見怪哈哈）：

文章列表

然後是文章詳情

這邊我本來要放棄去做了，因為當時做後臺介面的時候文章content是以html程式碼形式記錄的，然後客戶端直接webview去解析。但是現在微信小程式並不支援富文字、也不支援iframe、也不支援外鏈視訊。但是偶然間我看見了一個神器：

wxParse微信小程式富文字解析 Github

正好實現了我需要的富文字解析功能，而且圖片還自帶懶載入、自帶全屏瀏覽功能，感謝作者。

所以詳情頁的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://你的伺服器/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}}"/>

當然別忘了在樣式程式碼裡也引入：

@import "/wxParse/wxParse.wxss";

最終效果圖，點選圖片還支援全屏瀏覽，非常人性化：

詳情頁

總結

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

當然我相信之後微信也會一次次迭代一次次修復加強的，所以也不用太擔心，畢竟微信小程式的理念就是簡單，設計得太複雜就沒有意義了。

Todo

• 增加3幅圖片的item樣式

• 增加下拉重新整理、無限載入

• 增加使用者登陸

• 增加收藏功能

• 增加評論功能

這些功能燈燈會在開發完成後繼續和大家分享，目前原始碼由於功能不完整暫時沒有在Github上開源，等做完後我再一起開源。對了，整個後臺系統是用ThinkPHP做的，其實並不難，有興趣的同學可以自己學學。

如果你也想做微信小程式，歡迎聯絡燈燈交流、外包（請註明新增理由）。

燈燈的部落格 www.winterfeel.com