taro入门教程(一)

taro入门教程

---

安装cli, 初始化项目

# taro
$ taro update self [version]
# npm
npm i -g @tarojs/[email protected]
# yarn
yarn global add @tarojs/[email protected]

使用2.x版本开发小程序, 初始化项目

$ taro init myApp

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目
$ npx @tarojs/cli init myApp


使用sass的话, 运行错误请安装
$ npm install -g mirror-config-china

初始时选择的ts, css预处理, 项目模板自己看情况, 模板用默认就可以了

在使用 Taro 进行多端开发中，请确保 Taro CLI 的版本与你项目的依赖版本一致，否则可能会出现编译错误或者运行时错误。

---

微信小程序

需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

去根目录的project.config.json文件设置小程序的appid, 使用微信开发者工具打开目录下dist即可预览编译出来的代码

---

生命周期

// app.js  page页面
class Xxxx extends Component {

  // 对应小程序的个个json配置--项目配置, 页面配置
  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  // 钩子函数没有option传参 使用 this.$router.params 替代
  componentWillMount () {
    console.log('onLaunch:', this.$router.params)
  }

  componentDidMount () {}
    
  // 对应app.js, page的onShow函数
  componentDidShow () {
    console.log('onShow')
  }
  
  // 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时
  componentWillUnmount () { }
  
  // onHide  页面隐藏/切入后台时触发
  componentDidHide () {}

  render () {
    return (
      
    )
  }
}