Taro开发微信小程序

2,219 阅读3分钟

前言

作为一名前端小白,最近开始学习微信小程序的开发,选择的技术栈是Taro,之所以选择这个技术来练习小程序的开发是因为可以使用React的语法进行开发,而本人工作所用的主要前端框架就是React。在刚开始搭建项目的过程中,就遇到了不少问题,经过了不少的尝试,最后才算真的踏上了起点,下面给大家分享一下最开始遇到的一些问题和我的解决办法,希望对大家有所帮助。

搭建环境

  • npm
npm install -g @tarojs/cli
taro init myApp
  • yarn
yarn global add @tarojs/cli
taro init myApp
  • 然后就是初始化项目 Z_(O79@5QEE0`)%4P31)G.png
    框架使用的是React,不熟悉TypeScript的同学可以简单看一下这个,现在的项目开发基本上都是需要会这个的,模板我使用的是taro-ui,刚开始试过antd-mobile,但存在一些问题,而且antd组件有部分在这上面不支持,所以直接用的taro-ui,当然啦,自己手写css也是行的!然后就等待项目依赖安装好。

启动项目

  • 使用vscode或者webstrom打开myApp目录,执行npm i或者yarn
  • 执行npm run dev:weapp或者yarn dev:weapp
  • 使用微信开发者工具打开编译后的dist目录就可以看到运行效果啦 这里提醒一下大家有时候改动的东西过多或者报错奔溃后改正了可能也不能继续编译正确的代码,当大家觉得代码没问题了还是编译错误不要犹豫先ctrl+c结束再重新yarn dev:weapp。

关于项目一些注意点

  • 组件中没有div等东西,都是用View

  • 没有react-router之类的路由,都是在app.config.ts之下配置pages,路由跳转有提供的api,后续介绍不同api的区别 1@(@]Y@EHM45LB07FJB9K.png

  • tabBar也是需要配置的,在app.config.ts下面配置tabBar _ODCVY{H(_UJ%VHX{FYRAYK.png
    custom属性的作用是表示使用自定义的tabBar,设置为true之后界面下方就不会出现默认的tabBar,具体效果大家可以尝试一下,在list之下配置的路径就是表示是tabBar页面了,可以使用switchTab进行跳转

  • switchTab中的url需要注意一下,如果不以'/'开头就i会默认以'/pages/index'开头,就会报错找不到tabBar

EFBEL8ZAUK@2NZ%CCO4JA6X.png

  • 不要一个页面引入另外一个页面,会出现只显示引入的页面的情况,不是页面只是复用组件之类的文件放在pages/components里面,也不需要配置pages,或者只是当前页面拆分的组件直接放在当前目录下就行了,尽量以index.tsx作为主文件,其他命名的文件作为index文件的组件使用

后记

如果大家还有其他问题欢迎留言讨论,大家一起学习进步,后续也会更新自己平常学习遇到的一些问题供大家分享!
本文的小demo地址:

git@gitee.com:wyw5201314/wyw-front-end-learning-to-use.git