微信小程序组件封装
第一步,在page下面新建一个template文件,如下图

第二部,在template.wxml中编写公用组件即要封装的代码模块
<!--pages/template/template.wxml-->
<template name="mars">
<view>
<text>mars{{step}}</text>
</view>
</template>
第三部,在需要使用封装的组件的wxml文件里引入,此步最关键
<!--pages/index/index.wxml-->
<view class='address' bindtap='onChangeAddress'>
<template is="mars" data="{{selectRole:'A',step:0}}"></template>
<input class='choose-address' placeholder='请选取地点' value='{{chooseAddress}}'></input>
</view>
<import src="/pages/template/template.wxml" />
注意:组件的传值我也卸载代码中了,在父组件index.wxml中添加 data="{{selectRole:'A',step:0}}" 在子组件中是可以直接获取到selectRole和step的值的
就是这么简单粗暴的不行
微信小程序组件封装的更多相关文章
- 微信小程序组件封装及调用-原生
封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会 ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序:封装全局的promise异步调用方法
微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...
- 微信小程序组件设计规范
微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...
- 微信小程序组件学习 -- 注册页面
微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...
- 详解封装微信小程序组件及小程序坑(附带解决方案)
一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 微信小程序组件通信
父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...
随机推荐
- Android Studio编译报错“java.lang.OutOfMemoryError: GC overhead limit exceeded
1.在build.gradle添加脚本指定编译堆内存 如果在整个工程中生效,则在build.gradle中增加如下配置: android { .............. dexOptions { i ...
- 通过动态SQL语句创建游标
DECLARE @sql varchar(100); DECLARE @TableName varchar(32); DECLARE @FieldName varchar(32); DECLARE @ ...
- Ubuntu 16.04 ROS环境配置
最近新入职一家公司,是搞智能无人驾驶的,用的操作系统是Ubuntu和ros,之前没接触过ros系统,既然公司用那就必须的学习啊,话不多说先装它一个ros玩玩... 1. Ubuntu 安装 ROS K ...
- list add对象踩的坑
list 添加对象时,没有把new object写到循环体里,导致最后添加了相同的一个对象: public List<goods> find(String goodsname) { Lis ...
- CentOS安装和配置Mysql
1. Centos 默认的yum 是没有Mysql5.7 所以需要配置下,从官网获取最新的RPM包 在MySQL官网中下载YUM源rpm安装包:https://dev.mysql.com/downlo ...
- google的Python风格规范
Python风格规范 分号 Tip 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 Tip 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. ...
- Visual Studio 2010 VS IDE 编辑界面出现绿色的点 去掉绿色的空格点
Visual Studio 2010 VS IDE 编辑界面出现绿色的点 去掉绿色的空格点 Vs乱按一顿忽然出现一堆绿色的点,我去好难看,还不知道什么鬼,查了查其实就是个 每个点表示一个空格 让他显 ...
- nginx配置-为没有后缀的文件(实际上是有html文件)以html形式打开
location ~ index.php@ { add_header content-type "text/html"; }
- linux的基本操作(NFS服务配置)
服务配置 [什么是NFS] NFS会经常用到,用于在网络上共享存储.这样讲,你对NFS可能不太了解,笔者不妨举一个例子来说明一下NFS是用来做什么的.假如有三台机器A.B.C,它们需要访问同一个目录, ...
- java基础---->Java的格式化输出
在JavaSe5中,推出了C语言中printf()风格的格式化输出.这不仅使得控制输出的代码更加简单,同时也给与Java开发者对于输出格式与排列更大的控制能力.今天,我们开始学习Java中的格式化输出 ...