子戈信息

图片展示

微信小程序总结

发表时间: 2022-01-26 00:00:00

上图中,假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效

目录结构


小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。


一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:


文件

必需

作用

app.js

小程序逻辑

app.json

小程序公共配置

app.wxss

小程序公共样式表


一个小程序页面由四个文件组成,分别是:


文件类型

必需

作用

js

页面逻辑

wxml

页面结构(html)

json

页面配置

wxss

页面样式表(cs)


注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。


微信小程序详解wx:if elif else的用法(搭配view、block)


1、搭配view











2、搭配block











content-type设置


content-type设置为
application/x-www-form-urlencoded的情况

微信小程序总结

微信小程序总结

微信小程序总结

微信小程序总结

微信小程序总结

微信小程序总结


页面栈


页面栈以栈(先进后出)的形式维护页面与页面之间的关系;小程序提供了getCurrentPages()函数获取页面栈,***个元素为首页,***一个元素为当前页面。
1、使用wx.navigateTo每新开一个页面,页面栈大小加1,直到页面栈大小为5为止;

微信小程序总结

微信小程序总结


1.png


2、使用wx.navigateTo重复打开界面

微信小程序总结

微信小程序总结


2.png



上图中,假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效
使用wx.redirectTo重定向

微信小程序总结

微信小程序总结


3.png


上图中,假如使用wx.redirectTo从四级页面重定向到二级页面,此时会将关闭四级页面,并使用二级页面替换四级页面,但两个页面状态是独立的。此时的页面栈大小不变,请注意和使用wx.navigateTo的区别。
使用wx.navigateBack返回

微信小程序总结

微信小程序总结


4.png


上图中,假如当前页面为五级页面,使用wx.navigateBack:


当delta为1,关闭五级页面,当前页面为四级页面,页面栈大小减1;
当delta为2,关闭依次五级页面和四级页面,当前页面为三级页面,页面栈大小减2;
以此类推,直到栈底为止,也就是首页。
以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack页面出入栈操作对页面栈的影响,平时不一定用得上,但是还是有必要了解背后的原理。


通过学习页面栈,你至少可以知道:


小程序运行时你可以获取到已经初始化了的页面的属性和方法
动态获取当前页面路径
页面自动跳转
你可以通过getCurrentPages()获取页面page对象,执行非当前页js里的方法


总结


  1. wx.navigateTo会增加页面栈大小,直到页面栈大小为5
    2、wx.redirectTo不会增加页面栈大小3、wx.navigateBack会减少页面栈大小,直到页面栈大小为1


从wxml中传入js中,例如获取id ,如下图


Wxml页面往js传数据:data-xx=xx(可设置多个)


从js中取
e.currentTarget.dataset.xx

微信小程序总结

微信小程序总结

微信小程序总结

微信小程序总结


1、字符串转换为数组


var string = '123,456,789';
var stringResult = sting.split(',');
console.log(stringResult) 
//输出[123,456,789]


var string2 = 'abcdef'
var string2Result = string2.split('')
console.log(string2Result) 
//输出['a','b','c','d','e','f']


2、数组转换为字符串


var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')
console.log(arrayResult) 
// 输出"abc,def,hig"


对象增加属性


1、js创建一个对象或者在原有对象上添加一个已知属性,并给这个属性赋值,写法如下:


let obj = {'a1':'a1'};


obj['a2'] = 'a2';


console.log(obj);//输出{'a1':'a1','a2':'a2'};


2、添加一个变量属性,并赋值变量,写法如下:


function add(name,value){


let obj = {"a1":"a1"};


obj[name] = value;//返回参数


console.log(obj);//{"a1":"a1","b1":"b1"}


}


add("b1","b1");


微信小程序总结
上图中,假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效
长按图片保存/分享

在线表单

  • 姓名 *

  • 电话 *

  • 留言

免费试用

Top

© 2010-2021 上海子戈信息科技有限公司 版权所有

沪ICP备19012659号

友情链接:  抖音推广   SEO快排  宣传片制作  食品经营许可证  代缴社保  抖音企业认证

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
热线电话
021-20960009
上班时间
周一到周五
E-mail地址
contact@zigetech.com
扫一扫二维码
二维码
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了