Taro安装
安装 Taro 开发工具 @tarojs/cli
使用 npm 或者 yarn 全局安装 npm install -g @tarojs/cli
如果想要改硬盘比如：D盘，需要用 （D：然后敲回车）
如果想要进入某一个文件夹下创建项目比如文件夹叫myDemo，需要用（cd: myDemo 然后敲回车）
我选的是H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览，用这个预览：npm run dev:h5
打包项目：npm run build:h5
建完了大概项目的目录是长这个样子，当然有一些是我新建的文件夹和文件，，，
+++++++++++++++++++++
app.tsx 入口页面，
import Taro, { Component, Config } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import configStore from './store/index'
import Index from './pages/index'
import './app.scss'
const store = configStore()
const unsubscribe = store.subscribe(() =>
console.log(store.getState())
)
class App extends Component {
config: Config = {
pages: [
'pages/index/index',
'pages/login/index',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
render () {
return (
)
}
}
Taro.render(, document.getElementById('app'))
+++++++++++++++++++++++++++++++++++++++++
store文件夹 》index.tsx 页面
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from '../reducers'
const middlewares = [
thunkMiddleware,
createLogger()
]
export default function configStore () {
const store = createStore(rootReducer, applyMiddleware(...middlewares))
return store
}
++++++++++++++++++++++++++++++++++++
reducers文件夹/index.tsx
import { combineReducers } from 'redux'
import keywords from './keyword'
export default combineReducers({
keywords
})
//counter 和keywords 是我要建的两个需要管理的state。
++++++++++++++++++++++++++++++++++++
reducers文件夹/keywords.tsx
import { ADD_KEY, DELETE_KEY } from '../constants/counter'
const INITIAL_STATE2 = {
list: [
{id: 0, text: '关键词1'},
{id: 1, text: '关键词2'},
{id: 2, text: '关键词3'},
{id: 3, text: '关键词4'},
]
}
export default function keywords (state = INITIAL_STATE2, action) {
let todoNum = state.list.length
switch (action.type) {
case ADD_KEY:
return {
...state,
list: state.list.concat({
id: todoNum,
text: action.data
})
}
case DELETE_KEY:
let newList = state.list.filter(item => {
return item.id !== action.id
})
return {
...state,
list: newList
}
default:
return state
}
}
//ADD_KEY是增加某一个关键词的方法，DELETE_KEY是删除某一个关键词的方法
+++++++++++++++++++++++++++++++++++
constants文件夹下的counter.tsx
export const ADD_KEY = 'ADD_KEY'
export const DELETE_KEY = 'DELETE_KEY'
+++++++++++++++++++++++++++++++++
actions文件夹下的keyword.tsx
import { ADD_KEY, DELETE_KEY} from '../constants/counter'
export const add_key = (data) => {
return {
data,
type: ADD_KEY
}
}
export const delete_key = (id) => {
return {
id,
type: DELETE_KEY
}
}
+++++++++++++++++++++++
++++++++++++++++++++
pages文件夹下的index.tsx，最重要的页面。。。connect的使用 方法！！！！
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text,Image,Button,Input } from '@tarojs/components'
import './index.scss';
import { connect } from '@tarojs/redux'
import keywords from "../../reducers/keyword";
import { add_key, delete_key } from '../../actions/keyword'
@connect (({ keywords }) => ({
keywords
}), (dispatch) => ({
toAddKey(data){
dispatch(add_key(data))
},
toDeleteKey(id){
dispatch(delete_key(id))
}
}))
export default class Index extends Component {
constructor (props) {
super(props)
this.state = {
newTodo:'',
}
}
config: Config = {
navigationBarTitleText: '首页'
}
componentWillMount () { }
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
saveNewTodo (e) {
let { newTodo } = this.state
if (!e.detail.value || e.detail.value === newTodo) return
this.setState({
newTodo: e.detail.value
})
}
addTodo () {
let { newTodo } = this.state
let { toAddKey,keywords } = this.props
if (!newTodo) return;
let keywordList=keywords.list;
if(keywordList.length<5){
toAddKey(newTodo);
this.setState({
newTodo: ''
})
}
}
delTodo (id) {
let { toDeleteKey } = this.props
toDeleteKey(id)
}
render () {
let keywordList=this.props.keywords.list;
let { newTodo } = this.state
const todosJsx = keywordList.map(todo => {
return (
{todo.text}删除
)
})
return (
设置关键词
添加
{todosJsx}
)
}
}