一、taro新建页面
1、在src下的pages下新建页面，新建的页面看和pages下的文件夹那个比较贴近就建在哪个文件夹下，如果没有就在pages下新建个文件夹，在新建的文件夹中新建页面
新建完页面以后需要在app.js文件里注册下
在pages下新建文件夹
在user文件夹下新建.js和.less文件
在app.js文件里注册test页面
在app.js的pages的数组中谁放在第一个，在小程序访问的时候就是最先打开的页面
例如：
（1）在新建pages下建了一个test文件夹
（2）在当前文件夹下新建test.js文件（在.js文件中写js和html）和test.less文件（在.less文件中写css样式）
一个新建的test.js文件主要包括以下基础内容，（新建好别的.js文件，直接复制过去就行）
import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components' //定义页面中用到的标签，标签首字母要大写
import './test.less' //引入css文件（选择器的写法基本上是不支持的）
export default class Test extends Component{ //User_sign是.js的文件名
config = {
navigationBarTitleText: '测试', //页面顶部的显示的文字
navigationBarBackgroundColor: '#ff495e',
navigationBarTextStyle: 'white',
backgroundTextStyle: 'light'
}
constructor(props) {
super(props)
this.state={//在这里面定义变量
datalist:[],//定义的变量
}
}
//一进页面获取数据相当于onload
componentDidMount() {
}
render() {
const{datalist}=this.state;//定义的变量需要在这里面在写一下
return(
<View className='app'>
{/*在这里面写页面就是html*/}
</View>
)
}
}
把上面的代码复制到你新建的.js文件中以后需要换掉以下内容
修改
二、taro语法
（1）给变量赋值
//例如给上面定义的变量datalist赋值
this.setState({
datalist:[0,1]
})
var arr=[2,3]
that.setState(prevState => ({datalist: prevState.datalist.concat(arr)}))
//会遇到明明执行过setState()，但是state的值却不是最新的，需要这样写就会拿到最新的值
this.setState(
{ data: newData },
() => {
//这里打印的是最新的state值
console.log(this.state.data);
}
);
（2）获取input的值
<Input type='text' placeholder='请填写您的昵称' onInput={this.getInputVal.bind(this)} />
getInputVal(e){
e.preventDefault();
this.setState({
inputVal: e.detail.value,
});
}
（3）条件渲染 taro官方介绍
条件渲染有好几种方法：元素变量，逻辑运算符，三元运算符，枚举条件渲染
这个项目主要用的是三元运算符。
{ isLoggedIn
? <Text>已登录</Text>
: <Text>未登录</Text>
}
（4）列表渲染
//item是列表中的每一个元素i是下标index
{posts.map((item,i) =>
<Text key={item.id}>
{item.title}
</Text>
)}
（5）事件处理:组件任何事件的传递都要以on开头
<View onClick={this.bindLink.bind(this, 'address')}></View>
bindLink(cate, e) {
e.preventDefault();
//请求接口
//method:POST,PUT,GET,DELETE
//header:util.ISh5(),请求接口的时候需要带上登录人的信息
//header: { 'content-type': 'application/json' },请求接口的时候不需要带上登录人的信息
util.request({
url: util.AppBase() + '接口名',
method: 'POST',
data: {},
header: util.ISh5()
})
.then(res => {
if (res.data.msg === '成功') {
//请求成功，在这里面进行操作
}
else {
Taro.showModal({
title: '提示',
content: res.data.msg
})
}
})
}
（6）页面传值
例如：从goods列表进到goods_detail页面，需要把goods的id传过去，
在goods.js文件中传
Taro.navigateTo({
url: '/pages/goods_detail/goods_detail?id='+goodsId
});
在goods_details.js文件中接受
componentDidMount() {
var goodsId = this.$router.params.id;
}
到小程序上提交体验版的时候因为代码包太大上传不了，需要在代码里把dist删除，重新运行yarn build:weapp;在回到小程序开发工具上传体验版，这时候会出现有的文件没有被打包，把小程序开发工具关了，在打开在上传就好了
