Taro小程序跨端方案 - 简书

本次展示主要介绍如何实现一套代码跨多端，使用传统的前端方式开发小程序，解决各平台个性化，状态管理，以及自动化打包多平台流程。

关于Taro

Taro是有京东凹凸实验室打造的多端统一开发框架，目前支持react、vue等主流框架，写一套代码就可以多端运行

支持ES6、ES7 8等新规范

支持npm、yarn安装管理

支持Redux、MobX进行状态管理

支持Less、Scss预编译

支持大部分前端库、组件

遵循前端开发规范，前端人员皆可参与，极大的解放生产力

安装脚手架

npm install -g @tarojs/cli   // 全局安装

查看版本信息：npm info @tarojs/cli  // 本次演示版本@3.3.9

初始化：taro init [name]

开发环境

"dev:weapp": "npm run build:weapp -- --watch", // 微信

"dev:swan": "npm run build:swan -- --watch", // 百度系

"dev:alipay": "npm run build:alipay -- --watch", // 阿里系

"dev:tt": "npm run build:tt -- --watch", // 头条系

"dev:h5": "npm run build:h5 -- --watch", // H5

"dev:rn": "npm run build:rn -- --watch", // react-native

"dev:qq": "npm run build:qq -- --watch", // QQ

"dev:jd": "npm run build:jd -- --watch", // 京东系

"dev:quickapp": "npm run build:quickapp -- --watch" // 快应用

本地运行

本次环境主要以微信小程序演示

npm run dev:weapp // 启动本地环境

然后打开微信开发者工具，目录为project.config.json配置的miniprogramRoot的值，默认为根目录的dist/，

使用HTML标签

多年以来，Web端沉淀了大量优秀的组件库、优秀的前端工程师，使用HTML方式开发有以下优势：

可以让众多前端工程师0成本上手开发

大多组件库也可以支持，例如antD

原生H5代码也可以直接迁移

使用方法：

yarn add @tarojs/plugin-html

config = {

 _// ..._

  plugins: ['@tarojs/plugin-html']

}

百度系小程序

taro框架没有默认的百度小程序配置，需要手动添加，步骤如下：

百度小程序配置： project.swan.json

{

  "libVersion": "2.10.9",

  "setting": {

    "urlCheck": false

  }

}

飞书小程序

yarn add @tarojs/plugin-platform-lark

plugins: [

[

'@tarojs/plugin-platform-lark',

    {

pc:false

    }

]

]

"build:lark": "taro build --type lark",

"dev:lark": "npm run build:lark -- --watch",

飞书小程序配置：project.lark.json

{

"miniprogramRoot": "./",

  "projectname": "taro-lark",

  "description": "taro-lark",

  "appid": "touristappid",

  "setting": {

"urlCheck": true,

    "es6": true,

    "postcss": false,

    "minified": false

  },

  "compileType": "miniprogram"

}

钉钉小程序

yarn add @tarojs/plugin-platform-alipay-dd

plugins: [

[

'@tarojs/plugin-platform-alipay-dd'

  ]

]

"build:dd": "taro build --type dd",

"dev:dd": "npm run build:dd -- --watch",

环境判断

可以根据该参数显示相应的平台内容，示例：

import {useEnv}from "taro-hooks";

const env = useEnv();

const envObj = {

'WEAPP':'这是微信小程序',

  'SWAN':'这是百度小程序',

  'ALIPAY':'这是支付宝小程序',

  'WEB':'这是H5页面',

}

{

envObj[env]

}

redux状态管理

taro项目里可以自由使用react相关的技术栈，比如使用redux解决复杂的数据管理问题。

使用方法如下：

安装依赖：npm I redux react-redux

根目录下新建reducers/index.js

import {combineReducers} from 'redux';

function count(state = 0, action) {

switch (action.type) {

case 'GET_COUNT':

return action.data;

    default:

return state;

}

}

export default combineReducers({

count

});

在入口文件加入配置：

import {Provider}from 'react-redux';

import {createStore}from 'redux';

import reducersfrom './reducers';

const store =createStore(reducers);

render() {

return (

{this.props.children}

)

}

容器组件内使用

import {useSelector, useDispatch}from 'react-redux';

const count =useSelector(state => state.count);

const dispatch =useDispatch();

dispatch({

'type':'GET_COUNT',

  'data': count +1

});

自动化

同时支持多个平台，全部挨个手动打包费时费力，因此可以使用shell脚本实现多平台自动化打包。

以微信、H5、百度、头条、阿里为例：

!/usr/bin/env bash

count=0

my_arr=(weapp h5 swan tt alipay)

fn() {

name=${my_arr\[$1]}

if [ -d"$name" ];then

    rm -rf"$name"

  fi

  echo "开始打包${name}"

  npm run build:"$name"

  mv dist"$name"

  tar -zcf"$name".tar.gz"$name"

  rm -rf"$name"

  echo "${name}打包结束"

  val=$((${#my_arr[@]} -1))

if [ $1 -lt $val ];then

    val2=$(($1 +1))

fn $val2

fi

}

fn $count

原网址: 访问
创建于: 2022-07-13 00:24:57
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论