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

本實例將演示從零開發一個微信應用號的過程，頁面輪播與跳轉傳值，實現單元格自定義佈局，所有源碼可經過github下載。
下載最新版的微信小程序開發工具，目前是v0.9.092300
下載地址：https://mp.weixin.qq.com/debu...

官方文檔：https://mp.weixin.qq.com/debu...

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

先看下效果圖：

1、新建應用

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

2、請求網絡API接口

1.前提條件：

這裏須要用到聚合數據的新聞接口，前往：https://www.juhe.cn/docs/api/... 註冊、申請接口，拿到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控制檯，獲得如下信息：

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

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

這裏要用到swipe組件實現大圖輪播，文檔見：https://mp.weixin.qq.com/debu...

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;  
}

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

樣式表與佈局文件
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>

4、跳轉詳情頁與傳值

保存當前點擊的新聞條目信息中的title，參見官方文檔：https://mp.weixin.qq.com/debu...

傳值到詳情頁

<!--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  
  }  
})