WeChat アプレット (アプリケーション アカウント) 開発ニュース クライアントの例

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

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

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

//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('获取失败');
  }
 }
 })

 }
})

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

/**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-->
<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>

<!--logs.wxml-->
<view class="container">
 <text class="news-title">{{title}}</text>
 <text class="news-info">暂时找不到WebView的组件接口，于是不能加载网页数据</text>
</view>
 //事件处理函数
 bindViewTap: function(event) {
 wx.navigateTo({
  url: &#39;../detail/detail?title=&#39;+event.currentTarget.dataset.newsTitle
 })
 }

//index.js
 //事件处理函数
 bindViewTap: function(event) {
 wx.navigateTo({
  url: &#39;../detail/detail?title=&#39;+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>

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