APPlet day04-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47874905/article/details/125151711

该博客展示了如何在小程序中实现首页的搜索功能和场景图片列表。通过`wx.request`从API获取数据，并使用`setData`更新页面。样式设计包括搜索框、图片列表等，页面布局清晰，使用了如`wx:for`和`wx:key`等微信小程序的特性。此外，还定义了`getUserProfile`和`getUserInfo`等函数，可能涉及用户信息的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    scene:[],//Top search box below the sence images list
  },
  // 事件处理函数
  bindViewTap() {
  }, 

  onLoad() {
    wx.request({
      url: 'https://api-v2.chuangkit.com/mobile/main/getMainMiniProgramHomeInfo.do',
      success: res=>{
        console.log(res);
        this.setData({
          scene:res.data.body.data.scene.slice(0,8),
        })
      }
    })
  },

  getUserProfile(e) {
  },
  getUserInfo(e) {
  }
})

<view class="container">
  <view class="search">
    <input type="text" 
    placeholder="20000+ 免费模板任你搜索"
    placeholder-style="color:#90EE90"></input>
    <image src="/image/search.png"></image>
  </view>  

  <view class="scene">
    <view wx:for="{{scene}}" wx:key="index">
      <image src="{{item.thumbUrl}}"></image>      
      <text>{{item.name}}</text>
    </view>
  </view>
</view>

.search{
  position: relative;
}

input{
  text-align: center; 
  background-color: #f8f8f8; 
  margin: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
}

.search image{
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  top: 25rpx;
  left: 130rpx;
}

{
  "entryPagePath": "pages/index/index",
  "pages":[
    "pages/index/index",
    "pages/design/design",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#90EE90",
    "navigationBarTitleText": "创客贴",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list":[{
      "pagePath":"pages/index/index",
      "text":"Home",
      "iconPath":"/image/index.png",
      "selectedIconPath":"/image/index-active.png"
    },
    {
      "pagePath":"pages/design/design",
      "text":"Design",
      "iconPath":"/image/design.png",
      "selectedIconPath":"/image/design-active.png"
    },
    {
      "pagePath":"pages/mine/mine",
      "text":"User",
      "iconPath":"/image/mine.png",
      "selectedIconPath":"/image/mine-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}