跨端开发小程序

2023-11-10 12:20:58

在微信小程序中，每个页面都是由.js、.wxss、.wxmk和.json四个部分构成，代码结构比较复杂。另外，由于对ES6语法和sass等css预处理支持的不友好，导致开发效率很低，所以早早就有用vue.js来开发小程序的框架，比如webpy和mpvue，但是基本都是单纯的开发微信小程序。

可是，随着微信小程序、网页H5、头条小程序、百度小程序、支付宝小程序、快运用、原生APP的增多，每个都独立开发的话，每个前端估计都要吐血了，所以，就出现了跨端开发的框架。现在基本对多端支持足够好的，就是taro和uni-app了，分别使用react和vue的语法来开发小程序生态。

taro环境配置

官网（https://taro.aotu.io/）上面提到，需要node版本大于8.0.0就可以了，然后直接安装Taro开发工具就可以了，但在这里也建议安装一下剩下的两个命令：

npm install -g @tarojs/cli

npm install -g babel-cli

npm install -g babel-preset-es2015

创建项目

taro创建项目的命令也十分简单：taro init name

项目创建完成后，会生成如下文件目录

核心代码都在src里面，所有页面都以文件夹的形式存放在page文件夹中，如上所示，每个页面由.js和.css两个文件组成。

由于是跨端项目，需要通过执行不同的命令来在不同的端查看效果：

执行npm run dev:h5 会打开浏览器，预览H5的效果
执行npm run dev:weapp 会生成一个dist文件夹，使用微信开发者工具打开这个dist文件夹，就能查看微信小程序的效果
执行npm run dev:swan 百度小程序
执行npm run dev:tt 头条小程序
执行npm run dev:alipay 支付宝小程序
执行npm run dev:rn React-nativeAPP

H5测试

简单使用

tabBar

taro项目的总入口和tabBar配置都在app.js里面，默认生成的项目里面是只有一个页面的，所以也没有tabBar

但是我们可以像使用微信小程序一样的在taro里面添加tabBar：

首先是添加页面：

然后在每个页面中都添加最基本的结构：

然后配置tabBar：

因为我没有准备图标，所以这里没有放图标，但在正常使用时，是可以通过iconPath和selectedIconPath来添加对应图标的

使用state

除了一些配置上面的不同除外，taro里面的语法和react大多都是一样的。

import Taro, { Component } from ‘@tarojs/taro‘
import { View, Text } from ‘@tarojs/components‘
import ‘./index.scss‘

export default class Index extends Component {

  config = {
    navigationBarTitleText: ‘index‘
  }
  constructor(props){
    super(props)
    this.state={
      todos:[‘吃饭‘,‘睡觉‘,‘打豆豆‘]
    }
  }

  render () {
    return (
      <View className=‘index‘>
        <Text>TODO List</Text>
        {
          this.state.todos.map((item,i)=>{
            return <View>
              <Text>{i+1}:{item}</Text>
            </View>
          })
        }
      </View>
    )
  }
}