【澳门新葡亰娱乐官网】微信小程序 页面跳转和数据传递实例详解_JavaScript_脚本之家

Wechat小程序自动补全代码是在写了大器晚成部分代码后,按
Tab 键,举个例子:wx.request,在写到 wx.req 弹出列表后,就可按
Tab 键补全代码,

Wechat小程序 页面跳转和数量传递

Emmet的前身是声名显赫的Zen
coding,若是你从事Web前端开垦的话,对该插件一定不会面生。它应用仿CSS采取器的语法来变化代码,大大进步了HTML/CSS代码编写的进程。

然则开辟者工具版本的比不上,补全代码量也不一致,早前会补充
url、method、success、fail 等好多代码,而现行反革命新本子,只会补全 url。

1.先导

** 一、HTML缩写**

在Android中,大家Activity和Fragment都有栈的概念在里面,Wechat小程序页面也许有栈的定义在内部。Wechat小程序页面跳转有两种办法:

1.初始化

HTML文书档案需求包蕴部分固定的价签,举例<html>、<head>、<body>等,以后你只须求1分钟就足以输入这个标签。举例输入“!”或“html:5”,然后按Tab键:
`

  • html:5 或!:用于HTML5文书档案类型
  • html:xt:用于XHTML过渡文书档案类型
  • html:4s:用于HTML4无情文档类型

1.wx.navigateTo; 2.wx.redirectTo; 3.wx.switchTab; 4.wx.navigateBack
5.行使完成对应的跳转效能;

2. 无拘无缚增多类、id、文本和总体性

  1. 连年输入成分名称和ID,Emmet会活动为你补全,譬喻输入p#foo:,
    然后按Tab键:
Html代码
<p id="foo"></p> 
  1. 三番若干回输入成分名称、类和id,比如p.bar#foo,会自动生成:
Html代码
<p class="bar" id="foo"></p> 
  1. HTML元素的属性。你能够因此输入a[href=#],就足以自动生成如下代码:
Html代码
<a href="#"></a>  
  1. HTML元素的内容。你能够通过输入h1{foo},就能够自动生成如下代码:
Html代码
<h1>foo</h1>  
``

# 3.  嵌套
> 现在你只需要1行代码就可以实现标签的嵌套。 

 >  -   >:子元素符号,表示嵌套的元素
 >  -  +:同级标签符号
 >  -   ^:可以使该符号前的标签提升一行

p>span 按下Tab
<p><span></span></p>

p>span^p 按下Tab
<p><span></span></p>
<p></p>

h1+h2+h3 按下Tab
<h1></h1>
<h2></h2>
<h3></h3>

# 4.  分组

> 你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

Html代码
<div class=”foo”>
<h1></h1>
</div>
<div class=”bar”>
澳门新葡亰娱乐官网 ,<h2></h2>
</div>

# 5.  隐式标签
> 声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。

> 在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。

下面是所有的隐式标签名称:
  > -  li:用于ul和ol中
  > -  tr:用于table、tbody、thead和tfoot中
  > -  td:用于tr中
  > -  option:用于select和optgroup中

# 6.  定义多个元素
要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

Html代码

<ul>
<li></li>
<li></li>
<li></li>
</ul>

# 7.  定义多个带属性的元素
> 如果输入 ul>li.item$*3,将会生成如下代码: 

Html代码
<ul>
<li class=”item1″></li>
<li class=”item2″></li>
<li class=”item3″></li>
</ul>

#  ** 二、CSS缩写**
# 1.  值
> 比如要定义元素的宽度,只需输入w100,即可生成 

Css代码
width: 100px;

> 除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

Css代码
height: 10%;
margin: 5em;

> 单位别名列表:
 -   p 表示%
 -   e 表示 em
 -   x 表示 ex

# 2.  附加属性可能你之前已经了解了一些缩写,比如 @f,可以生成:Css代码

@font-face {
font-family:;
src:url();
}

> 一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:Css代码

@font-face {
font-family: ‘FontName’;
src: url(‘FileName.eot’);
src: url(‘FileName.eot?#iefix’) format(’embedded-opentype’),
url(‘FileName.woff’) format(‘woff’),
url(‘FileName.ttf’) format(‘truetype’),
url(‘FileName.svg#FontName’) format(‘svg’);
font-style: normal;
font-weight: normal;
}

# 3.  模糊匹配
> 如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

Css代码
overflow: hidden;

# 4.  供应商前缀
> 如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:Css代码

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

> 你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:Css代码

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

> 如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀: 

Css代码
-webkit-transform: ;
-moz-transform: ;
transform: ;

> 前缀缩写如下:
  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

# 5.  渐变
> 输入lg(left, #fff 50%, #000),会生成如下代码:Css代码

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5,
#fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

# **三、附加功能**
> **生成Lorem ipsum文本**
Lorem ipsum指一篇常用于排版设计领域的拉丁文文章,主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet,你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数,比如lorem10,将生成:

引用
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero
delectus.

# **四、定制**
> 你还可以定制Emmet插件:
- 添加新缩写或更新现有缩写,可修改[snippets.json](http://docs.emmet.io/customization/snippets/)文件
- 更改Emmet过滤器和操作的行为,可修改[preferences.json](http://docs.emmet.io/customization/preferences/)文件
- 定义如何生成HTML或XML代码,可修改[syntaxProfiles.json](http://docs.emmet.io/customization/syntax-profiles/)文件

# **五、针对不同编辑器的插件**
> Emmet支持的编辑器如下(链接为针对该编辑器的Emmet插件):[Sublime Text 2](https://github.com/sergeche/emmet-sublime)
- [TextMate 1.x](https://github.com/emmetio/Emmet.tmplugin)
- [Eclipse/Aptana](https://github.com/emmetio/emmet-eclipse)
- [Coda 1.6 and 2.x](https://github.com/emmetio/Emmet.codaplugin)
- [Espresso](https://github.com/emmetio/Emmet.sugar)
- [Chocolat](https://github.com/sergeche/emmet.chocmixin) (通过“Install Mixin”对话框添加)
- [Komodo Edit/IDE](https://github.com/emmetio/emmet/downloads) (通过Tools → Add-ons菜单添加)
- [Notepad++](https://github.com/emmetio/emmet/downloads)
- [PSPad](https://github.com/emmetio/emmet/downloads)
- [<textarea>](https://github.com/emmetio/emmet/downloads)
- [CodeMirror2/3](https://github.com/emmetio/codemirror)
- [Brackets](https://github.com/emmetio/brackets-emmet)

其间navigateTo是将本来的页面保存在页面栈中,在跳入到下一个页面包车型大巴时候指标页面也进栈,只有在这里个景况下点击掌提式有线话机的回来开关才方可跳转到上二个页面;
redirectTo和switchTab都是先去掉栈中原来的页面,然后指标页面进栈,使用这三种跳转形式,都不能够透过系统的再次来到键回到上一个页面,而是一向退出小程序;
redirectTo使用的时候自然要协作tabBar或是页面里面能够重新跳转开关,不然不只怕回去上一个页面;
switchTab跳转的页面必得是tabBar中扬言的页面;
tabBar中定义的字段不能够高出5个页面,小程序的页面栈档次也不可能超越5层。
navigateBack只可以回到到页面栈中的钦赐页面,平时和navigateTo合作使用。
wx.navigateTo 和 wx.redirectTo 不容许跳转到 tabbar 页面,只可以用
wx.switchTab 跳转到 tabbar 页面

2.页面跳转的具体操作

wx.navigateTo

保留当前页面,跳转到应用内的某部页面,使用wx.navigateBack能够回去到原页面。

参数

类型

必填

说明

url String 是 必要跳转的采取内非 tabBar 的页面包车型大巴路线 ,
路线后能够带参数。参数与路线之直接受?分隔,参数键与参数值用=相连,不一样参数用&分隔;如
‘path?key=value&key2=value2′ success Function 否 接口调用成功的回调函数
fail Function 否 接口调用退步的回调函数 complete Function 否
接口调用结束的回调函数

wx.navigateTo({ url: 'test?id=1'//实际路径要写全})

//test.jsPage({ onLoad: function{ console.log

瞩目:为了不让客商在行使小程序时变成麻烦,大家规定页面路线只好是五层,请尽量防止多层级的人机联作格局。

wx.redirectTo

闭馆当前页面,跳转到应用内的某部页面。

参数

类型

必填

说明

url String 是 要求跳转的使用内非 tabBar
的页面包车型客车路子,路径后能够带参数。参数与路径之间利用?分隔,参数键与参数值用=相连,差异参数用&分隔;如
‘path?key=value&key2=value2′ success Function 否 接口调用成功的回调函数
fail Function 否 接口调用退步的回调函数 complete Function 否
接口调用截止的回调函数

wx.redirectTo({ url: 'test?id=1'})

wx.switchTab

跳转到 tabBar 页面,并关闭别的具有非 tabBar 页面

OBJECT 参数表达:

参数

类型

必填

说明

url String 是 须求跳转的 tabBar 页面包车型地铁门路(需在 app.json 的 tabBar
字段定义的页面),路线后不可能带参数 success Function 否
接口调用成功的回调函数 fail Function 否 接口调用战败的回调函数 complete
Function 否 接口调用结束的回调函数

{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] }}

wx.switchTab

wx.navigateBack

关门当前页面,再次来到上意气风发页面或多种页面。可通过 getCurrentPages
获取当前的页面栈,决定须要回到几层。

OBJECT 参数表达:

参数

类型

必填

说明

delta Number 1 再次回到的页面数,借使 delta 大于现存页面数,则赶回到首页。

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码// 此处是A页面wx.navigateTo

// 此处是B页面wx.navigateTo

// 在C页面内 navigateBack,将返回A页面wx.navigateBack

应用标签完结页面跳转

参数

类型

必填

说明

url String 应用内的跳转链接 redirect Boolean false
展开药方式为页面重定向,对应 wx.redirectTo open-type String navigate
可选值
‘navigate’、’redirect’、’switchTab’,对应于wx.navigateTo、wx.redirectTo、wx.switchTab的效劳hover-class String navigator-hover
指确定地点击时的样式类,当hover-class=”none”时,未有一点点击态效果
hover-start-time Number 50 按住后多长期现身点击态,单位飞秒hover-stay-time Number 600 手指放手后点击态保留时间,单位皮秒

跳转到新页面 在当前页打开 切换 Tab

3.页面的路由和生命周期

在小程序中持有页面包车型客车路由全部由框架举行保管,对于路由的触及形式以至页不熟知命周期函数如下:

路由方式

触发机会

路由后页面

路由前页面

初叶化 小程序张开的首先个页面 onLoad,onShow 张开新页面 调用 API
wx.navigateTo 或行使组件 onLoad,onShow onHide 页面重定向 调用 API
wx.redirectTo 或采用组件 onLoad,onShow onUnload 页面重返 调用 API
wx.navigateBack 或顾客按左上角重回按键 onShow
onUnload(多层页面重返各个页面都会按顺序触发onUnload) Tab 切换 调用 API
wx.switchTab 或利用组件 或顾客切换 Tab 各类状态请参见下表

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A
页面张开的页面,D 页面是从 C 页面张开的页面为例):

当前页面

路由后页面

接触的生命周期

A A Nothing happend A B A.onHide, B.onShow A.onHide C A C.onUnload C B
C.onUnload, B.onShow, C.onUnload, B.onShow A D.onUnload, A.onShow B
D.onUnload, B.onShow()

4.参数字传送递

通过路径传递参数在wx.navigateTo、wx.redirectTo和中央银行使方式生机勃勃致
示例代码:以wx.navigateTo为代表

```wx.navigateTo({ url: 'test?id=1'//实际路径要写全})

//test.jsPage({ onLoad: function{ console.log

参数与路子之间接选举择?分隔,参数键与参数值用=相连,分歧参数用&分隔;

test?id=1 中id为参数键,1 为参数值

在目的页面中onLoad()方法中option对象即为参数对象,能够经过参数键来收取参数值

谢谢阅读,希望能协理到我们,多谢大家对本站的支撑!

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图