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

微信小程序新手教程创建页面，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
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. 访问
一且准备就绪，点击左下角的 “编译” ，出现如下页面