微信小程序二（创建页面）

Love The Way You Lie 2022-07-15 21:11 192阅读 0赞

好了 hello world 创建好了 ，咱开始写页面了，那么如何创建一个简单的页面呢，

废话不多说，开始撸代码

新建一个页面需要以下几步，

## 1. 在pages 中添加一个目录 ##

（当然如果你觉得写在现有的目录里面就好 那这一步就省略啦）

点击左侧的 编辑  -->  点中 pages 文件夹  -->   点击右上角的  +  号  --> 在下拉菜单中选择 目录  --> 弹出框中 填写目录 名称 （这里我们写了test）--> 点击 确定

![Center][]

## 2. 新建一个wxml 文件 ##

选中 test  文件夹 --> 点击 右上角  + 号  --->  选择  wxml 类型 文件  --> 填入文件名  （注意 这里必须填写 后缀名 至少 我的版本是必须填入的）

![Center 1][]

## 3. 编辑test.wxml 文件 ##

为了方便测试 我们随便 填写点内容进去

<view class="container">
        <text>这是我的test页面哦哦！！！</text>
    </view>

## 4. 创建test.js文件 ##

使用同样的方法在test 目录下创建一个 test.js 文件

//test.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        userInfo: {}
      },
      onLoad: function () {
        console.log('onLoad test');
      }
    })

## 5. 将test 页面加入 app.json ##

在pages 属性中 加入一条 test 页面所在的目录 这里是相对路径 首部不必填写 /

![Center 2][]

## 6. 在首页加入访问链接 ##

好了 上面路径也加好了 我们得加个入口 才能看到自己写的页面啊 ， 小程序的首页一般是默认显示 pages 属性

中的第一条路径所指向的页面  ，如果我们不想破坏原有的 那么 我们直接找到首页  pages/index/index.wxml  添加一个链接

<view class="btn-area">
        <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>
      </view>

## 7. 访问 ##

一且准备就绪 ，点击左下角的 “编译”，出现如下 页面

![Center 3][]

然后 点击 “”跳转test页面“”

![Center 4][]

哇哈哈，看到了没，你的页面做好了！！！（注意所有页面编辑后 请按 ctrl + s 保存键）

不要走开，下节更精彩！

[Center]: /images/20220716/edc23fd06042483bb1146894a3b3a984.png
[Center 1]: /images/20220716/068bd1c6ce4b44ce81c3becad25d13d6.png
[Center 2]: /images/20220716/7afc3f15325c4ad3b973ab81131215d0.png
[Center 3]: /images/20220716/9036de60b0874db3940d0d622afed2c6.png
[Center 4]: /images/20220716/51c6e514f61441909565a0343b5e0254.png