正文

小程序框架文件：掌握微信小程序开发必备的文件结构详解

/0 浏览量
0401

在微信小程序的世界里，了解框架文件的结构就像了解乐器的各个部件一样。只有掌握了这些部件，你才能创作出美妙的音乐。下面，我将带你深入了解微信小程序开发中必备的文件结构。

1. 小程序根目录下的文件

1.1 app.js

  • 作用：小程序的逻辑。
  • 内容：通常包含全局变量、函数等。
  • 示例：
// app.js
App({
  globalData: {
    userInfo: null
  }
})

1.2 app.json

  • 作用：小程序的全局配置。
  • 内容：定义了小程序的窗口表现、页面路径、网络超时等。
  • 示例：
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

1.3 app.wxss

  • 作用：小程序的公共样式表。
  • 内容：定义了全局的样式规则。
  • 示例：
/* app.wxss */
page {
  background-color: #f8f8f8;
}

2. pages目录下的文件

2.1 页面结构文件

  • 作用：页面结构。
  • 内容：通常是.wxml文件。
  • 示例：
<!-- index.wxml -->
<view class="container">
  <view class="userinfo">
    <view class="nickname">{{userInfo.nickName}}</view>
    <image class="avatar" src="{{userInfo.avatarUrl}}" mode="aspectFit"></image>
  </view>
</view>

2.2 页面逻辑文件

  • 作用：页面逻辑。
  • 内容：通常是.js文件。
  • 示例：
// index.js
Page({
  data: {
    userInfo: null
  },
  onLoad: function() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo
      })
    } else if (this.data.canIUse) {
      // 由于 userInfom 被缓存了，无需重复获取
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo
          })
        }
      })
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo
          })
        }
      })
    }
  }
})

2.3 页面样式文件

  • 作用：页面样式。
  • 内容：通常是.wxss文件。
  • 示例：
/* index.wxss */
.container {
  padding: 20px;
}
.userinfo {
  display: flex;
  align-items: center;
}
.nickname {
  margin-left: 10px;
}
.avatar {
  width: 100px;
  height: 100px;
}

通过以上介绍，相信你已经对微信小程序的文件结构有了初步的了解。在实际开发中，这些文件相互配合，共同构成了一个完整的小程序。希望这篇文章能帮助你更好地掌握微信小程序的开发技巧。

-- 展开阅读全文 --