微信小程序（應(yīng)用號(hào)）開(kāi)發(fā)新聞客戶端實(shí)例

更新時(shí)間：2016年10月24日 15:59:32 投稿：lqh

這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）開(kāi)發(fā)新聞客戶端實(shí)例的相關(guān)資料,需要的朋友可以參考下

下載最新版的微信小程序開(kāi)發(fā)工具，目前是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

先看下效果圖：

Paste_Image.png

一、新建應(yīng)用

1.內(nèi)測(cè)階段對(duì)于無(wú)內(nèi)測(cè)號(hào)的開(kāi)發(fā)者，請(qǐng)點(diǎn)無(wú)AppId。

Paste_Image.png

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

Paste_Image.png

3.項(xiàng)目名稱任意，設(shè)置好目錄，勾上當(dāng)前目錄創(chuàng)建quick start項(xiàng)目。如圖：

Paste_Image.png

4.點(diǎn)擊添加項(xiàng)目，這時(shí)可以運(yùn)行的效果。是自己的微信個(gè)人信息以及一HelloWorld文本框。
5.右邊是調(diào)試窗口，有2個(gè)警告，是由于沒(méi)有AppID導(dǎo)致的，可以暫時(shí)忽略，不影響開(kāi)發(fā)。

Paste_Image.png

6.提示一下，在app.json中設(shè)置debug:true，這樣控制臺(tái)看到實(shí)時(shí)的交互信息，以及將來(lái)在js文件中設(shè)置斷點(diǎn)，類似與Chrome的調(diào)試工具以及Firefox的Firebug。

關(guān)于首頁(yè)配置：

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

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

二、請(qǐng)求網(wǎng)絡(luò)API接口

1.前提條件：

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

2.使用微信小程序接口來(lái)訪問(wèn)網(wǎng)絡(luò)：

改寫(xiě)index.js文件：

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
 data: {
 motto: 'Hello World',
 userInfo: {}
 },
 //事件處理函數(shù)
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 onLoad: function () {
 // 訪問(wèn)聚合數(shù)據(jù)的網(wǎng)絡(luò)接口
 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
 //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
 app.getUserInfo(function(userInfo){
  //更新數(shù)據(jù)
  that.setData({
  userInfo:userInfo
  })
 })
 }
})

3.查看效果，檢查Console控制臺(tái)，得到以下信息：

Paste_Image.png

說(shuō)明已經(jīng)成功取得到了數(shù)據(jù)。

三、將json格式的數(shù)據(jù)渲染到視圖

這里要用到swipe組件實(shí)現(xiàn)大圖輪播，文檔見(jiàn)：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
1.清空原index.wxml內(nèi)容，加入如下代碼：

<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.相應(yīng)地在index.js文件的onLoad方法中加入如下代碼來(lái)獲取網(wǎng)絡(luò)數(shù)據(jù)

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
 data: {
 topNews:[],
 techNews:[]
 },
 onLoad: function () {
 var that = this
 // 訪問(wèn)聚合數(shù)據(jù)的網(wǎng)絡(luò)接口-頭條新聞
 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.看到輪播已經(jīng)成功的展示出來(lái)了

Paste_Image.png

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

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

繼續(xù)美化，文字列表也采用縮略圖+大標(biāo)題+出處+日期的形式

Paste_Image.png

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

四、跳轉(zhuǎn)詳情頁(yè)與傳值

保存當(dāng)前點(diǎn)擊的新聞條目信息中的title，參見(jiàn)官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

傳值到詳情頁(yè)

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

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

<!--index.wxml-->
//加入data-xxx元素來(lái)傳值
<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>

當(dāng)然也可以通過(guò)獲取全局的變量的方式傳值，這里場(chǎng)景是由一個(gè)頁(yè)面與子頁(yè)面是一對(duì)一傳值關(guān)系，所以不推薦，可參考quickStart項(xiàng)目中微信個(gè)人信息的傳值方式來(lái)做。 app.js末尾加上

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

Paste_Image.png

由于未在官方文檔中找到WebView的組件，所以詳情的網(wǎng)頁(yè)正文暫時(shí)無(wú)法實(shí)現(xiàn)。

結(jié)語(yǔ)

整體開(kāi)發(fā)過(guò)程還是比較舒適的，上手難度不高，過(guò)程中用到一定的CSS語(yǔ)法，本質(zhì)上還是體現(xiàn)了一個(gè)H5開(kāi)發(fā)模式，WXML實(shí)質(zhì)上一種模板標(biāo)簽語(yǔ)言。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

微信小程序（應(yīng)用號(hào)）開(kāi)發(fā)新聞客戶端實(shí)例

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具