第一步,在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. [转]理解Go语言中的nil

    最近在油管上面看了一个视频:Understanding nil,挺有意思,这篇文章就对视频做一个归纳总结,代码示例都是来自于视频. nil是什么 相信写过Golang的程序员对下面一段代码是非常非常熟 ...

  2. 2.基础(Foundations)

    chain rule: Bayes' rule: 其他内容就是一些基本的概率论的概念(联合分布,边际分布等)和图的一些概念(节点,边,路径,向上闭包等)

  3. phalcon bug: model的findFirst会自动忽略一些空格

    version: Phalcon 3 如果DB存在一条记录phone='13012345678 '(后边有一个空格), 则在查询User::findFirst("phone = '13012 ...

  4. 3D游戏图形引擎

    转自:http://www.cnblogs.com/live41/archive/2013/05/11/3072282.html CryEngine 3  http://www.crydev.net/ ...

  5. Mybatis面试题整理(超详细)

    1.什么是Mybatis? (1)Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去处理加载驱动.创建连接.创建statement ...

  6. Angularjs 学习笔记

    Angularjs 表单验证:https://www.w3xue.com/jsjq/angularjs/angularjs-validation.html https://www.cnblogs.co ...

  7. java 位移运算符

    import org.junit.Test; /** * 1)<< : 左移运算符 * 2)>> : 右移运算符 (测试正数) * 3)>> : 右移运算符 (测试 ...

  8. 【面试题】java面试题整理(有空再贴答案)

    面试题+基础 各家的面试题其实都大同小异, 掌握基础和原理,走到哪都不怕. 基础 leetcode上有一些总结,star数非常高了.贴上url https://github.com/CyC2018/C ...

  9. dbeaver导出MySQL的架构提示"IO Error: Utility 'mysqldump.exe' not found in client home 'MySQL Connector/Net"解决方案

    今天想到用dbeaver的Dump dabase功能导出MySQL的架构脚本,到最后一步生成的时候提示以下错误信息: IO Error: Utility 'mysqldump.exe' not fou ...

  10. [LeetCode] Flip Game II 翻转游戏之二

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...