初步学习小程序模板,就把过程写一下了.

1.在app.json里面注册temlate/public,生成模板wxml,wxss等系列页面

2.注册模板

<1>无数据传参的模板

<template name="hello">
<view>hello world!</view>
</template>

<2>带数据传参的模板

<template name="hello2">
<view wx:for='{{list}}' wx:key="{{key}}">hello world!{{item.name}}</view>
</template>

3.模板的使用

<1>引入模板页面

<import src="../template/hello/hello.wxml"/>

<2>使用模板

<view>
<template is="hello" ></template>
<template is="hello2" data="{{list}}"></template> </view>

注意:

1.引用的template传入的data参数名字(data="{{list}}")要与注册时template使用的(wx:for="{{list}}" 时)的参数名字相同

2.template的data是有作用域的,外部参数通过data传入注册的template里面,只作用与template局部,可重复引用

  

微信小程序之模板的使用的更多相关文章

  1. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  2. 微信小程序发送模板消息

    微信小程序发送模板消息 标签(空格分隔): php 看小程序文档 [模板消息文档总览]:https://developers.weixin.qq.com/miniprogram/dev/framewo ...

  3. 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:

    小程序开发模板消息的时候  出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...

  4. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  5. 微信小程序开发——模板中加载html代码

    最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...

  6. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  7. 微信小程序之模板消息推送

    最近在用sanic框架写微信小程序,其中写了一个微信消息推送,还挺有意思的,写了个小demo 具体见官方文档:https://developers.weixin.qq.com/miniprogram/ ...

  8. 微信小程序 发送模板消息的功能实现

    背景 - 小程序开发的过程中,绝大多数会满足微信支付 - 那么,作为友好交互的体现,自然就会考虑到支付后的消息通知咯 - 所以,我的小程序项目也要求完成这个效果,so.分享一下自己的实现步骤,以方便道 ...

  9. 如何在微信小程序的模板渲染中使用JS?

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

  10. 微信小程序的模板消息与小程序订阅消息

    小程序订阅消息 功能介绍 消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验. 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳 ...

随机推荐

  1. 在ASP.NET Core中构建路由的5种方法

    原文链接 :https://stormpath.com/blog/routing-in-asp-net-core 在ASP.NET Core中构建路由的5种方法 原文链接 :https://storm ...

  2. Winform宽度与高度

    获取代码 非实时:一开始的宽度是多少就多少,拉宽了 获取的宽度还是刚开始的 ,同理高度 this.Width this.Height 获取代码 实时:调了窗体高度宽度,宽度 高度 也跟着变化,不再保持 ...

  3. 2016年第七届蓝桥杯javaB组 试题 答案 解析

    1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...

  4. layer.photos()异步修改图片地址后显示异常

    项目中有一个图片有预览(用的layer.photos()),需要异步修改图片地址,但是成功修改后第一次预览会显示修改前的大图,第二次以后就都正常了. 尝试修改成功后再次调用layer.photos() ...

  5. 对于python爬虫urllib库的一些理解(抽空更新)

    urllib库是Python中一个最基本的网络请求库.可以模拟浏览器的行为,向指定的服务器发送一个请求,并可以保存服务器返回的数据. urlopen函数: 在Python3的urllib库中,所有和网 ...

  6. javascript排序算法-选择排序

    选择排序 概念:选择排序大致的思路是找到数据结构中的最小值并将其放置在第一位,接着找到第二小的值并将其放在第二位,以此类推. 复杂度: O(n^2) 代码实现 var swap = function ...

  7. flex 输入框布局

    1:创建一个弹性容器(display:flex) 2:构建2个或3个弹性项目. 3:把弹性项目设置为居中对齐.(align-items:center) 4:改变input自身对齐方式,把它设置为拉伸以 ...

  8. flex 增长与收缩

    flex:auto  将增长值与收缩值设置为1,基本大小为 auto . flex:none. 将增长值与收缩值设置为0,基本大小为 auto .也就是固定大小. 增长: 基本大小 + 额外空间 *( ...

  9. mapfile中关于栅格数据的processing项说明

    mapfile是MapServer中地图的配置文件,规定了地图的源数据.投影.样式等一系列信息.用MapServer发布影像地图,需要用以下processing项设置地图的风格样式. BANDS=re ...

  10. 一个基于OCV的人肉选取特征点程序

    基于OpenCV写了一个交互式获取图片上的人肉选取的特征,并保存到文件的小程序. 典型应用场景:当在一个精度不高的应用需求中,相机分辨率差或者变形严重,某些棋盘点通过代码检测不出,就可以通过手工选取的 ...