【建议】template里支持事件

发布于 8 年前作者 fanglong19891 次浏览最后编辑 8 年前来自 ask

几乎稍微有点复杂的组件就会有自己的事件处理。

目前现在想在小程序里开发复杂点的组件应用,模板和样式需要自己import,数据通过data传入,这都可以自己的解决。但如果这个template里有个button或者input的话该怎么办?

现在想自己处理的话就只能写东西编译了,这对有数十页的应用来说是个灾难。

10 回复
li40
li401 楼6 年前

// avatar.wxml

<template name=“avatar”>

    <view bindtap=“show”>Avatar</view>

</template>

// avatar.js

export default {

    show () {

        alert(‘This is avatar’)

    }

}

// indexPage.js

import avatar from ‘./avatar’

Page({

    onLoad () {

        Object.assign(this, avatar);

        // or

        this.show = avatar.show

    }

})

// indexPage.wxml

<import src=“./avatar.wxml” />

<template is=“avatar” />

guiyingwei
guiyingwei2 楼6 年前

你onLoad的时候再赋值试试

xiaqiang
xiaqiang3 楼6 年前

可以在js模块里面,给page增加事件响应的方法么?

可以简单给个示例么?

iding
iding4 楼6 年前

components定义如下:

<text class="quit" bindtap="quit">退出</text>
import * as wechat from '../../libs/wechat'
 
export default {
    data: {
        userName: '',
    },
    quit(e) {
        console.log('header-title-quit');
        //清空个人信息及token,
        wechat.removeSNToken().then(() => {
            return wechat.removeSNUserInfo()
        }).then(() => {
            wx.redirectTo({ url: '../login/login' })
        });
    },
}

我使用deep-asign.js 将对象合并

let p = deepAssign(storeSelect, headerTitle, errorMsg);
console.log('p', p);
// 创建页面实例对象
Page(p)

输出:

WXOPEN Club 内容图片

然而quit事件仍然没激活,请问知道原因么?@侯耀

mguo
mguo5 楼6 年前

@侯耀  是我的锅,蛤,页面上有一个绝对定位的浮层  

chaozheng
chaozheng6 楼6 年前

你可以把模板的方法单独放在一个js里,如果哪个页面要用这些方法,就import到那个Page里.

用Object.assign继承。

yang50
yang507 楼6 年前

@Limichange 这是什么原理呢,文档里没有找到

plai
plai8 楼6 年前
WXOPEN Club 内容图片 WXOPEN Club 内容图片 WXOPEN Club 内容图片

求老铁解答

wfeng
wfeng9 楼6 年前

不行

onLoad() {
        this.quit = headerTitle.quit;
        console.log('thisPage', this);
}
chaoshi
chaoshi10 楼6 年前

如果在page里面写方法,那模版引入到哪个page,就要把方法复制到哪个page里面?

这个要怎么解决?