微信小程序组件封装
第一步,在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模板中找到子组件标签 < ...
随机推荐
- 一致性 Hash 学习与实现
普通的 Hash 解决的是什么问题? 下图是一个普通的余数法构造的哈希表. 一般在编程中使用哈希表,某个 bucket 突然就没了的概率比较小,常见的是因为负载因子太大需要增加 bucket,然后 r ...
- linux服务查看
(1)#service servicename status比如查看防火墙:#service iptables status (2)#chkconfig --list |grep 服务名 比如查看te ...
- docker容器里设置中文时区
本文讨论docker容器里中文时区的问题,总所周知docker hub上的镜像默认都是英文时区的,在国人使用过程当中需要将时区设置成中文,我原来光配置/etc/localtime了date显示的时间也 ...
- 框架源码系列五:学习源码的方法(学习源码的目的、 学习源码的方法、Eclipse里面查看源码的常用快捷键和方法)
一. 学习源码的目的 1. 为了扩展和调优:掌握框架的工作流程和原理 2. 为了提升自己的编程技能:学习他人的设计思想.编程技巧 二. 学习源码的方法 方法一: 1)掌握研究的对象和研究对象的核心概念 ...
- Linux下配置环境变量—— .bashrc 和 /etc/profile
转载:https://blog.csdn.net/sun8112133/article/details/79901527 首先简单说一下什么是环境变量?环境变量简单的说就是当前环境下的参数或者变量.如 ...
- 简单的Verilog测试模板结构
这里记录一下曾经用到的简单的测试模板,如下所示: //timescale `timescale 1ns/1ns module tb_module(); //the Internal motivatio ...
- Qt编写自定义控件5-柱状温度计
前言 柱状温度计控件,可能是很多人练手控件之一,基本上都是垂直方向展示,底部一个水银柱,中间刻度尺,刻度尺可以在左侧右侧或者两侧都有,自适应分辨率改动,有时候为了美观效果,可能还会整个定时器来实现动画 ...
- chrome 浏览器之下载管理器插件
chrome默认下载器实在是不招人待见,下面插件是一个非常不错的选择: 名称:Chrono下载管理器 插件地址:https://chrome.google.com/webstore/detail/ch ...
- Less 编译生成 css
开发模式下使用less.js <link rel="stylesheet/less" type="text/css" href="~/Conte ...
- namecheap 添加二级域名
namecheap Docs Nginx 添加一个server server { listen 80; server_name video.ajanuw.fun; location / { root ...