小程序基础入门使用

1. 创建项目

        打开微信开发者工具，选择“创建项目”，填写项目名称和AppID（如果没有，可以先创建一个空白项目）。

        选择保存位置，然后点击“创建”。

2. 页面结构

        在app.json中定义页面路由：

{
  "pages": [
    "pages/index/index",
    "pages/blog-detail/blog-detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序标题",
    "navigationBarTextStyle": "black"
  }
}

        默认window中设置的是每一个页面的样式 也可以在单个页面去写

3. 主页设计

        编辑pages/index/index.wxml，添加列表项：

<view class="container">
  <view wx:for="{{blogs}}" wx:key="*this">
    <view class="blog-item">
      <image src="{{item.cover}}" mode="aspectFill"></image>
      <view class="info">
        <text class="title">{{item.title}}</text>
        <text class="author">{{item.author}}</text>
        <text class="date">{{item.date}}</text>
      </view>
    </view>
  </view>
</view>

        编辑pages/index/index.wxss，添加样式：

.container {
  padding: 20rpx;
}
.blog-item {
  display: flex;
  margin-bottom: 20rpx;
}
.info {
  margin-left: 20rpx;
}

4. 数据绑定与请求

        编辑pages/index/index.js，获取数据并绑定到页面：

Page({
  data: {
    blogs: []
  },
  onLoad: function() {
    this.fetchBlogs();
  },
  fetchBlogs: function() {
    // 这里使用wx.request发起网络请求获取博客数据
    wx.request({
      url: 'https://your-api.com/blogs',
      success: (res) => {
        this.setData({ blogs: res.data });
      }
    });
  }
})

        请求这里可以做一下封装 统一管理