2023-09-23-一小步

2023-09-22  本文已影响0人  逢笔生辉

简单展示一下小成果

在wxss中

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;  color: #aaa;}.userinfo-avatar {  overflow: hidden;  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.usermotto {  margin-top: 200px;}swiper {  height: 300px;}swiper image{  width: 100%;  height: 100%;}.grid_list{  display: flex;  flex-wrap: wrap;}.grid_item{  width: 33%;  height: 200rpx;  flex-direction: column;  align-items: center;  justify-content: center;  border-right: 1px solid #efefef;  border-bottom: 1px solid #efefef;  box-sizing:border-box ;}.grid_item image{  width: 60rpx;  height: 60rpx;}.grid_item text{  font-size: 24rpx;  margin-top: 1;  margin-top: 10rpx;}.img_box{  display: flex;  flex-direction: row;  padding: 10px 2px;}.img_box image{  height: 20%;  }

在wxml中

<!-- index.wxml

<view class="container">

  <view class="userinfo">

    <block wx:if="{{canIUseOpenData}}">

      <view class="userinfo-avatar" bindtap="bindViewTap">

        <open-data type="userAvatarUrl"></open-data>

      </view>

      <open-data type="userNickName"></open-data>

    </block>

    <block wx:elif="{{!hasUserInfo}}">

      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

      <view wx:else> 请使用1.4.4及以上版本基础库 </view>

    </block>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

  <view class="usermotto">

    <text class="user-motto">{{motto}}</text>

  </view>

</view> -->

<swiper   display-multiple-items="1"  circular="true" indicator-dots>

  <swiper-item wx:key="{{index}}" wx:for="{{swiperlist}}">

   <image src="{{item}}" mode="widthFix"/>

   </swiper-item>

</swiper>

<!-- 九宫格区域 -->

<view class="grid_list">

  <view class="grid_item"  wx:for="{{grid_lis}}" wx:key="index" >

    <image src="{{item.src}}"/>

    <text>{{item.name}}

    </text>

  </view>

</view>

<view class="img_box">

<image src="../../picture/图片1.png" mode="widthFix"/>

<image src="../../picture/图片4.png" mode="widthFix"/>

</view>

在

在js中

// index.ts

// 获取应用实例

const app = getApp<IAppOption>()

Page({

  data: {

    // 存放轮播图数据的；列表

    swiperlist:{}

    ,

    grid_lis:[],

    motto: 'Hello World',

    userInfo: {},

    hasUserInfo: false,

    canIUse: wx.canIUse('button.open-type.getUserInfo'),

    canIUseGetUserProfile: false,

    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false

  },

  //获取轮播图数据的方法

  // getSwiperlist() 

  // {

  //   wx.request(

  //     {url:"https://ecook.cn/",

  //     method:"GET",

  //     header: {

  //       "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.69"

  //     },

  //     success: (res)=>{

  //              this.setData({swiperlist:["https://pic.ecook.cn/web/259030835.jpg!wl280"

  //         ,"https://pic.ecook.cn/web/257460339.jpg!wl280",

  //         "https://pic.ecook.cn/web/2022072808594812258035034.jpg!wl280"

  //              ],

  //                     }

  //             ),

  // 事件处理函数

  bindViewTap() {

    wx.navigateTo({

      url: '../logs/logs',

    })

  },

  onLoad() {

    // @ts-ignore

    if (wx.getUserProfile) {

      this.setData({

        canIUseGetUserProfile: true

      })

    }

    // this.getSwiperlist()

    this.setData({"grid_lis[0]":{src:"http://s1.aigei.com/src/img/png/67/67aa093308fa4f588e7773d7d5b4f3d2.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:9LKRsh2HX3z6BoRgMxdabs6YLCk=",name:"胡萝卜"},"grid_lis[1]":

    {src:"https://s1.aigei.com/src/img/png/08/0853f67911dd4223b1bcd48e75947cef.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:TrYqql756YOiCWDI7svIgjw6WLE=",name:"西瓜"},

"grid_lis[2]":{src:"https://s1.4sai.com/src/img/png/38/382fb89572a74d638bc53f4fb06e9729.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:U0-joX1udLJf-R7C-UTtqKzhfSY=",name:"锅"},"grid_lis[3]":{src:"https://s1.4sai.com/src/img/png/26/26946528065946a2ac34e2c0980454c3.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:f1kQUSsTteh-eZdktEymJKmU5nI=",name:"皮卡丘"},"grid_lis[4]":{src:"https://s1.aigei.com/src/img/png/74/7482442e72b94a17b437cd095d153903.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:qdvhNK4OIfKdrnF8ck6Im4a0a0s=",name:"牛肉"},"grid_lis[5]":{src:"https://s1.aigei.com/src/img/png/5d/5d242a078efb453cacb60a73629c1f8a.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:rPoMSWaRC1-BT-kgabpn0DbAi-I=",name:"包子"},"grid_lis[6]":{src:"https://s1.4sai.com/src/img/png/46/46f545e3ae814376ac9678c659d4d555.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:tjCDjukwyH3DhpZw3nbdBUSeG0I=",name:"面条"},"grid_lis[7]":{src:"https://s1.aigei.com/src/img/png/a7/a7ffd4494d1840c1a3eaac5418caae24.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:3ZZMqCfX7liNxbj-IYMy_X021_Q=",name:"饼"},"grid_lis[8]":{src:"https://s1.4sai.com/src/img/png/c0/c07450b1580e490daaaa00d3cbeb0c17.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:rdW-ztxl_UI07S001lGL793dM6c=",name:"蛋糕"}}),

this.setData({swiperlist:["https://pic.ecook.cn/web/259030835.jpg!wl280"

  ,"https://pic.ecook.cn/web/257460339.jpg!wl280",

  "https://pic.ecook.cn/web/2022072808594812258035034.jpg!wl280"

       ]})

      console.log(this.data.grid_lis)}

,

  getUserProfile() {

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

    wx.getUserProfile({

      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {

        console.log(res)

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    })

  },

  getUserInfo(e: any) {

    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息

    console.log(e)

    this.setData({

      userInfo: e.detail.userInfo,

      hasUserInfo: true

    })

  }

})

上一篇 下一篇

猜你喜欢

热点阅读