课小程序实战02瑞客

React+开发小程 React+作业&&官网npminstallg@tarojs/cli云 其实由于原生小程序开发自己玩了一套自己的语法，所以早早就有用vuejs来开发小程序的框架，比如webpy和mpvue，但是基本都是单纯的开发小程序，现在基本对多端支持足够好的，就是taroTaroTaro是一套遵循React语范的多端开发解决方案。现如今市面上端的形态多种多样， //支付宝/字节跳动小程序、H5、React-Native等）运行的代码。Taronpmnpminstall-gnpminstall-gbabel-npminstall-gbabel-preset-tarotaroinittaro-##npmscriptnpmrundev:h5npmrunbuild:h5##npmnpmrundev:weappnpmrunbuild:weapp##npmscriptnpmrundev:h5npmrunbuild:h5npmnpmrun执行npmrundev:h5会打开浏览器，预览H5执行npmrundev:weapp打开 开发者工具预览dist查看 小程序npmrun头条小程序：npmrun打开app.js集合了app.js和app.jsonimportTaro,{Component}from'@tarojs/taro'importIndexfrom'./pages/index'import//如果需要在h5环境中开启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 config就是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}