第一步,在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. 微信小程序组件封装及调用-原生

    封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会 ...

  2. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  3. 微信小程序:封装全局的promise异步调用方法

    微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...

  4. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  5. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  6. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  7. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  8. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  9. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

随机推荐

  1. SkyWalking

    介绍 SkyWalking 创建与2015年,提供分布式追踪功能.从5.x开始,项目进化为一个完成功能的Application Performance Management系统.他被用于追踪.监控和诊 ...

  2. 一文弄懂神经网络中的反向传播法(Backpropagation algorithm)

    最近在看深度学习的东西,一开始看的吴恩达的UFLDL教程,有中文版就直接看了,后来发现有些地方总是不是很明确,又去看英文版,然后又找了些资料看,才发现,中文版的译者在翻译的时候会对省略的公式推导过程进 ...

  3. (原)kenel开机logo的制作

    今天项目需要,需要制作一个kernel的开机logo,所以在rk3288的平台上进行测试一番. 第一步:配置kernel:选上CONFIG_LOGO_LINUX_CLUT224选项 make menu ...

  4. Java Observer接口和Observable类实现观察者模式

    对于观察者模式,其实Java已经为我们提供了已有的接口和类.对于订阅者(Subscribe,观察者)Java为我们提供了一个接口,JDK源码如下: package java.util; public ...

  5. A股滚动净利润增速最高排名

    最近2年(共8个季度)的滚动净利润都在增长,且平均增速超过10%. 计算举例:滚动净利润增速 = ((2018Q1 到 2018Q4的净利润之和) / (2017Q4 到 2018Q3的净利润之和) ...

  6. Zephyr学习(一)Zephyr介绍

    Zephyr是一个面向物联网的嵌入式实时操作系统(RTOS),是Linux基金会旗下的一个项目,具有以下特点: 1.安全的,灵活.高可扩展性,支持多种硬件平台(ARM.ARC.X86.xtensa.n ...

  7. react build后直接从浏览器打开

    存在两个问题 一,资源文件路径 config/paths.js 这里原来的.pathname:'/', 改成.pathname:'./' function getServedPath(appPacka ...

  8. ios12 siri 语音识别

    原理:先用系统的录音器录音,让后让siri识别语音转文字 第一步 :在项目plist文件添加授权如图 第二步:导入头文件,添加协议#import <Speech/Speech.h>#imp ...

  9. bootstrap滚动监视原理实现

    最近在公司实习,刚好写了一个静态的网页,用到了滚动监视,就自己写了个监视,话不多说直接进入正题 $(function () { var $root = $("html,body") ...

  10. ubuntu apt 软件源的更改

    在ubuntu上面安装软件一般都使用 apt安装 在ubuntu下面有一个源列表,源列表里面都是一些网站信息,每条网址就是一个源,这个地址指向的数据标识着这台服务器上有哪些软件可以用 编辑源命令: s ...