• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序列表渲染、模板语法、wxml的引入、wxs

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/

小程序列表渲染其实和vue的很类似,只是有微小的差别

 

 

 block标签

 block和view、text组件不一样,block就是一个标签,不是组件,不会渲染出来的

 

 

 

 

 

 

 

 

 

 我们可以使用 :wx:key="*this";来绑定key,简单易行,不用花费时间去给key取别名(:wx:key=" 'name' + index ")

 模板语法

 

 

 

 模板在没被使用前是不会被渲染的

之前小程序没有自定义组件,为了提高代码的复用性,搞了个模板,现在有自定义组件了,用的相对少一些

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

wxml的引入

在一个文件中创建一个wxml文件,里面放着一个模板,

 

 

在需要用的wxml页面,这样写:

<import src="相对路径/绝对路径" />

 

 import导入不能循环导入,(循环导入,导入的模板中还导入了另一个模板),在小程序中会报错

include是不能导入模板的

include是导入wxml文件的:(可循环导入)

比如多个页面都用到了头部和底部,那么我们可以将头部和尾部单独的写在一个wxml文件中,在需要用到的页面用include导入:

先创建一个header.wxml

 

 在home.wxml中用include导入

<include src="相对路径/绝对路径" />

另外,include和import还有一种不同的是,include可以循环导入,比如a.wxml被include导入到b.wxml,然后b.wxml又被include导入到了c.wxml,那么c.wxml就有了a.wxml和b.wxml的内容。

 wxs:weixin  Script

 

 

 

 

 

 

 

 

 上面这种代码是不能在小程序中写的

 

 

 

也就是说,在wxml中不能调用page中定义的函数的,只能以绑定事件的形式调用

 

 

 

 

 

 

 

 

 

 

 

 

 

 注意 <wxs module="模块名称"></wxs>

wxs必须有module属性,定义模块名称,在wxml中才可以使用

另外需要注意的是,如果用<wxs src="相对路径"  />引入wxs文件   不能使用绝对路径

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap