課小程序實戰(zhàn)02瑞客

React+開發(fā)小程 React+作業(yè)&&官網npminstallg@tarojs/cli云 其實由于原生小程序開發(fā)自己玩了一套自己的語法，所以早早就有用vuejs來開發(fā)小程序的框架，比如webpy和mpvue，但是基本都是單純的開發(fā)小程序，現在基本對多端支持足夠好的，就是taroTaroTaro是一套遵循React語范的多端開發(fā)解決方案。現如今市面上端的形態(tài)多種多樣， //支付寶/字節(jié)跳動小程序、H5、React-Native等）運行的代碼。Taronpmnpminstall-gnpminstall-gbabel-npminstall-gbabel-preset-tarotaroinittaro-##npmscriptnpmrundev:h5npmrunbuild:h5##npmnpmrundev:weappnpmrunbuild:weapp##npmscriptnpmrundev:h5npmrunbuild:h5npmnpmrun執(zhí)行npmrundev:h5會打開瀏覽?，預覽H5執(zhí)行npmrundev:weapp打開 開發(fā)者工具預覽dist查看 小程序npmrun頭條小程序：npmrun打開app.js集合了app.js和app.jsonimportTaro,{Component}from'@tarojs/taro'importIndexfrom'./pages/index'import//如果需要在h5環(huán)境中開啟React//取消以釋//if(process.env.NODE_ENV!=='production'&&process.env.TARO_ENV==={ //classAppextendsComponentconfig{pages:window:backgroundTextStyle:'light',navigationBarBackgroundColor:'#fff',navigationBarTitleText:'WeChat',navigationBarTextStyle:'black'}}componentDidMount(){componentDidShow()componentDidHide()componentDidCatchError()在App類中的render()//修改此函render{return<Index<Index)}}Taro.render(<App con?g就是app.json componentDidHide使用

ponents-desc.htmlexportexportdefaultclassIndexextendsComponentconfig=navigationBarTitleText:}(props)this.state={ }}render()return<View<Text>開課吧Todoreturn<View><Text>{i+1}:)}}}////import{View,Text,Button,Input}from//exportdefaultclassIndexextendsComponentconfig=navigationBarTitleText:}(props)this.state={ }}handleInputhandleInput}handleClick()=>{this.setState({}render{return<View<Text>開課吧Todo//<Inputvalue={this.state.val}<ButtononClick={this.handleClick}>添加//rn<View><Text>{i+1}:)}}npmnpminstalltaro-ui--savenpminstallnervjs--save官網選擇?/*/*CustomTheme$color-brand:$color-brand-light:$color-brand-dark:@import"~taro-taro

H5esnextModules，在////config/index.jsh5:{esnextModules:['taro-}importimportTaro,{Component}fromimport{View,Text,Input}from import{AtButton,AtInput,AtList,AtListItem}from'taro-importexportdefaultclassIndexextendsComponentconfig=navigationBarTitleText:}r(props)this.state={ }}//******updatehandleInput=}//******handleClickhandleClick()=>{this.setState({}render{return<View<Text>開課吧Todo<ViewclassName='at-iconat-icon-bullet-<AtInputvalue={this.state.val}<AtButtontype='primary'{/*<Inputvalue={this.state.val}return<AtListItem)}}使用npmnpminstall--savemobx@4.8.0@tarojs/mobx@tarojs/mobx-h5@tarojs/mobx-src////import{observable}fromconsttodoStore=todos:exportdefault////import{Provider}from'@tarojs/mobx'importtodoStorefrom'./store/todo'conststore={}render{return<Provider<Index)}importimportTaro,{Component}fromimport{View,Text,Input}from import{AtButton,AtInput,AtList,AtListItem}from'taro-importimport{observer,inject}from'@tarojs/mobx'//Adding@inject('todoStore')//Adding //exportdefaultclassIndexextendsComponentconfig=navigationBarTitleText:}}}handleInput(val)=>{}handleClick=ps.todoStore.addTodo(this.state.val)//Adding}render()const{todoStore}=psreturn(<View<Text>開課吧Todo<ViewclassName='at-iconat-icon-bullet-<AtInputvalue={this.state.val}<AtButtontype='primary'onClick={this.handleClick}>添加return<AtListItem)}}////importTarofrom'@tarojs/taro'import{observable}