taro初体验

今天使用taro来编写一下微信小程序。

1，初始化工作 

 全局安装

cnpm install -g @tarojs/cli --unsafe-perm  //  我电脑有时候需要权限所以要加参数 --unsafe-perm

初始化项目

taro init myApp

进入项目安装包

 cnpm i --unsafe-perm

启动项目

 npm run dev:weapp
然后就可以进到hello world了，

 

2， 打包测试一下 是否在小程序上能跑

npm run build:weapp 

用小程序工具打开dist目录，完全没问题， 需要注意的是 以后的开发完全以 源码为准，改dist没有意义

 

3， 使用hooks重构index页面， app入口就不要动了

import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'


export default  function Index(props) {
  return <View>test</View>
}

4，使用子组件传值，并且使用hooks的方法

//父组件
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child/Child'
import './index.less'


export default  function Index(props) {
  const [userName, setUserName] = useState('js') ;
  return <View>
    {userName}
    <Child params={'111'}/>
  </View>
}



// 子组件
import Taro, { useState,useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'




export default function (props) {

  const [params, setParams] = useState('');

  useEffect(()=>{setParams(props.params) },[]) // 在compondidmount时执行一次， 设置值
  return <View>{params}</View>
}

5， 路由 和 传 输 

//  app.jsx 的配置
 config = {
    pages: [   // 谁在最上面默认打开就是谁 
      'pages/index/index',
      'pages/Detail/index',
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

使用 

// 原先页面
import Taro, { useState } from '@tarojs/taro'
import { View, Text,Button } from '@tarojs/components'
import Child from './child/Child'
import './index.less'


export default  function Index(props) {
  const [userName, setUserName] = useState('js') ;
  const [title, setTitle] = useState('我是标题') ;
  const [introduce,setIntroduce] = useState('我是简介') ;

  const gotoDetail = ()=>{  // 其他的方法和小程序一样
    Taro.navigateTo({
      url:`/pages/Detail/index?title=${title}&introduce=${introduce}`  // 记得加/
    })
  }

  return <View>
    <Button size={'mini'} onClick={gotoDetail}>detail</Button>
    {userName}
    <Child params={'111'}/>
  </View>
}

//跳转页面


import Taro, { useState,useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import component from "@tarojs/taro-quickapp/src/component";


export default function (props) {
  const [title, setTitle] = useState('') ;
  const [introduce,setIntroduce] = useState('我是简介') ;
  useEffect(()=>{
    setTitle(this.$router.params.title);  // 使用这个参数来接收页面传递的值
    setIntroduce(this.$router.params.introduce)
  },[])
  return <View>{title}<View> {introduce}</View></View>
}

6, 静态资源的引入 

1，import 

2， require  // 这个需要引入使用 requirePlugin 

7，发请求

 const resHandle = ()=>{
    Taro.request({
      url:'http://123.207.32.32:8000/home/multidata',
    }).then(res=>{console.log(res)})

  }



<Button size={'mini'} onClick={resHandle}>res</Button>