微信小程序页面引入公用头部底部

摘要:
最近比较浮躁各种事情各种烦恼,现在开始静下心来写博客。学技术就不能浮躁时时刻刻要记在心里,激励自己希望也可以激励大家。最近一段时间在开发小程序,没有系统的学习过拿起来就做的那种写的不好各位多多指教。下面是我们创建完的目录:第二步:定义模板 在我们新建的foot.wxml文件下编写代码如下:我是底部name是template的属性,作为模板的名字。

最近比较浮躁各种事情各种烦恼,现在开始静下心来写博客。学技术就不能浮躁时时刻刻要记在心里,激励自己希望也可以激励大家。最近一段时间在开发小程序,没有系统的学习过拿起来就做的那种写的不好各位多多指教。

第一步:新建一个目录

在pages目录下面新建一个templates目录(小窍门:在app.json 文件pages里面写上"pages/templates/foot" 自动为我们生成),这个目录我们用来存放公用的模板。下面是我们创建完的目录:

微信小程序页面引入公用头部底部第1张

第二步:定义模板

 在我们新建的foot.wxml文件下编写代码如下:

<!--pages/templates/foot.wxml-->
<template name="foot">
  <text>我是底部</text>
</template>

name是template的属性,作为模板的名字。

第三步:引用模板

现在我们在pages/index/index.wxml里面引用这个模板。
  

<import src="../templates/foot"/>
<template is="foot"></template>
src="http://t.zoukankan.com/templates/foot" 模板的路径
is="foot"模板的名字
现在就能用了

免责声明:文章转载自《微信小程序页面引入公用头部底部》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇linux sdio card睡眠治疗 sdio card removed解决方案ubuntu 远程gui显示下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序—day02

全局配置 在app.json中,对小程序进行全局配置。官方文档 tabBar是对底部/顶部导航栏的配置,图片的icon 大小限制为40kb,建议尺寸为 81px * 81px 去阿里矢量图网站,找到图片,存放到images文件夹中 app.json中的tabBar代码: "tabBar": { "list": [{ "pagePath"...

微信小程序---生命周期函数【详解】

在小程序的开发过程中,小程序的生命周期是非常重要的,特别是这7个小程序生命周期函数。 小程序的7个生命周期函数: 1、onLoad 监听页面加载 onLoad函数:一个页面只会被调用一次,可以在onLoad中获取当前页面所调用的 query 参数。 示例:onLoad:function(options){} 2、onReady 监听页面初次渲染完成 onR...

计划助手V1.0-微信小程序(QQ小程序)-源代码分享

疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦~ 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小...

同一微信开放平台下 unionid 作用。

UnionID 机制说明 如果开发者拥有多个移动应用、网站应用、和公众账号(包括小程序),可通过UnionID 来区分用户的唯一性,因为只要是 同一个微信开放平台账户下的移动应用、网站应用和公众账号(包括小程序),用户的UnionID是唯一的。 换句话说、同一用户,对同一微信开放平台下的不同应用、unionid是相同的。 小程序关联到同一个公众号下就...

微信小程序基础学习笔记2:数据绑定相关

VUE语法 所有前端wxml中绑定的数据变量,都要定义在data中。 绑定事件,bindTap res ,取数据 currentTarget->dataset 这里的data-id中的data必须写,后面的id、title等可以任意自定义,H5的新属性,后面的id全部要用小写 myTap:function(res){ console.write }...

微信小程序上传图片 并和文字一起提交 (有接口)

实现功能如图 html代码 <viewclass="main"> <viewclass="card"> <viewclass="card-up"> <view>身份证</view> <view>上传身份证</view> </view> <image...