您当前的位置: 首页 > 知识百科 > 微信小程序层级关系视图怎么实现?

微信小程序层级关系视图怎么实现?

时间:2023-07-01 14:05 阅读数:84 人阅读 分类:知识百科

  微信小程序层级关系视图怎么实现?我们在开发微信小程序的时候,上传的微信小程序图片可以层级排列好,微信小程序层级关系视图怎么实现?有需要的网友们就跟着小编来往下看看吧!

  微信小程序层级关系视图怎么实现?

  微信小程序层级关系视图所需要的微信小程序文件如下:

  .wxml //模板文件,相当于html,只不过里面放的是微信给我们提供的组件

  .wxss //样式表,就是css样式文件,里面写的都是css

  .js //逻辑代码,js文件

  .json //配置文件,配置窗口的颜色、标题、背景,格式都是相同的1234567。

  1、nLoad: 页面加载

  一个小程序页面只会调用一次。

  接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

  2、nShow: 页面显示

  每次打开页面都会调用一次。

  3、nReady: 页面初次渲染完成

  一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

  对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

  4、Hide: 页面小程序隐藏

  当navigateTo或底部tab切换时调用。

  5、nUnload: 页面卸载

  当redirectTo或navigateBack的时候调用。

  这一部分主要给大家介绍wxml这个文件,这一个文件被称为:视图层,有点MVC的V的意思,又很像php里的smart,smart是把php里面的数据渲染出来,而这里的话是把数据都放在js里面,然后在wxml里面调用js里面的数据,最后显示在wxml里面,这样的话就非常的方便灵活,随便举个例子:比如我们要在wxml里面放100张图片,地址分别为:

  image/1.jpg,

  image/2.jpg,

  image/3.jpg,

  ……

  image/100.jpg;12345

  这里有两种方式,一种是直接在wxml里面写100个图片组件:

  image src="

  image/1.jpg">

  age src="image/100.jpg">

  另一种方式就是用wxml的列表渲染,只需简单的几行代码,100个图片立马生成,我们只需在js里面的data里面声明一个变量:

  //js文件

  page({

  data:{

  i:100

  }

  })

  微信小程序层级关系视图怎么实现?在以上的内容中,小编为大家介绍了微信小程序层级关系视图实现所需要的微信小程序代码了哦,感谢各位亲们的观看。更多相关内容尽在微小乔,请多多关注。

  

  微信小程序遮罩层开发实例

  微信小程序弹出层的开发和使用

  微信小程序逻辑层怎么开发和使用