微信小程序（應(yīng)用號）開發(fā)新聞客戶端實例
下載最新版的微信小程序開發(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)測階段對于無內(nèi)測號的開發(fā)者，請點無AppId。
Paste_Image.png
2.然后選擇一個本地目錄作為工程目錄。
Paste_Image.png
3.項目名稱任意，設(shè)置好目錄，勾上當(dāng)前目錄創(chuàng)建quick start項目。如圖：
Paste_Image.png
4.點擊添加項目，這時可以運行的效果。是自己的微信個人信息以及一HelloWorld文本框。
5.右邊是調(diào)試窗口，有2個警告，是由于沒有AppID導(dǎo)致的，可以暫時忽略，不影響開發(fā)。
Paste_Image.png
6.提示一下，在app.json中設(shè)置debug:true，這樣控制臺看到實時的交互信息，以及將來在js文件中設(shè)置斷點，類似與Chrome的調(diào)試工具以及Firefox的Firebug。
關(guān)于首頁配置：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"debug":true
}
其中pages屬性表明每一個頁面的存在，其中第一條為首頁，即pages/index/index
二、請求網(wǎng)絡(luò)API接口
1.前提條件：
這里需要用到聚合數(shù)據(jù)的新聞接口，前往：https://www.juhe.cn/docs/api/id/235 注冊、申請接口，拿到key，我這里已經(jīng)申請到一個key：482e213ca7520ff1a8ccbb262c90320a，可以直接拿它做測試，然后就可以將它集成到自己的應(yīng)用了。
2.使用微信小程序接口來訪問網(wǎng)絡(luò)：
改寫index.js文件：
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
// 訪問聚合數(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)用實例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
3.查看效果，檢查Console控制臺，得到以下信息：
Paste_Image.png
說明已經(jīng)成功取得到了數(shù)據(jù)。
三、將json格式的數(shù)據(jù)渲染到視圖
這里要用到swipe組件實現(xià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方法中加入如下代碼來獲取網(wǎng)絡(luò)數(shù)據(jù)
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
topNews:[],
techNews:[]
},
onLoad: function () {
var that = this
// 訪問聚合數(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)成功的展示出來了
Paste_Image.png
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;
}
繼續(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)詳情頁與傳值
保存當(dāng)前點擊的新聞條目信息中的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的組件接口，于是不能加載網(wǎng)頁數(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元素來傳值
<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ān)系，所以不推薦，可參考quickStart項目中微信個人信息的傳值方式來做。 app.js末尾加上
globalData:{
userInfo:null,
newsItem:null
}
})
Paste_Image.png
由于未在官方文檔中找到WebView的組件，所以詳情的網(wǎng)頁正文暫時無法實現(xiàn)。
結(jié)語
整體開發(fā)過程還是比較舒適的，上手難度不高，過程中用到一定的CSS語法，本質(zhì)上還是體現(xiàn)了一個H5開發(fā)模式，WXML實質(zhì)上一種模板標(biāo)簽語言。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript異步操作中串行和并行，主要內(nèi)容是寫一下js中es5和es6針對異步函數(shù)，串行執(zhí)行和并行執(zhí)行的方案。已經(jīng)串行和并行結(jié)合使用的例子。,需要的朋友可以參考一下2021-11-11
微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要為大家介紹了如何使用mock.js實現(xiàn)接口測試的自動化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了微信小程序 五星評價功能的實現(xiàn)的相關(guān)資料,這里附有實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2017-03-03
這篇文章主要為大家介紹了閉包結(jié)合遞歸等于柯里化的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序progress組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
服務(wù)器端的響應(yīng)是302 Found，在ajax的回調(diào)函數(shù)中能夠獲取這個狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進行重定向嗎？讓我們來一起動手寫寫代碼看看實際情況吧。2013-10-10
這篇文章主要介紹了微信小程序 textarea 詳解及簡單使用方法的相關(guān)資料,這里附有實現(xiàn)實例代碼，及解決textarea沒有bindchange事件，無法在輸入時給變量賦值的方法， 需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 本地存儲實例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript知識:構(gòu)造函數(shù)也是函數(shù)
構(gòu)造函數(shù)就是初始化一個實例對象，對象的prototype屬性是繼承一個實例對象。本文給大家分享javascript構(gòu)造函數(shù)詳解，對js構(gòu)造函數(shù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2021-08-08