Taro多端开发及编译踩坑

置顶 已于 2023-03-09 19:23:51 修改
阅读量2.9k 收藏 9
点赞数 3
分类专栏： 小程序 文章标签： taro javascript 前端
于 2022-10-25 15:19:23 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/m0_37285193/article/details/127513341
版权

一. 项目搭建

1. 安装@tarojs/cli

npm i -g @tarojs/cli @3.4.9
npm i @nutui/nutui-taro@3.1.20 //ui框架，看需要安装

直达地址

2. 项目初始化

$ taro init myApp

3. 相关文档

二. 多端开发配置

1. config.index.js

const config = {
	...
	outputRoot: `dist/${process.env.TARO_ENV}`,
	...
}

2. project.config.json

{
	...
	"miniprogramRoot": "dist/weapp/",
	...
}

三. 多端编译问题

1. weapp -> alipay编译

1.1 <rich-text> nodes属性兼容

解决办法：

// 通过mini-html-parser2对string进行处理
import parse from 'mini-html-parser2';
parse(nodes, (err, nodes) => {
    if (!err) {
       // nodes
    }
});

1.2 页面自定义导航栏

// page.config.js
let config = {};
if (process.env.TARO_ENV === 'weapp') {
    config = { navigationStyle: 'custom'};
}
if (process.env.TARO_ENV === 'alipay') {
    config = { transparentTitle: 'always'};
}
export default config;

1.3 getSystemInfoSync().safeArea兼容

作用：通过getSystemInfoSync().screenHeight 与 getSystemInfoSync().safeArea.bottom 对比，判断是否存在safeArea，但alipay的getSystemInfoSync()不存在safeArea该属性

解决办法：

  • 1.webapp 保持原有逻辑
  • 2.alipay 通过model(手机型号)参数 直达地址
export const isIPhoneX = () => {
    if (process.env.TARO_ENV === 'weapp') {
        const screenHeight = getSystemInfoSync().screenHeight;
        const bottom = getSystemInfoSync().safeArea.bottom;
        return screenHeight !== bottom;
    }
    if (process.env.TARO_ENV === 'alipay') {
        const model = getSystemInfoSync().model;
        const [num, index] = model.split(',');
        const phoneNum = num.replace('iPhone', '');
        if (phoneNum >= '11' && model !== 'iPhone14,6') {
            return true;
        }
        if (phoneNum === '10' && (index === '3' || index === '6')) {
            return true;
        }
        return false;
    }
};

1.4 alipay 中 <input/> 设置 background-image存在显示bug

在这里插入图片描述

解决办法： 背景图设置在父容器上

1.5 <input/>标签display属性

  • weapp <input/> -> block
  • alipay <input/> -> inline-block

1.6 <map>标签display属性

  • weapp map -> block
  • alipay map -> inline-block

1.7 openLocation() - 使用内置地图查看位置

alipay 多个必填参数address 直达地址

openLocation({
    latitude: '',
    longitude: '',
    name: '',
    scale: 14,
    address: '' //支付宝参数必填
});

1.8 关联公众号/生活号

weapp -> official-account 直达地址

image.png

alipay -> lifestyle 直达地址

image.png

  • 注意：

1.生活号如果升级为生活号+,public-id不在支持
2.需要小程序后台运营中心配置小程序横幅组件，点击应用生成一下代码

<lifestyle scene-id="d7e1ed36211c4a52861cb99" />

但taro编译存在问题，会过滤lifestyle的scene-id属性，导致页面组件不显示

  • 解决办法：

a.配置关注按钮组件，前端自己写样式。
<life-follow scene-id="0cb2c4ad8a22439ea4c91b70838d339f" />

b.dist/alipay/pages/index/index.axml - 该组件页面
找到lifestyle标签，手动增加属性sceneId【需要每次编译，都会被覆盖】

c. 修改npm包，打补丁

1.9 login()获取登录凭证

  • weapp - login -> openId【用户唯一标识】及unionid【用户在开放平台的唯一标识符，若当前小程序已绑定到微信开放平台帐号下会返回】直达地址
  • alipay - getAuthCode -> user_id【支付宝用户的唯一标识】 直达地址

1.10 获取定位兼容

  • weapp -> 获取定位授权，自定义getMap查询城市，经纬度。其中getMap借助bmap-wx.min.js 直达地址
  • alipay -> 官网API getLocation 直达地址
getSetting({
    success: function (res) {
        if (process.env.TARO_ENV === 'weapp') {
            if (!res.authSetting['scope.userLocation']) {
                authorize({
                    scope: 'scope.userLocation',
                    success: async () => {
                        const { location, city } = await getMap();
                        that.location = location;
                        that.curCity = city;
                    }
                });
            } else {
                getMap().then(({ location, city }) => {
                    console.log(location, city);
                    that.location = location;
                    that.curCity = city;
                });
            }
        } else if (process.env.TARO_ENV ==='alipay') {
            getLocation({
                type: '1',
                success({ longitude, latitude, city }) {
                    that.location = {
                        lng: longitude,
                        lat: latitude
                    };
                    that.curCity = city;
                }
            });
        }
    }
});

1.11 <button>样式 显示不同

  • webapp 存在默认行高
    在这里插入图片描述

  • alipay 无默认行高

解决办法：1.固定行高 2.flex居中

1.12 获取元素宽高兼容

  • weapp写法如下，但是 alipay不支持该写法

createSelectorQuery()
    .select('.rich-text')
    .boundingClientRect(function (rect) {
        isOver.value = rect.height > 70;
    })
    .exec();

统一处理如下

createSelectorQuery()
    .select('.rich-text')
    .boundingClientRect()
    .exec(([{ height }]) => {
        isOver.value = height > 70;
    });

1.13 http方法

enableCookie 默认 false，开启后可在headers中编辑cookie（10.2.33版本开始支持）

QQ202209151931402x.png

1.14 image 长按识别

  • weapp - show-menu-by-longpress="true"

  • alipay - 不支持
    在这里插入图片描述

1.15 enableAlertBeforeUnload&disableAlertBeforeUnload 返回拦截

alipay - 基础库 2.7.17 及以上版本，客户端 10.2.60 及以上版本及本地IDE不支持

  • 本地开发IDE需要操作如下，否则报错
    image.png
  • 根目录新建文件project.alipay.json
{
  "enableAppxNg": true,
  "enableNodeModuleBabelTransform": true
}

1.17 <picker> - event.detail.value 数据类型不一致 event对象如下图所示

  • weapp - string

image.png

  • alipay - number

image.png

1.18 uploadFile 上传文件

需要新增必填参数 fileName&fileType直达地址
fileName = res.tempFiles[0].path.split(‘/’).reverse()[0] 这是临时文件名【原文件名无法获取】
fileType = ‘image’

1.19 分享

  • weapp 不配置 enableShareAppMessage: true的话，不支持
  • alipay 默认支持 需调用hideShareMenu禁用
    image.png

1.20 picker mode='date'的change事件返回event.detail.value时间格式不一致。

  • weapp -> ‘2022-04-01’
  • alipay -> 1.IDE-‘2022-04-01’ 2.真机-‘2022/04/01’

1.21 跳转问题

a. 公众号或生活号文章
  • weapp 官方公众号文章 - 可直接webview打开
  • alipay 生活号文章 - navigateToAlipayPage
if (jumpUrl.startsWith('https://render.alipay.com')) {
    my.ap.navigateToAlipayPage({
       path: encodeURIComponent(jumpUrl)
    });
}
b.其他
  • weapp 跳转tabbar page，只可用switchTab，navigateTo会报错
    image.png
//当无法区分url是否为tabbar page(比如路径动态配置)时，兼容写法如下
navigateTo({ 
    url,
    fail: function (res) {
        switchTab({ url })
    }
})
  • aliapy里 navigateTo和switchTab都可以用，两个api区别是navigateTo左上角有返回按钮
    image.png

兼容写法如下

//通过获取app.config.js中的配置来判断url是否为tabbar page
import('@/app.config.js').then(({ default: app }) => {
    const isTabBar = app.tabBar.list.some((item) => url.includes(item.pagePath));
    isTabBar ? switchTab({ url }) : navigateTo({ url });
});

1.22 页面下拉刷新

//page.config.js
let config = {};
if (process.env.TARO_ENV === 'weapp') {
    config = { enablePullDownRefresh: true};
}
if (process.env.TARO_ENV === 'alipay') {
    config = { pullRefresh: true};
}
export default config;

支付宝需要额外配置app.config.js

export default {
    window: {
       	...
        allowsBounceVertical: 'YES' //是否允许向下拉拽
    },
    ...
}

1.23 按需注入配置问题

  • weapp 配置app.config.js
export default {
    lazyCodeLoading: 'requiredComponents',
    ...
}
  • alipay 存在分包的话需要额外添加参数subPackageBuildType，否则上传版本会报错。
    image.png
export default {
    lazyCodeLoading: 'requiredComponents',
    subPackageBuildType: 'shared',
    ...
}

1.24 build打包报错

在这里插入图片描述

解决办法

//config/index.js  mini下增加以下配置解决
webpackChain(chain, webpack) {
	chain.merge({
	    module: {
	        rule: [
	            {
	                test: /.js$/,
	                loader: 'babel-loader'
	            }
	        ]
	    }
	});
}

2. weapp -> h5编译

2.1 本地运行设置

//config/index.js
const config = {
   ...
   devServer: {
        https: true,
        host: 'localhost.**.com',
        port: 3000
   }	
   ...
}

2.2 http方法

credentials 设置 H5 端是否携带 Cookie

在这里插入图片描述

2.3 tabbar背景色设置

默认背景色为 #f7f7fa

在这里插入图片描述

通过css设置

.weui-tabbar{
    background-color: #fff;
}

2.4 不支持的API及功能

通用解决办法 - process.env.TARO_ENV !== 'h5'

a. canIUse - 检测小程序版本更新
b. getSetting - 获取用户授权
c. getMenuButtonBoundingClientRect - 获取胶囊信息，从而计算胶囊高度，如下图

在这里插入图片描述
在这里插入图片描述

解决办法：

/**
 * 系统信息
 */
const systemInfo = getSystemInfoSync();
/**
 * 导航栏高度
 */
const statusBarHeight = ref(systemInfo.statusBarHeight);
const navigationBar = ref(0);
if (process.env.TARO_ENV === 'h5') {
    navigationBar.value = 60;
} else {
    /**
     * 获取胶囊信息
     */
    const menu = getMenuButtonBoundingClientRect();
    /**
     * 胶囊高度
     */
    navigationBar.value =
        (menu.top - statusBarHeight.value) * 2 +
        menu.height +
        statusBarHeight.value;
}
d. enableAlertBeforeUnload disableAlertBeforeUnload - 返回提示拦截

解决办法：监听返回按钮事件

e. getOpenerEventChannel - 页面间通信
const pages = getCurrentPages();// 获取当前页面栈
const current = pages[pages.length - 1];
const eventChannel = current.getOpenerEventChannel();

解决办法: 通过vuex、pinia状态管理插件 注意及时销毁数据

f. button open-type="share" 分享不支持
g. 二维码长按不支持
h. <map>标签

解决办法： 百度地图SDK

i. createVideoContext不支持 - 创建 video 上下文 VideoContext 对象

image.png

解决办法

const videoContext = isH5 ? null : createVideoContext('myVideo');

videoContext && videoContext.play();

2.5 <nut-noticebar>标签 margin不生效

解决办法： 父标签包裹 margin

2.6 标签样式不生效

原因：

  1. swiper -> taro-swiper-core
  2. rich-text -> taro-rich-text-core
  3. image -> taro-image-core > img
  4. text -> taro-text-core

解决办法：class样式

2.7 input高度100%不生效

原因： input -> taro-input-core > input

解决办法：

taro-input-core{
    height: 100%;
}
taro-input-core input{
    height: 100% !important;
}

2.8 h5 最小字体12px 注意内容串行样式兼容

在这里插入图片描述

2.9 编译后原生导航栏不存在

2.10 开放功能webview 兼容

目的： 承载网页的容器

原因： webview->iframe

在这里插入图片描述

解决办法：

//  pages/out/index -->webview
>h5  window.location.href=jumpUrl
>weapp pages/out/index?url=${encodeURIComponent(jumpUrl)}

2.11 body背景色不生效

原因：被遮盖

解决办法：

.taro_router .taro_page{
    background-color: transparent !important;
}

2.12 100vh影响：底栏遮盖内容区|| 套娃滚动

.taro-tabbar__container .taro_router{
    min-height: 100%;
}

image.png

2.13 uploadFile

uploadFile需要参数fileName，后端由此判断文件格式

微信支付宝获取不到originalFileObj

if(isH5) fileName = res.tempFiles[0].originalFileObj.name

2.14 input字数限制

h5 ->vue指令实现

v-limit-num="curData.maxLength"

App.directive('limit-num', {
  mounted(el, { value = 100 }, vnode) {
    el.addEventListener('input', function () {
      console.log(el.value, value);
      if (el.value.length > value) {
        el.value = el.value.substring(0, value);
      }
    });
  }
});

weapp&alipay 支持maxlength属性

:maxlength="item.maxLength"

2.15 打包

// config/prod.js
module.exports = {
    ...
    h5: {
        publicPath: 'cdn目录',
		output: {
            filename: 'js/app.js',
            chunkFilename: 'chunk/[name].[chunkhash:8].js'
        }
        ...
    }
    ...
}
//.gitgnore
dist/ -> /dist/*  
!/dist/h5/

2.16 其他文件引入app.config.js

import app from '@/app.config.js'

提示
image.png

解决办法如下

if (isH5) {
    //
} else {
    import('@/app.config.js').then(({ default: app }) => {
        
    });
}

2.17 html 设置

// src/index.html
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no,email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-orientation" content="portrait" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<meta name="HandheldFriendly" content="true" />
<meta name="x5-fullscreen" content="true">
<meta name="fullscreen" content="yes">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="j1.*.com">
<link rel="dns-prefetch" href="img.*.com">
<link rel="dns-prefetch" href="c.*.com">
<link rel="preconnect" href="j1.*.com">
<link rel="preconnect" href="img.*.com">
<link rel="preconnect" href="c.*.com">
<title>title</title>
<link rel="icon" href="https://*/favicon.ico">
<meta data-vue-meta="ssr" data-vmid="keyword" name="keyword" content="">
<meta data-vue-meta="ssr" data-vmid="description" name="description" content="">

四. 其他

1. page.config.js 不支持文件引入
2. 小程序引入lodash会报错 - 解决办法
3.video安卓视频过大，点击播放无效
  • 解决办法：1.h5播放 2.上传腾讯视频，跳转腾讯小程序播放
4.PC微信客户端小程序 不支持 previewImage

在这里插入图片描述

5.不支持具名插槽
Stavin Li
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】
止于至善
03-10 226
在 Taro 文件中引入组件，将组件放入src下的components文件夹中。提供一个简单的 Overlay 遮罩层，在页面上的层级为 1026;
newTaro:使用Taro，只书写一套代码，再通过Taro的编译工具，将源代码分别编译可以在多端运行的，例如微信小程序，支付宝小程序，H5
03-23
芋头演示 使用Taro，只书写一套代码，再通过Taro的编译工具，将源代码分别编译出可以在多端。 技术栈 芋头React node scss预编译器CSS redux状态管理 多端类型 微信小程序H5
Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）
最新发布
Mr Dear的博客
04-28 218
微信小程序根据系统主题展示不同样式
Taro React组件开发（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】
止于至善
10-22 690
每个动画执行的时间差，如果没有对应的时差，可能会导致动画不执行或者动画没有执行完成就关闭等情况；第一层和第三层必须添加阻止冒泡，否则在组件使用的时候，会由于冒泡导致各种点击事件问题。
Taro入门踩坑记
mm_002的博客
11-04 3984
Taro分享 1.Taro是什么？ Taro是一套遵循React 语法规范的多端开发解决方案，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法。 Taro在 Web 端的代码中使用自研的类 React 组件框架 Nerv 作为基础框架；在CLI 工具的设计上，借鉴打包工具 Athena 的代码；使用Lerna管理仓库包。 Taro通过内部的编...
Taro多端组件库的设计与实现
React_Community的博客
08-25 412
本篇文章基于业务中搭建多端组件库的经验撰写一、背景1.1 背景团队业务：C端商城，需要支持小程序、H5团队技术栈：Taro+React多端 打怪过程如下：step1: 部门刚成立的时候，业务跑的很快，从0-1建设多端商城，给我们搞技术的时间几乎没有，所以一上来，我们选用了taro-ui组件库，使用下来我们发现，好用的组件库很少，且问题很多，官方也停止更新了，最后一个版本在20年4月份step2: ...
微信小程序分享页面代码
m0_57790713的博客
07-23 2600
当用户点击分享按钮或通过右上角菜单分享时，会触发`onShareAppMessage`方法，返回相应的分享参数，并显示分享菜单供用户选择分享方式。2. 在你需要触发分享的页面的相关事件（例如点击按钮）中，调用`wx.showShareMenu`方法来显示分享菜单。"enableShareAppMessage": true, // 开启分享功能。"navigationBarTitleText": "小程序标题"// 在需要触发分享的事件中调用showShareMenu方法。"title": "分享标题",
Taro小程序分享功能
qq_33539839的博客
08-01 8294
Taro小程序分享onShareAppMessage (Object)功能使用 1.配置指定页面可分享(默认菜单栏分享按钮为灰色，不可分享) 找到page.config.js，配置如下 export default { enableShareAppMessage: true } 2.Class类的页面添加如下： export default class Index extends Component { onShareAppMessage (res) { i
npm包版本过低，如何打补丁
Stavin Li的博客
01-05 703
但是这样的话，项目每次npm install，都会被覆盖，这时候就需要打补丁。但在实际编译后，页面未正常展示，并且查看编译文件。，通过源码分析后，只需要修改。在支付宝小程序中，页面。中添加如下字段及内容。
Taro3的编译配置
Sapling
09-09 2300
taro3的编译配置功能
微信小程序开发：实现分享功能
吃不胖.
09-03 3334
其中，updateShareMenu 表示更新分享卡片事件，withShareTicket 表示是否使用带 shareTicket 的分享方式，isUpdatableMessage 表示是否允许分享卡片的内容被动态修改，activityId 表示活动 ID，targetState 表示转化目标状态，templateInfo 表示分享卡片的模板信息，包括标题、图片和路径等内容。以上就是微信小程序开发中实现分享功能的详细介绍，包括开启分享功能、设置分享内容、监听分享事件、自定义分享菜单和分享卡片样式等方面。
Taro多端开发实现原理与项目实战
03-28
Taro 多端开发实现原理与项目实战
Taro 多端统一开发框架
08-16
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时
Taro多端统一开发框架
08-17
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时
Taro多端统一开发框架 v1.3.22
09-29
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时
Taro多端统一开发框架 v2.0.7
08-18
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时
Taro开发多端小程序的一些全局配置，页面配置，购物车，Taro UI组件库 以及API的使用
weixin_45473998的博客
02-23 4556
好多小白在做微信小程序开发的时候比较懵，今天给大家简单的说明一下全局配置，以及页面配置 完整配置项说明请参考小程序全局配置 { "pages": [ "pages/home/home", "pages/kind/kind", "pages/index/index", "pages/cart/cart", "pages/logs/logs", "p...
taro 踩坑笔记
pspxuan的博客
06-20 597
最近使用 react 的多端开发框架 taro 时踩了很多坑，记录一下 1. 只使用 class 选择器， 使用伪类时在小程序端无法生效 2. 使用 CSS 实现 多行文本溢出显示省略号 时，发现 外部样式表中的某些样式会被忽略掉，导致一直无法生效 解决方法 ：直接添加行内样式即可 3. 使用图片时，不可以直接使用，必须将图片 import 入 文件后才可以使用。 import phoneIcon from '../../../public/images/phone.png' 4. 组件中定义 add.
Taro React组件开发（8） —— RuiUploadImages 多图片上传组件【Promise.all 实现】
止于至善
04-23 777
由于 Taro.uploadFile 只能每次对一个选择图片进行上传，所以对选择的第一个图片进行上传；使用 Taro.chooseImage 选择要上传的图片。注意由于api原因，因此实现单图上传。
taro可以开发什么？
06-01
Taro 是一个开放式跨端跨框架解决方案，目前可以支持开发微信、支付宝、字节跳动、H5、React Native 等多端应用。使用 Taro 开发，可以实现一次开发、多端运行的效果，提高开发效率和代码复用率，同时也可以实现原生应用的性能和体验。 在 Taro 中，你可以使用 React 的开发模式和 API，同时也可以使用 Taro 提供的一些独特的组件和 API 来满足不同端的特殊需求。你可以使用 Taro 开发小程序、公众号、H5 页面、移动应用等多种应用场景，同时也可以在不同的端之间共享代码和逻辑。因此，Taro 是一个非常强大的跨端开发框架，可以帮助开发者快速构建多端应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值