参考:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=2017112
如何创建一个简单的页面呢,
新建一个页面需要以下几步,
1. 在pages 中添加一个目录
(当然如果你觉得写在现有的目录里面就好 那这一步就省略啦)
点击左侧的 编辑 -- 点中 pages 文件夹 -- 点击右上角的 + 号 -- 在下拉菜单中选择 目录 -- 弹出框中 填写目录 名称 (这里我们写了test)-- 点击 确定
2. 新建一个wxml 文件
选中 test 文件夹 -- 点击 右上角 + 号 --- 选择 wxml 类型 文件 -- 填入文件名 (注意 这里必须填写 后缀名 至少 我的版本是必须填入的)
3. 编辑test.wxml 文件
为了方便测试 我们随便 填写点内容进去
[html] view plain copy
- view class="container"
- text这是我的test页面哦哦!!!/text
- /view
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
- view class="btn-area"
- navigator url="/pages/test/test" hover-class="navigator-hover"跳转test页面/navigator
- /view
7. 访问
一且准备就绪 ,点击左下角的 “编译”,出现如下 页面
然后 点击 “”跳转test页面“”
哇哈哈,看到了没,你的页面做好了!!!(注意所有页面编辑后 请按 ctrl + s 保存键)
不要走开,下节更精彩!













