微信小程序（二）

最新推荐文章于 2024-03-16 15:09:45 发布

十二er

最新推荐文章于 2024-03-16 15:09:45 发布

阅读量455

点赞数

本文链接：https://blog.youkuaiyun.com/aaaaaayuan/article/details/81186307

版权

本文详细介绍了微信小程序页面的构成，包括addPage.js、addPage.json、addPage.wxml和addPage.wxss各自的功能。addPage.js负责数据存储和网络请求，addPage.json用于设置页面导航栏样式，addPage.wxml呈现用户界面，而addPage.wxss则用于样式设计。同时，文章讲解了页面解析的过程，重点关注了.wxml和.wxss文件如何组合成界面，并通过index.wxml和index.wxss的例子说明了视图结构、事件监听和数据绑定的实现。

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

一个页面的具体实现原理

页面的构成

上一篇有提到过如何增加页面（在app.json中加入pages的路径，名称随便起系统会自动创建出来）

之前创建了一个页面叫做logs，logs里面包含四个文件* addpage.js、addpage.json、addpage.wxml、addpage.wxss*这四个对应的作用是什么呐？

addPage.js 页面数据的存储，网络请求的加载都是在这里
addPage.json 用于设置导航栏样式，和app.json性质一样，如果没设置样式，默认用app.json中的样式
addPage.wxml （WeiXin Markup Language）页面的效果都在这里面，就是展现给用户的界面
addPage.wxss (WeiXin Style Sheets)页面样式设计，页面的一些样式属性都写在这里

页面的解析

1.addPage.js解析

// pages/addPage/addPage.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

这里面注释都是系统自动创建的(注意：修改过的代码记得保存，否者效果无效！！！）

2.addPage.wxml与addPage.wxss

.wxml与.wxss构成了整个界面，我们自己新建的addPage文件没什么样式，所以我就拿index.wxml和index.wxss来讲解

1.index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <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>

看代码对应的视图，从代码看过去黑色框（view）包含两个黄色框（view），第一个黄色框又包含两个image和text，界面布局大致就是这样，看里面具体代码，黑色框view里有一个属性class，这个class可以理解为ID这个class是用来关联index.wxss,可以理解为黑色框的view设置为”container”的样式，继续看第一个黄色框View，同理可以知道第二个黄色框View的样式设为”userinfo”,咦，bindtap是什么意思呐？bindtap你可以理解为事件监听，系统定义的固定字段，写事件一定会用到这个”bindViewTap”，它是自定义的方法名，可以随意修改，但是bindtap字段是不可修改的否则代码无效，再说说绿色框中的text，有没有注意到{{motto}}{{userInfo.nickName}}，这个就是给视图赋值，就是界面上你看到的HelloWord就是这么设置的，”motto、userInfo.nickName”字段是在index.js中的data里面，这里要强调的是我们在调用index.js里data数据时，赋值的时候要记得加入{{data}}两个中括号，这样系统才能识别数据。

1.index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

页面实现完成