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

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,到此,创建页面和实现页面间的跳转完成
下一章:微信小程序从零开始开发步骤(三)底部导航

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程

image

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

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

微信小程序从零开始开发步骤(二)的更多相关文章

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

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打 ...

  2. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  3. 微信小程序从零开始开发步骤(七)引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  4. 微信小程序从零开始开发步骤(六)4种页面跳转的方法

    用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...

  5. 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...

  6. 微信小程序从零开始开发步骤(四)自定义分享的功能

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

  7. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  8. 微信小程序从零开始开发步骤(一)搭建开发环境

    从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...

  9. 微信小程序从零开始开发步骤(四)

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

随机推荐

  1. ListView Item 点击展开隐藏问题

    public class ListAdapter extends BaseAdapter {     private Context mContext;     private View mLastV ...

  2. 使用 Go 语言开发大型 MMORPG 游戏服务器怎么样?(非常稳定、捕获所有异常、非常适合从头开始,但大公司已经有现成的C++框架、所以不会使用)

    使用 Go 语言开发大型 MMORPG 游戏服务器怎么样?和C Socket服务器比起来有什么优劣?可行性怎么样? 从2013年起,经朋友推荐开始用Golang编写游戏登陆服务器, 配合C++做第三方 ...

  3. (错误记录)Vue: Unknown custom element

    错误: vue.js:634 [Vue warn]: Unknown custom element: <ve-pie> - did you register the component c ...

  4. 【Codeforces Round #446 (Div. 2) B】Wrath

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 倒着来,维护一个最小的点就可以了. [代码] #include <bits/stdc++.h> using namesp ...

  5. 单位转换 inch mm mil

    从上面看:英寸(inch)是最大的单位   其次是毫米(mm)  再次是密耳(mil)

  6. Swift语言之View,Button控件实现小方块在界面上的移动(纯代码实现)

    import UIKit class ViewController: UIViewController { var diamonds:UIView! var diamondsXY = CGRectMa ...

  7. docker安装及问题处理

    1.在Ubuntu的命令行中输入 sudo apt-get install docker.io 2.如果切换到了root用户下 apt-get install docker.io 3.对于新安装的Ub ...

  8. spark1.3.1使用基础教程 分类: B8_SPARK 2015-04-28 11:10 1651人阅读 评论(0) 收藏

      spark可以通过交互式命令行及编程两种方式来进行调用: 前者支持scala与python 后者支持scala.python与java 本文参考https://spark.apache.org/d ...

  9. Linux上制作Window启动盘

    Linux上制作Window启动盘 注意: U盘在Linux中的标签(依具体情况而定:执行df查看) U盘 ----- /dev/sdb4 格式化U盘 建立U盘的启动分区 安装关键工具 ms-sys ...

  10. POJ 1751 Highways (ZOJ 2048 ) MST

    http://poj.org/problem?id=1751 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2048 题目大 ...