E企盈营销工具技术服务商 热线:4006-838-530

微信小程序从零开始开发步骤(二)创建小程序页面

E企盈直播平台营销卖货系统

上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤:1. 在pages 中添加一个目录选中page,右击鼠标,从硬盘打开,打开硬盘文件之后,新建一个文件夹test(或者点击+号,逐个添加目录,添加目录下面所需要的文件)    或者这样添加2. 新建一个wxml 文件在test文件夹底下新建一个wxml空文件  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 页面所在的目录 ) 6. 在首页加入跳转访问链接一切准备就绪,该添加的都已经添加,下面就是见证奇迹的时刻,在首页写一个页面入口 ,跳转到我们要测试的页面上,直接在首页 pages/index/index.wxml 添加一段代码一句链接<view class=”btn-area”>     <navigator url=”/pages/test/test” hover-class=”navigator-hover”>跳转test页面</navigator>   </view>   7. 测试保存代码,点击上面的编译按钮,所有代码运行起来,点击首页的“跳转到test页面”,跳转成功,如下图。 8:设置页面标题设置页面标题 ,是非常简单的一个步骤哦,找到所在页面的目录,新建一个 json 文件(一般都是自动生成的,如果没有就新建一个),比如我们上一次建造的 test 页面, 找到 pages/test/ 目录 新建一个 test.json 文件 加入如下代码。{  “navigationBarTitleText”: “详情页”} 效果如下:OK,到此,创建页面和实现页面间的跳转完成下一章:微信小程序从零开始开发步骤(三)底部导航 阅读链接:微信小程序从零开始开发步骤(一)搭建开发环境https://www.jianshu.com/p/0ff8c3b2f59f微信小程序从零开始开发步骤(二)创建小程序页面https://www.jianshu.com/p/fe0db14e2869微信小程序从零开始开发步骤(三)底部导航栏https://www.jianshu.com/p/89a63dc99839微信小程序从零开始开发步骤(四)自定义分享的功能https://www.jianshu.com/p/65d9bdb8051d微信小程序从零开始开发步骤(五)轮播图https://www.jianshu.com/p/bc3261557031微信小程序从零开始开发步骤(六)4种页面跳转的方法https://www.jianshu.com/p/01a5a6a0fdb9微信小程序从零开始开发步骤(七)引入外部js 文件https://www.jianshu.com/p/5f2cde64d7f2微信小程序从零开始开发步骤(八)引入框架WeUI:https://www.jianshu.com/p/fd423b6e17be

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序从零开始开发步骤(二)创建小程序页面
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏