微信小程序简单新闻列表

要实现一个简单的微信小程序新闻列表，可以按照以下步骤进行：

1. 在小程序后台创建一个新页面，命名为“news”。

2. 在 news.wxml 文件中，使用一个列表组件来显示新闻列表。例如：

<view class="news-list">
  <block wx:for="{{newsList}}" wx:key="{{index}}">
    <view class="news-item">
      <navigator url="/pages/detail/detail?id={{item.id}}">
        <image src="{{item.imgUrl}}" mode="aspectFill"></image>
        <text class="news-title">{{item.title}}</text>
      </navigator>
    </view>
  </block>
</view>

这里使用了一个 block 标签和 wx:for 循环来遍历新闻列表，并用 navigator 标签来实现点击跳转到新闻详情页的效果。

3. 在 news.js 文件中，定义一个变量 newsList 来存储新闻列表数据。例如：

Page({
  data: {
    newsList: [
      {
        id: 1,
        title: "新闻标题1",
        imgUrl: "https://xxx.com/xxx.jpg"
      },
      {
        id: 2,
        title: "新闻标题2",
        imgUrl: "https://xxx.com/xxx.jpg"
      },
      // ...
    ]
  }
})

这里只是简单地定义了两条新闻数据，实际应用中需要根据具体情况来动态获取数据。

4. 在 news.wxss 文件中，可以设置一些样式来美化新闻列表的显示效果。例如：

.news-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.news-item {
  width: 48%;
  margin-bottom: 20rpx;
}

.news-title {
  font-size: 28rpx;
  margin-top: 10rpx;
}

这里使用了 flex 布局来实现新闻列表的自适应排列，同时设置了一些字体和间距等样式。

5. 最后，在 app.json 文件中注册新闻详情页的路由。例如：

{
  "pages": [
    "pages/news/news",
    "pages/detail/detail"
  ]
}

这样，一个简单的微信小程序新闻列表就完成了。需要注意的是，这只是一个简单的示例，实际应用中还需要根据具体需求来进行更加复杂的开发。