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

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

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

原文作者:祈澈姑娘 原文链接:https://www.jianshu.com/u/05f416aefbe1 创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

阅读链接: 微信小程序从零开始开发步骤(一)搭建开发环境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 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Asp.Net微信登录-电脑版扫描二维码登录

像京东,一号店等网站都实现了用微信来登录的功能,就是用手机上的微信扫一扫网站上的二维码,微信上确认后,即可自动用微信的帐号登录网站。 一、创建网站应用 在微信开...

64370
来自专栏Jerry的SAP技术分享

推荐一个可以把网页背景色调成护眼色的Chrome扩展应用

我在网上逛了一圈,找到一个比较实用的Chrome扩展应用,可以一键实现将Chrome打开网页的背景色修改成护眼的豆沙绿,这样在网上浏览网页,眼睛舒服多了。

12400
来自专栏云飞学编程

Python学习,爬虫不一定非要抓数据,也可以做自己喜欢的应用程序

最近各种负面消息,对爬虫er来说,并不是很友好,当然这个是对于从业者来说的,对像我这样的正在学习python的个人来说,python爬虫的学习只需要保持以下几点...

16630
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

1.2K40
来自专栏Puppeteer学习

基于puppeteer模拟登录抓取页面

在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine)

884100
来自专栏TAPD

关爱程序员从「源码」做起 | 指引

在上一篇中, 小T推荐了TAPD代码管理的神器。 在1024这个特殊的日子里, 关爱程序员就从「源码」做起。 ? 按以下步骤即可轻松get「源码」福利: 公司...

10130
来自专栏Jerry的SAP技术分享

推荐一个非常好用的Chrome扩展应用,用于美化Json字符串

我在网上逛了一圈,找到一个比较实用的Chrome扩展应用,可以一键实现将Chrome打开网页的背景色修改成护眼的豆沙绿,这样在网上浏览网页,眼睛舒服多了。

16600
来自专栏DeveWork

WordPress 注册页面显示自定义提示信息

如果你的WordPress 网站是多用户网站,那么在提供给用户注册的时候,可以自定义一些提示信息,比如说网站协议、版权声明之类的。把下面的代码放到主题的func...

21370
来自专栏阿北的知识分享

这周撸了两款小程序,总结下经验。

当一个小程序Page的js文件中存在 onShareAppMessage 方法时,可以触发转发功能,但是通过小程序开发者工具生成的模板中,入口文件的js中并没有...

32850
来自专栏知晓程序

开发 | 一款记账小程序的开发全过程,附避坑指南

趁着最近上班不是特别忙,自己闲来无事也跟着捣鼓了一款个人记账用的小程序:「小记一笔」。

17020

扫码关注云+社区

领取腾讯云代金券