微信购物小程序搭建

<!-- index.wxml -->
<view class="container">
  <view class="search-bar">
    <input type="text" placeholder="搜索商品" bindinput="onSearchInput" />
  </view>
  <scroll-view scroll-y class="product-list">
    <view class="product-item" wx:for="{{products}}" wx:key="id">
      <image src="{{item.image}}" class="product-image" />
      <view class="product-info">
        <text class="product-name">{{item.name}}</text>
        <text class="product-price">¥{{item.price}}</text>
      </view>
    </view>
  </scroll-view>
</view>

// index.js
Page({
  data: {
    products: []
  },
  onLoad: function () {
    this.fetchProducts();
  },
  fetchProducts: function () {
    wx.request({
      url: 'https://api.example.com/products',
      success: (res) => {
        this.setData({
          products: res.data
        });
      },
      fail: (err) => {
        console.error('Failed to fetch products', err);
      }
    });
  },
  onSearchInput: function (e) {
    const keyword = e.detail.value;
    // 根据关键词搜索商品
  }
});