要创建一个简单的页面了, 创建小程序页面的具体几个步骤:
1. 在 pages 中添加一个目录
选中 page, 右击鼠标, 从硬盘打开, 打开硬盘文件之后, 新建一个文件夹 test(或者点击 + 号, 逐个添加目录, 添加目录下面所需要的文件)
图片. png
图片. png
或者这样添加
2. 新建一个 wxml 文件
在 test 文件夹底下新建一个 wxml 空文件
图片. png
3. 编辑 test.wxml 文件
为了方便测试 我们随便 填写点内容进去
- <view class="container">
- <text > 这是我的 test 页面哦哦!!!</text>
- </view>
4. 同样的方法, 创建 test.js 文件, 编辑 test.js 文件
在 test 文件夹底下新建一个 js 空文件
使用上述同样的方法在 test 目录下创建一个 test.js 文件, 为了方便测试 我们随便 填写点内容进去(也可以不填, 直接空文件也可)
- //test.js
- // 获取应用实例
- var app = getApp()
- Page({
- data: {
- userInfo: {}
- },
- onLoad: function () {
- console.log('onLoad test');
- }
- })
5. 将 test 页面加入 app.json
打开全局文件 app.json, 在文件里面添加 "pages/test/test"(加入一条 test 页面所在的目录 )
图片. png
6. 在首页加入跳转访问链接
一切准备就绪, 该添加的都已经添加, 下面就是见证奇迹的时刻, 在首页写一个页面入口 , 跳转到我们要测试的页面上, 直接在首页 pages/index/index.wxml 添加一段代码一句链接
- <view class="btn-area">
- <navigator url="/pages/test/test" hover-class="navigator-hover">跳转 test 页面</navigator>
- </view>
图片. png
7. 测试
保存代码, 点击上面的编译按钮, 所有代码运行起来, 点击首页的跳转到 test 页面, 跳转成功, 如下图
图片. png
8: 设置页面标题
设置页面标题 , 是非常简单的一个步骤哦, 找到所在页面的目录, 新建一个 json 文件(一般都是自动生成的, 如果没有就新建一个), 比如我们上一次建造的 test 页面, 找到 pages/test/ 目录 新建一个 test.json 文件 加入如下代码
- {
- "navigationBarTitleText": "详情页"
- }
图片. png
效果如下:
OK, 到此, 创建页面和实现页面间的跳转完成
下一章: 微信小程序从零开始开发步骤 (三) 底部导航
文末福利:
福利一: 前端, Java, 产品经理, 微信小程序, Python 等资源合集大放送: https://www.jianshu.com/p/e8197d4d9880
福利二: 微信小程序入门与实战全套详细视频教程
image
来源: http://www.jianshu.com/p/fe0db14e2869