1.component中直接写catchtap事件
index.xml中
<view class="tab-bar" id="tab" catchtap="tab">
tabBar
</view>
index.js中
tab(){
console.log("tab");
}
开发者工具中运行
报错:Can not resolve component by path abc
index.xml
<view class="BF" catchtap="clicks">
123456
<component key="tabBar" name="tab-bar"/>
</view>
index.js
import Tabbar from '../../components/tab-bar/tab-bar';3
return {
tabBar:{
component:Tabbar,
key:'tab-bar',
},
}
2.运行命令行语句 labrador watch中修改xml,或js或其他文件,都会被排除(ingore)在外,并且不能实时的监控对代码的修改
解决方案:重新运行labrador watch一下
3.组件中写函数需要在index.js中引入一下,直接看例子
在components文件夹下新建一个home组件,目录结构如下
...
+ components
+ home
+ home.js
+ home.less
+ home.test.js
+ home.xml
home.xml
<view class="home" catchtap="home">
home
</view>
home.js
import { Component, PropTypes } from 'labrador-immutable';
import immutable from 'seamless-immutable';
const { any } = PropTypes;
class home extends Component {
static propTypes = {
foo: any
};
static defaultProps = {
foo: 'bar'
};
constructor(props) {
super(props);
this.state = immutable({});
}
children() {
return {};
}
async home(){
await console.log("home")
}
}
export default home;
在index.xml中
<view>
<component key="home" name="home"/>
</view>
index.js
import wx, { Component, PropTypes } from 'labrador-immutable';
import { bindActionCreators } from 'redux';
import { connect } from 'labrador-redux';
import home from '../../components/home/home';
import {sleep, testFuc,click} from '../../utils/utils';
const { array, func } = PropTypes;
class Index extends Component {
static propTypes = {
todos: array,
removeTodo: func,
restoreTodo: func,
createTodo: func,
finishTodo: func
};
state = {
titleInput: '',
finished: 0
};
children() {
let todos = this.props.todos || [];
let unfinished = [];
let finished = [];
if (todos.length) {
unfinished = todos.filter((todo) => !todo.finished);
finished = todos.asMutable()
.filter((todo) => todo.finished)
.sort((a, b) => (a.finishedAt < b.finishedAt ? 1 : -1))
.slice(0, 3);
}
return {
home:{
component:home,
key:'home',
},
list: unfinished.map((todo) => ({
component: Todo,
key: todo.id,
props: {
...todo,
onRemove: this.handleRemove,
onRestore: this.handleRestore,
onFinish: this.handleFinish
}
})),
finished: finished.map((todo) => ({
component: Todo,
key: todo.id,
props: {
...todo,
onRemove: this.handleRemove,
onRestore: this.handleRestore,
onFinish: this.handleFinish
}
})),
};
}
onUpdate(props) {
let nextState = {
finished: 0
};
props.todos.forEach((todo) => {
if (todo.finished) {
nextState.finished += 1;
}
});
this.setState(nextState);
}
async onPullDownRefresh() {
await sleep(1000);
await console.log(testFuc("testFuc"));
wx.showToast({ title: '刷新成功' });
wx.stopPullDownRefresh();
}
clicks(){
console.log(click("click"));
wx.showToast({ title: 'click' });
}
handleCreate() {
let title = this.state.titleInput;
if (!title) {
wx.showToast({ title: '请输入任务' });
return;
}
this.props.createTodo({ title });
this.setState({ titleInput: '' });
}
handleInput(e) {
this.setState({ titleInput: e.detail.value });
}
click1(){
return console.log("111")
}
handleRemove = (id) => {
this.props.removeTodo(id);
};
handleFinish = (id) => {
this.props.finishTodo(id);
};
handleRestore = (id) => {
this.props.restoreTodo(id);
};
handleShowFinished() {
wx.navigateTo({ url: 'finished' });
}
handleShowUI() {
wx.navigateTo({ url: '/pages/ui/index' });
}
}
export default connect(
({ todos }) => ({ todos }),
(dispatch) => bindActionCreators({
createTodo: todoActions.create,
removeTodo: todoActions.remove,
finishTodo: todoActions.finish,
restoreTodo: todoActions.restore,
}, dispatch)
)(Index);
4.基于labrador 0.6 x ——
import { Component, PropTypes } from 'labrador-immutable';
const { string, bool } = PropTypes;
class C1 extends Component {
static propTypes = {
videoSource: string,
videoHidden:bool,
};
constructor(props) {
super(props);
this.state = {
videoSource:"",
videoHidden:true,
}
}
children() {
return {
};
}
async videos(){
await wx.chooseVideo({
})
}
}
index.xml
引用js中 的数据需要state. 或者props.
<view class="c1" >
<text catchtap="videos">wx.choosevideo</text>
<video src="{{state.videoSource}}" hidden="{{state.videoHidden}}" style="width: 100%; height: 300rpx"/>
</view>
import wx from 'labrador';
class Index extends wx.Component{}
更新为
import wx, { Component } from 'labrador';
class Index extends Component{}
0.6版本后propTypes必须是组件类静态属性 static propTypes={
0.6以后props={} 更新为 static defaultProps={}
请将所有的 setData
更新为 setState
,并且不支持 setState(key,value)
使用setState({key:value}),将组件内所有的 this.data.*
更新为 this.state.*
。
模板中所有变量绑定需要增加指定 state.
或 props.
。
<view>
<text class="{{state.className}}">{{props.title}}</text>
<template is="foo" data="{{...state.obj,bar:state.bar}}"/>
</view>
1.问题描述:通过 labrador generate component home 创建home组件,当对less进行改变后再控制台输出
ignore src\components\chooseimg\home.less
并且,在微信开发者工具中查看样式并没有发生变化。
原因:在home.less中修改成功,IDE成功的检测到变化,但是并没有作用到组件中去所以出现ignore src\components\chooseimg\home.less,也就是说修改的样式并没有最终作用到生成的小程序中去,
解决方案:在app.less中import一下
@import "components/chooseimg/chooseimg.less";
这样吧组件中的less,关联到app.less,会产生变化