实验十二智能手机互联网程序设计（微信程序方向）实验报告

请完成下方两个页面的编写，并设置tabbar导航，通过tabbar进行切换

二、实验步骤与结果（给出对应的代码或运行结果截图） index.wxml <view class="container">     <View class="header">       <text class="title">商品列表</text>     </View>     <view class="product-list">       <block wx:for="{{products}}" wx:key="id">         <view class="product-item">           <image class="product-image" src="{{item.image}}" />           <view class="product-info">             <text class="product-name">{{item.name}}</text>             <text class="product-price">{{item.price}}</text>           </view>         </view>       </block>     </view> </view> index.wxss page {   height: 100vh;   display: flex;   flex-direction: column; } .scrollarea {   flex: 1;   overflow-y: hidden; } .log-item {   margin-top: 20rpx;   text-align: center; } .log-item:last-child {   padding-bottom: env(safe-area-inset-bottom); } index.js Page({   /**    * 页面的初始数据    */   data: {     products:[       {id: 1,name:'商品1',price:'￥10',image:'/pages/image/123.jpg'},       {id: 2,name:'商品2',price:'￥20',image:'/pages/image/456.jpg'},       {id: 3,name:'商品3',price:'￥30',image:'/pages/image/789.jpg'}     ]   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {        },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {        },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {        },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {        },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {        },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {        },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {        },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {        } }) me.wxml <view class="container">     <View class="header">       <text class="title">个人信息</text>     </View>     <view class="profile">       <image class="avatar" src="{{userInfo.avatar}}}" mode="widthFix"/>       <view class="info-list">         <view class="info-item">         <text class="label">姓名：</text>         <text>{{userInfo.name}}</text>         </view>         <view class="info-item">         <text class="label">邮箱：</text>         <text>{{userInfo.email}}</text>         </view>         <view class="info-item">         <text class="label">电话：</text>         <text>{{userInfo.phone}}</text>         </view>       </view>     </view> </view> me.wxss .container{   padding: 20rpx;   background-color:lightblue ; } .header{ text-align: center;   margin-bottom: 20rpx; } .title{   font-size: 36rpx;  font-weight: bold; } .profile{   display: flex;   flex-direction: column;   align-items: center; } .avatar{   width: 200rpx;   height: 200rpx;   border-radius: 100rpx;   padding-bottom: 20rpx;   box-shadow:0 4rpx 10rpx rgba(0,0,0,0.1); } .info-list{   width: 100%; } .info-item{   display: flex;   justify-content: space-between;   padding: 20rpx;   background-color: white;   border-radius: 10rpx;   box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1);   margin-bottom: 20rpx; } .label{   font-size: 32rpx;   font-weight: bold; } me.js Page({   /**    * 页面的初始数据    */   data: {     userInfo:{       avatar:'/pages/image/download.jpg',       name:'樱花',       email:'nihaoshijie@example.com',       phone:'123-465-7980'     }   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {        },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {        },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {        },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {        },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {        },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {        },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {        },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {        } }) app.json {   "pages": [     "pages/me/me",     "pages/index/index",     "pages/logs/logs"   ],   "tabBar": {     "list":[{       "pagePath": "pages/index/index",       "text": "主页",      "iconPath": "/pages/image/主页.jpg",      "selectedIconPath": "/pages/image/主页2.jpg"     },{       "pagePath": "pages/me/me",       "text": "我的",       "iconPath": "/pages/image/我的.jpg",       "selectedIconPath": "/pages/image/我的2.jpg"     }]   },   "window": {     "navigationBarTextStyle": "black",     "navigationBarTitleText": "Weixin",     "navigationBarBackgroundColor": "#ffffff"   },   "style": "v2",   "componentFramework": "glass-easel",   "sitemapLocation": "sitemap.json",   "lazyCodeLoading": "requiredComponents" }

三、问题总结与体会