簡單展示一下小成果
在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及以上版本基礎(chǔ)庫?</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>
<!--?九宮格區(qū)域?-->
<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
//?獲取應(yīng)用實例
const?app?=?getApp<IAppOption>()
Page({
??data:?{
????//?存放輪播圖數(shù)據(jù)的；列表
????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
??},
??//獲取輪播圖數(shù)據(jù)的方法
??//?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"
??//??????????????],
??//?????????????????????}
??//?????????????),
??//?事件處理函數(shù)
??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獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認(rèn)单芜，開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
????wx.getUserProfile({
??????desc:?'展示用戶信息',?//?聲明獲取用戶個人信息后的用途蔗彤，后續(xù)會展示在彈窗中项滑，請謹(jǐn)慎填寫
??????success:?(res)?=>?{
????????console.log(res)
????????this.setData({
??????????userInfo:?res.userInfo,
??????????hasUserInfo:?true
????????})
??????}
????})
??},
??getUserInfo(e:?any)?{
????//?不推薦使用getUserInfo獲取用戶信息窗声，預(yù)計自2021年4月13日起朋截，getUserInfo將不再彈出彈窗紧阔，并直接返回匿名的用戶個人信息
????console.log(e)
????this.setData({
??????userInfo:?e.detail.userInfo,
??????hasUserInfo:?true
????})
??}
})
