使用滴滴mpx 开发一个小程序组件

前文
准备工具 webstorm ide
npm i @mpxjs/col
小程序中组件和页面分的很明确， mpx中一样
createComponent 创建一个组件
createPage 创建一个页面
下面是一个上图下文的list组件

代码块

<template><view class="grids"><view class="grids-item"wx:for="{{rData}}"wx:for-index="index"wx:for-item="item"wx:key="index"bind:tap="handleGridsItem"><view><image class="grids-icon" src="{{item.icon}}"></image></view><view class="grids-text">{{item.name}}</view></view></view>
</template>
<script>import { createComponent } from '@mpxjs/core'createComponent({mixins : [],properties : {  //小程序中依靠properties来传递 父组件数据 如同 vue 中 propsrData : {type : Array,default : () => []}},data : {},computed : {},ready () {},methods : {handleGridsItem ( evt ) {this.triggerEvent('click',{evt},{})  //组件事件触发监听}}})
</script>
<style lang="less">.grids {display: block;width: 100%;padding-top: 12px;}.grids-item {display: inline-block;width: 25%;text-align: center;padding: 12px 0;margin-bottom: 8px;}.grids-icon {width: 24px;height: 24px;vertical-align: middle;}.grids-text {margin-top: 5px;font-size: 14px;font-weight: 500;}
</style><script type="application/json">{}
</script>

ps:有了这个组件就可以做一些事情了

效果图

附父组件监听调用

<_grids rData="{{rDataList1}}" col="{{col}}" bind:click="handleGridsItem"></_grids>
mthods:{handleGridsItem(item){console.log(item);}
}

使用滴滴mpx 开发一个小程序组件相关推荐

如何从零开始开发一个小程序
如何从零开始开发一个小程序开始申请账号开发设置开发工具新建小程序阅读文档模版语法项目架构开始编写基础语法 wx:for循环 wx:if判断页面导航自定义组件引用样式修改单行 ...
如何自己开发一个小程序？
如何自己开发一个小程序?如果是新手至少要1-3个月,所以不可能在这里一句几句就能把如何自己开发一个小程序说清楚.关于如何自己开发一个小程序的相关事项,如果开发的话,先下载微信开发工具,然后建立一个 ...
【如何开发小程序？】如何快速开发一个小程序
在过去,对于新手来说,如何开发一个小程序只需要半个月到一个月的时间来制作一个简单的小程序.在中间,您需要了解小程序代码的逻辑语言.您需要查看微信官方平台开发文档中的大量示例和示例.那么现在如何开发 ...
微信外卖小程序怎么计算与客户的距离_外卖订单少收益低？开发一个小程序皆可以提解决...
外卖是大部分上班族解决吃饭问题的不二之选,因此近几年来外卖行业发展的如火如荼.一些商家赚了个"盆满体满",一些商家却遭遇订单数量少.收益低等问题.因此这些商家都非常想知道,怎么做才 ...
小程序开发.微信小程序.组件.视图容器
小程序开发.微信小程序中的组件.视图容器组件 note:当前本文编辑中- 20220731 jcLee95 的个人博客邮箱 :291148484@163.com CSDN 主页:https://bl ...
git 创建webpack项目_从0到1开发一个小程序cli脚手架（一）创建页面/组件模版篇...
github地址: https://github.com/jinxuanzheng01/xdk-cli cli工具是什么? 在正文之前先大致描述下什么是cli工具, cli工具英文名command-l ...
使用mpx开发外卖小程序
框架简介 Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx ,我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序,Mpx ...
使用mpx开发外卖小程序完整教程（附源码）
框架简介 Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx ,我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序,Mpx ...
python如何开发小软件-Python程序员，如何快速开发一个小程序
要点: 小程序是前后端分离的. 前端使用的是微信自定义的一套规范wxml+wxss+json+js,本质还是html+css+js. 后台可以选用任何你熟悉的语言:Java,Python,PHP,Ru ...

使用滴滴mpx 开发一个小程序组件

使用滴滴mpx 开发一个小程序组件相关推荐

最新文章

热门文章