微信小程序新手教程创建页面

　　微信小程序新手教程创建页面，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

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

　　废话不多说，开始撸代码

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

　　1. 在pages 中添加一个目录

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

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

　　2. 新建一个wxml 文件

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

　　3. 编辑test.wxml 文件

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

　　[html] view plain copy

　　这是我的test页面哦哦!!!

　　4. 创建test.js文件

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

　　[javascript] view plain copy//test.js

　　//获取应用实例

　　var app = getApp()

　　Page({

　　data: {

　　userInfo: {}

　　},

　　onLoad: function () {

　　console.log('onLoad test');

　　}

　　})

　　5. 将test 页面加入 app.json

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

　　6. 在首页加入访问链接

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

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

　　[html] view plain copy

　　跳转test页面

　　7. 访问

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

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

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

　　赞赏