推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
萌新初探小程序开发
发布时间:2020-10-23
小程序目前基础库版本2.0.6 如何自定义组件化？
假设我们要开发一个模态框组件，需要定制弹出消息和按钮，如何开发？
在`.json`中`usingComponents`为该文件引用的组件的相对路径配置。 { "component": true, "usingComponents": {} } ... //.wxml <view class='wx_dialog_container' hidden="{{!isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> <view class='wx-dialog-title'>{{ title }}</view> <view class='wx-dialog-content'>{{ content }}</view> <view class='wx-dialog-footer'> <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view> <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view> </view> </view> </view> ... //.js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 * 用于组件自定义设置 */ properties: { // 弹窗标题 title: { // 属性名 type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个 }, // 弹窗内容 content: { type: String, value: '弹窗内容' }, // 弹窗取消按钮文字 cancelText: { type: String, value: '取消' }, // 弹窗确认按钮文字 confirmText: { type: String, value: '确定' } }, /** * 私有数据,组件的初始数据 * 可用于模版渲染 */ data: { // 弹窗显示控制 isShow: false }, /** * 组件的方法列表 * 更新属性和数据的方法与更新页面数据的方法类似 */ methods: { //隐藏弹框 hideDialog() { this.setData({ isShow: !this.data.isShow }) }, //展示弹框 showDialog() { this.setData({ isShow: !this.data.isShow }) }, /* */ _cancelEvent() { //触发取消回调 this.triggerEvent("cancelEvent") }, _confirmEvent() { //触发成功回调 this.triggerEvent("confirmEvent"); } } })在小程序中使用 this.data 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改
如果在该模板中，引入其他模板可以使用 import在该文件中使用目标文件定义的template 。 如:在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> //在 index.wxml 中引用了 item.wxml，就可以使用item模板： <import src=http://www.yiyongtong.com/archives/"item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>import有作用域的概念，即只会import目标文件内定义的template 父组件如何调用子组件中的方法？组件定义完之后，在页面值引入需要在.josn中配置使用的组件
{ "usingComponents": { "dialog": "/components/Dialog/dialog" } } //... .wxml <view class="container"> <dialog id='dialog' title='我是标题' content='恭喜你，学会了小程序组件' cancelText='知道了' confirm='谢谢你' bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"> </dialog> <button type="primary" bindtap="showDialog"> ClickMe! </button> </view>
在父组件定义一个
bindcustomevent="pageEventListener"在子组件中调用triggerEvent
this.triggerEvent('customevent',data)相当于一个事件发布订阅模式，相当于vue中 $emit组件事件文档
路由跳转如何传值？模板绑定 data-id点击跳转路由传递id,不同的是id 在currentTarget.dataset对象中
tapBanner: function (e) { if (e.currentTarget.dataset.id != 0) { console.log(e) wx.navigateTo({ url: "../detail/detail?id=" + e.currentTarget.dataset.id }) } } 是否支持模块化开发？