当前位置: 首页 > 编程笔记 >

微信小程序模板template简单用法示例

翟善
2023-03-14
本文向大家介绍微信小程序模板template简单用法示例,包括了微信小程序模板template简单用法示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了微信小程序模板template简单用法。分享给大家供大家参考,具体如下:

模板呢,就是为了方便你重复写一些代码而建立的,目前我指发现它的功能适合建立一些表格类型的数据

比如,录入认得信息啥的(都有名字,年龄,性别啥的)

1. index.wxml代码

<view class="page">
<template name="aafa">
<view> <text> 姓名:{{name}} 年龄:{{age}}</text>
 </view>
</template>
//这是模板显示的四种方式,你看你喜欢哪一种
<template is="aafa" data="{{...zhangsan}}"/>
<template is="aafa" data="{{name:'李四',age:30}}"/>
<template is="aafa" data="{{name:x,age:y}}"/>
<template is="aafa" data="{{name,age}}"/>
<view>------------------------</view>
<template name="msgItem">
 <view>
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>
<template is="msgItem" data="{{...item}}"/>
</view>

2. index.js中代码

//
Page({
 data: {
  name:'唐6',
  age:50,
  x:'郭5',
  y:40,
  zhangsan:{
     name:'张三',
     age:20
   },
  item: {
   index: 0,
   msg: 'this is a template',
   time: '2016-09-15'
  }
 }
})

希望本文所述对大家微信小程序设计有所帮助。

 类似资料:
  • 本文向大家介绍微信小程序template模板实例详解,包括了微信小程序template模板实例详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序template模板使用 前言 微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template。 效果图 一、模板定义 模板最重要的是模板的名称,即"" 以下是实例模板代码 wxss文件 二、模板使用

  • 本文向大家介绍微信小程序 template模板详解及实例,包括了微信小程序 template模板详解及实例的使用技巧和注意事项,需要的朋友参考一下 微信小程序 template模板详解及实例 首先看一些官方的一些介绍。 模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来

  • 本文向大家介绍微信小程序 template模板详解及实例代码,包括了微信小程序 template模板详解及实例代码的使用技巧和注意事项,需要的朋友参考一下 微信小程序 template模板详解 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建。实现一次定义,到处使用。 模板 一、定义模板 1、新建一个template文件夹用来管

  • 本文向大家介绍微信小程序 教程之模板,包括了微信小程序 教程之模板的使用技巧和注意事项,需要的朋友参考一下 系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML 模板 WXML提供模板(template),可以在模板中定义代码片段

  • 本文向大家介绍微信小程序之swiper滑动面板用法示例,包括了微信小程序之swiper滑动面板用法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序之swiper滑动面板用法。分享给大家供大家参考,具体如下: swiper就是为了以后做轮播图用的。下面是一些它的属性 PS:关于微信小程序组件可参考本站在线工具微信小程序组件说明表http://tools.jb51.net/tab

  • 本文向大家介绍微信小程序 slider的简单实例,包括了微信小程序 slider的简单实例的使用技巧和注意事项,需要的朋友参考一下 微信小程序 slider的简单实例 实现效果图: 微信小程序slider应用,可加减的slider控制 页面结构 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!