/**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="https://www.jb51.net/{{item.thumbnail_pic_s02}}" mode="aspectFill"/> </swiper-item> </block> </swiper> <view> <block wx:for="{{techNews}}"> <view> <image src="https://www.jb51.net/{{item.thumbnail_pic_s}}" mode="aspectFill"/> <view> <text>{{item.title}}</text> <view> <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>
<text>{{title}}</text>
<text>暂时找不到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> <block wx:for="{{techNews}}"> <view data-news-title="{{item.title}}" bindtap="bindViewTap"> <image src="https://www.jb51.net/{{item.thumbnail_pic_s}}" mode="aspectFill"/> <view> <text>{{item.title}}</text> <view> <text>{{item.author_name}}</text> <text>{{item.date}}</text> </view> </view> </view> </block> </view>
当然也可以通过获取全局的变量的方式传值，这里场景是由一个页面与子页面是一对一传值关系，所以不推荐，可参考quickStart项目中微信个人信息的传值方式来做。 app.js末尾加上
globalData:{
userInfo:null,
newsItem:null
}
})
Paste_Image.png
由于未在官方文档中找到WebView的组件，所以详情的网页正文暂时无法实现。
结语
整体开发过程还是比较舒适的，上手难度不高，过程中用到一定的CSS语法，本质上还是体现了一个H5开发模式，WXML实质上一种模板标签语言。