当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 霸界科技教你如何从零做微信小程序开发(二)

霸界科技教你如何从零做微信小程序开发(二)

2018-05-28 15:13 来源: 霸界科技

摘要:上一章注册完微信小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤...

期权保本理财
  上一章注册完微信小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤:
 
  1. 在pages 中添加一个目录
 
  选中page,右击鼠标,从硬盘打开,打开硬盘文件之后,新建一个文件夹test(或者点击+号,逐个添加目录,添加目录下面所需要的文件)
 
霸界科技教你如何从零做微信小程序开发

霸界科技教你如何从零做微信小程序开发

霸界科技教你如何从零做微信小程序开发
 
  或者这样添加
 
  2. 新建一个wxml 文件
 
  在test文件夹底下新建一个wxml空文件
 
霸界科技教你如何从零做微信小程序开发
 
  3. 编辑test.wxml 文件
 
  为了方便测试 我们随便 填写点内容进去
 
  <viewclass="container"><text>这是我的test页面哦哦!!!</text></view>
 
  4. 同样的方法,创建test.js文件,编辑test.js文件
 
  在test文件夹底下新建一个js空文件使用上述同样的方法在test 目录下创建一个 test.js 文件,为了方便测试 我们随便 填写点内容进去(也可以不填,直接空文件也可)
 
  //test.js //获取应用实例 var app = getApp() Page({ data: { userInfo: {} }, : function () { console.log(' test'); } })
 
  5. 将test 页面加入 app.json
 
  打开全局文件 app.json,在文件里面添加 "pages/test/test"(加入一条 test 页面所在的目录 )
 
霸界科技教你如何从零做微信小程序开发
 
  6. 在首页加入跳转访问链接
 
  一切准备就绪,该添加的都已经添加,下面就是见证奇迹的时刻,在首页写一个页面入口 ,跳转到我们要测试的页面上,直接在首页 pages/index/index.wxml 添加一段代码一句链接
 
  <viewclass="btn-area"><navigatorurl="/pages/test/test"hover-class="navigator-hover">跳转test页面</navigator></view>
 
霸界科技教你如何从零做微信小程序开发
 
  7. 测试
 
  保存代码,点击上面的编译按钮,所有代码运行起来,点击首页的“跳转到test页面”,跳转成功,如下图。
 
霸界科技教你如何从零做微信小程序开发
 
  8:设置页面标题
 
  设置页面标题 ,是非常简单的一个步骤哦,找到所在页面的目录,新建一个 json 文件(一般都是自动生成的,如果没有就新建一个),比如我们上一次建造的 test 页面, 找到 pages/test/ 目录 新建一个 test.json 文件 加入如下代码。
 
  { "navigationBarTitleText": "详情页"}
 
霸界科技教你如何从零做微信小程序开发
 
  效果如下:
 
霸界科技教你如何从零做微信小程序开发
 
  OK,到此,创建页面和实现页面间的跳转完成
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088