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

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. 一、Docker安装

    原文:一.Docker安装 如果没有特殊要求关闭selinux!关闭selinux!关闭selinux!重要事情说三遍.这个坑活活让我重装了3.4遍系统才发现问题 本系列基于Centos系统安装,包括 ...

  2. 【2017 Multi-University Training Contest - Team 7】 Euler theorem

    [Link]:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1005&cid=765 [Description] 问你a ...

  3. Android实现微信分享及注意事项

    一.获取帮助文档并下载相关资料 首先打开微信开放平台:https://open.weixin.qq.com/ 如果没有注册,请先注册并上传开发者资料等待审核. 资源中心----移动应用开发----分享 ...

  4. ES5比较Jquery中的each与map 方法?

    1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...

  5. 【Codeforces Round #447 (Div. 2) A】QAQ

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] C语言程序练习题 [代码] #include <bits/stdc++.h> using namespace std; ...

  6. 【2017 Multi-University Training Contest - Team 10】Schedule

    [链接]http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1010&cid=767 [题意] 给一些区间,每台机器在这些区间 ...

  7. AlertDialog的onCreateDialog与onPrepareDialog用法

    场景:在一个Activity中多次使用弹出对话框.而且对话框携带着动态变化的信息数据,这时假设仅仅使用onCreateDialog(int id, Bundle bundle)回调,则会发现第一次以后 ...

  8. 将一个类写成WebService服务的形式

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术,主要解决不同语言写的应用程序之间.不同平台(linux/windows/andrid)之间的通信,即异构系统之间的通信. 常用的天气 ...

  9. (7)Launcher3客制化之,改动单屏幕后,Fix在Hotseat拖动应用删除报错

    改动单屏幕后,在workspace里面拖动图标.到删除button上松开的时候,报错问题. 而且无法再次显示拖动的图标. 拖动松开手时候触发 public void onDropCompleted(f ...

  10. (素材源代码) 猫猫学IOS(五)UI之360等下载管理器九宫格UI

    猫猫分享,必须精品 先看效果 代码学习地址: 猫猫学IOS(五)UI之360等下载管理器九宫格UI 猫猫学IOS(五)UI之360等下载管理器九宫格UI http://blog.csdn.net/u0 ...