微信小程序怎么新建页面-猿码集

微信小程序怎么新建页面

微信小程序是一款基于微信快速开发的应用程序，是一种轻量级的应用程序模式，而随着微信小程序的应用范围越来越广，不少开发者也想学会用微信小程序来进行开发。本文将为您讲解微信小程序如何新建页面。

1.使用微信开发者工具创建新页面

在微信小程序的开发过程中，我们要用到微信小程序的开发者工具，而新建一个页面也是必不可少的步骤之一。

首先，我们需要在开发者工具中选择一个工程，然后在工程目录下找到 pages 目录。在 pages 目录中，每一个子目录代表着一个页面，也就是说，每一个子目录下面都应该有两个文件，一个是 js 文件，一个是 wxml 文件。在这里，我们可以通过两种方式来新建一个页面。

1.1 通过右键菜单创建页面

我们可以通过右键菜单的方式来新建一个页面。

步骤如下：

1.右键 pages 目录

2.选择新建页面

3.填写页面名称

4.确定新建

这样，一个新页面的文件夹就建立完毕，我们可以对其进行编辑与开发。

1.2 通过菜单栏创建页面

我们也可以通过菜单栏的方式来新建一个页面。

步骤如下：

1.选择菜单栏中的文件

2.选择新建页面

3.填写页面名称

4.确定新建

同样的，这样一个新页面的文件夹也建立完毕，我们也可以对其进行编辑与开发。

2.新建页面的文件与代码

我们新建一个页面之后，会在框架内自动生成一个子目录，这个子目录代表着我们新建的页面，并包括两个文件：一个 wxml 文件，一个 js 文件。

2.1 WXML 文件

wxml 文件是微信小程序的页面描述语言，类似于 HTML 语言。它描述了页面的结构。

以下是一个示例页面的 wxml 代码：


<view class="container">
  <view class="userinfo">
    <button class="userinfo-avatar" open-type="getUserInfo" bindtap="getUserInfo">
      <image class="avatar" src="{{userInfo.avatarUrl}}" background-size="cover" />
    </button>
    <text class="userinfo-nickname">{{userInfo.nickName}}
  </view>
  <view class="usermotto">
    <text class="user-motto-text">{{motto}}
  </view>
</view>

在这个示例中，我们可以看到，wxml 代码描述了一个包含用户头像、昵称和座右铭的页面。

2.2 JS 文件

js 文件是微信小程序的页面逻辑描述语言，描述了页面的行为和事件处理。

以下是一个示例页面的 js 代码：


Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  getUserInfo: function (e) {
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo
    })
  }
})

在这个示例中，我们可以看到，js 代码包含了两个部分：一个是 data，定义了页面中所需要的变量；另一个是 getUserInfo 函数，处理用户信息的获取，并更新页面中的 data 变量。

3.其他注意事项

3.1 必须有 WXML、JS 和 WXSS 三个文件

在使用微信小程序开发时，每个页面必须有三个文件：wxml、js 和 wxss 文件。其中，wxml 文件描述了页面的结构，js 文件描述了页面的逻辑，wxss 文件则描述了页面的样式。

3.2 需要在 app.json 中配置页面路径

当新建一个页面之后，需要在 app.json 文件中进行相应的路径配置，告诉小程序这个页面的存在。格式如下：


{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/other/other"
  ],
  "window": {
    "navigatorBarBackgroundColor": "#ffffff",
    "navigatorBarTitleText": "小程序示例",
    "navigatorBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/other/other",
        "text": "其他"
      }
    ]
  }
}

其中，pages 表示小程序的所有页面，window 表示小程序的窗口样式，tabBar 表示小程序的底部 tab 栏。

3.3 可以通过复制其他页面来新建页面

如果我们需要创建多个页面，并且它们的结构或逻辑相似，可以直接复制其他页面的目录，并在其基础之上进行修改。这样可以提高效率，缩短开发时间。

4.总结

以上就是关于微信小程序如何新建页面的全部内容，包括了通过开发者工具创建新页面、新建页面的文件与代码、其他注意事项等方面的内容。希望通过本文的讲解，能够对微信小程序开发有更深入的了解。