微信小程序（應用號）開發新聞客戶端的實戰課程

摘要: 本實例將演示從零開發一個微信應用號的過程，頁面輪播與跳轉傳值，實現單元格自定義布局，全部源碼可通過github下載。

下載最新版的微信小程序開發工具，目前是v0.9.092300

下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

git下載地址：http://git.oschina.net/dotton/news

先看下效果圖：

一、新建應用

1.內測階段對於無內測號的開發者，請點無AppId。

2.然后選擇一個本地目錄作為工程目錄。

3.項目名稱任意，設置好目錄，勾上當前目錄創建quick start項目。如圖：

4.點擊添加項目，這時可以運行的效果。是自己的微信個人信息以及一HelloWorld文本框。

5.右邊是調試窗口，有2個警告，是由於沒有AppID導致的，可以暫時忽略，不影響開發。

6.提示一下，在app.json中設置debug:true，這樣控制台看到實時的交互信息，以及將來在js文件中設置斷點，類似與Chrome的調試工具以及Firefox的Firebug。

關於首頁配置：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "debug":true
}

其中pages屬性表明每一個頁面的存在，其中第一條為首頁，即pages/index/index

二、請求網絡API接口

1.前提條件：

這里需要用到聚合數據的新聞接口，前往：https://www.juhe.cn/docs/api/id/235 注冊、申請接口，拿到key，我這里已經申請到一個key：482e213ca7520ff1a8ccbb262c90320a，可以直接拿它做測試，然后就可以將它集成到自己的應用了。

2.使用微信小程序接口來訪問網絡：

改寫index.js文件：

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
  // 訪問聚合數據的網絡接口
  wx.request({
    url: 'http://v.juhe.cn/toutiao/index',
    data: {
     type: '' ,
     key: '482e213ca7520ff1a8ccbb262c90320a'
    },
    header: {
        'Content-Type': 'application/json'
    },
    success: function(res) {
      console.log(res.data)
    }
  })

    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

3.查看效果，檢查Console控制台，得到以下信息：

說明已經成功取得到了數據。

三、將json格式的數據渲染到視圖

這里要用到swipe組件實現大圖輪播，文檔見：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

1.清空原index.wxml內容，加入如下代碼：

<swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="1000">
  <block wx:for="{{topNews}}">
    <swiper-item>
      <image src="{{item.thumbnail_pic_s02}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

2.相應地在index.js文件的onLoad方法中加入如下代碼來獲取網絡數據

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    topNews:[],
    techNews:[]
  },
  onLoad: function () {
    var that = this
  // 訪問聚合數據的網絡接口-頭條新聞
  wx.request({
    url: 'http://v.juhe.cn/toutiao/index',
    data: {
     type: 'topNews' ,
     key: '482e213ca7520ff1a8ccbb262c90320a'
    },
    header: {
        'Content-Type': 'application/json'
    },
    success: function(res) {
      if (res.data.error_code == 0) {
        that.setData({
        topNews:res.data.result.data
        })
      } else {
        console.log('獲取失敗');
      }
    }
  })

  }
})

3.看到輪播已經成功的展示出來了

4.依樣畫葫蘆，同樣操作讀取列表新聞：

<view class="news-list">
  <block wx:for="{{techNews}}">
    <text class="news-item">{{index + 1}}. {{item.title}}</text>
  </block>
</view>

配合樣式表，不然列表文字排版是橫向的，將以下css加到index.wxss中：

.news-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.news-item {
  margin: 10rpx;
}

 

1. 繼續美化，文字列表也采用縮略圖+大標題+出處+日期的形式

樣式表與布局文件 index.wxss

/**index.wxss**/
.news-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.news-item {
  display: flex;
  flex-direction: row;
  height:200rpx;
}

.news-text {
  display: flex;
  flex-direction: column;
}

.news-stamp {
    font-size: 25rpx;
    color:darkgray;
    padding: 0 20rpx;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}

.news-title {
  margin: 10rpx;
  font-size: 30rpx;
}

.container {
  height: 5000rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /*padding: 200rpx 0;*/
  box-sizing: border-box;
}

.list-image {
  width:150rpx;
  height:100rpx;
}

index.wxml

<!--index.wxml-->
<swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="1000">
  <block wx:for="{{topNews}}">
    <swiper-item>
      <image src="{{item.thumbnail_pic_s02}}" mode="aspectFill" class="slide-image" width="375" height="250"/>
    </swiper-item>
  </block>
</swiper>
<view class="container news-list">
  <block wx:for="{{techNews}}">
    <view class="news-item">
      <image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/>
      <view class="news-text">
        <text class="news-title">{{item.title}}</text>
        <view class="news-stamp">
          <text>{{item.author_name}}</text>
          <text>{{item.date}}</text>
        </view>
      </view>
    </view>
  </block>
</view>

四、跳轉詳情頁與傳值

保存當前點擊的新聞條目信息中的title，參見官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

傳值到詳情頁

<!--logs.wxml-->
<view class="container">
  <text class="news-title">{{title}}</text>
  <text class="news-info">暫時找不到WebView的組件接口，於是不能加載網頁數據</text>
</view>
  //事件處理函數
  bindViewTap: function(event) {
    wx.navigateTo({
      url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle
    })
  }

//index.js
   //事件處理函數
  bindViewTap: function(event) {
    wx.navigateTo({
      url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle
    })
  }

<!--index.wxml-->
//加入data-xxx元素來傳值
<view class="container news-list">
  <block wx:for="{{techNews}}">
    <view class="news-item" data-news-title="{{item.title}}" bindtap="bindViewTap">
      <image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/>
      <view class="news-text">
        <text class="news-title">{{item.title}}</text>
        <view class="news-stamp">
          <text>{{item.author_name}}</text>
          <text>{{item.date}}</text>
        </view>
      </view>
    </view>
  </block>
</view>

當然也可以通過獲取全局的變量的方式傳值，這里場景是由一個頁面與子頁面是一對一傳值關系，所以不推薦，可參考quickStart項目中微信個人信息的傳值方式來做。 app.js末尾加上

  globalData:{
    userInfo:null,
    newsItem:null
  }
})

由於未在官方文檔中找到WebView的組件，所以詳情的網頁正文暫時無法實現。

結語

整體開發過程還是比較舒適的，上手難度不高，過程中用到一定的CSS語法，本質上還是體現了一個H5開發模式，WXML實質上一種模板標簽語言。

---

 轉載：https://my.oschina.net/u/1012086/blog/751455