Taro多端开发及编译踩坑

言诗把酒

 关注

阅读 149

2023-01-02


版本
Taro v3.4.9
@nutui/nutui-taro ^3.1.20

一. 项目搭建

1. 安装​​@tarojs/cli​​

​​直达地址​​

2. 项目初始化

$ taro init myApp

3. nutui

​​京东风格的轻量级移动端 Vue 组件库​​

二. 多端开发配置

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​​属性兼容

​​weapp​​​ 中 ​​nodes​​​ 支持 ​​array/string​​​, ​​string​​​相当于​​v-html​​​ ​​直达地址​​

​​alipay​​​ 中 ​​nodes​​​ 只支持 ​​Array​​​ ​​直达地址​​

解决办法：

// 通过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 >= 'iPhone11' && model !== 'iPhone14,6') {
            return true;
        }
        if (phoneNum === 'iPhone10' && (index === '3' || index === '6')) {
            return true;
        }
        return false;
    }
};

1.4 ​​alipay​​​ 中 ​​input​​​ 设置 ​​background-image​​存在显示bug

Taro多端开发及编译踩坑_javascript

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

1.5 input元素

​​weapp​​​ ​​input​​​ -> ​​block​​

​​alipay​​​ ​​input​​​ -> ​​inline-block​​

1.6 map元素

​​weapp​​​ ​​map​​​ -> ​​block​​

​​alipay​​​ ​​map​​​ -> ​​inline-block​​

1.7 openLocation()方法

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

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

1.8 关联公众号/生活号

​​weapp​​​ -> ​​official-account​​​ ​​直达地址​​

Taro多端开发及编译踩坑_ci_02

​​alipay​​​ -> ​​lifestyle​​​ ​​直达地址​​

Taro多端开发及编译踩坑_前端_03

  • 注意：

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【需要每次编译，都会被覆盖】

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方法

1.14 ​​image​​ 长按识别

​​weapp​​​ - ​​show-menu-by-longpress="true"​​​​alipay​​ - 不支持

1.15 ​​enableAlertBeforeUnload​​​&​​disableAlertBeforeUnload​​ 返回拦截

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

  • 本地开发IDE需要操作如下，否则报错
  • 根目录新建文件​​project.alipay.json​​ 

{
  "enableAppxNg": true,
  "enableNodeModuleBabelTransform": true
}

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

​​weapp​​ - string

Taro多端开发及编译踩坑_taro_05

​​alipay​​ - number



1.18 ​​uploadFile​​ 上传文件

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

1.19 分享

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 跳转问题

​​weapp​​​ 官方公众号文章 - 可直接webview打开
​​​alipay​​ 生活号文章 - navigateToAlipayPage

if (jumpUrl.startsWith('https://render.alipay.com')) {
    my.ap.navigateToAlipayPage({
       path: encodeURIComponent(jumpUrl)
    });
}

2. ​​weapp -> h5​​编译

2.1 本地运行设置

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

2.2 http方法

credentials 设置 H5 端是否携带 Cookie

Taro多端开发及编译踩坑_ci_07

2.3 ​​tabbar​​背景色设置

默认背景色为 ​​#f7f7fa​​

Taro多端开发及编译踩坑_ci_08

通过css设置

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

2.4 不支持的API及功能

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

  1. ​​canIUse​​ - 检测小程序版本更新
  2. ​​getSetting​​ - 获取用户授权
  3. ​​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;
}

  1. ​​enableAlertBeforeUnload​​​ ​​disableAlertBeforeUnload​​ - 返回提示拦截

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

  1. ​​getOpenerEventChannel​​ - 页面间通信

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

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

  1. ​​button open-type="share"​​ 分享不支持
  2. 二维码长按不支持
  3. ​​Map​​标签

解决办法： 百度地图SDK

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​​

解决办法：​​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​​ 注意内容串行样式兼容

Taro多端开发及编译踩坑_前端_09

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

2.10 开放功能webview 兼容

目的： 承载网页的容器

原因： webview->iframe

Taro多端开发及编译踩坑_h5_10

解决办法：

//  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%;
}

Taro多端开发及编译踩坑_h5_11

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 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 不支持文件引入


相关推荐

absl编译踩坑

GG_lyf 57 0 0

onnxruntime 编译 踩坑记录

程序小小黑 37 0 0

springer 在线投稿编译踩坑

萨摩斯加士奇 10 0 0

一次基于Taro的曝光逻辑踩坑记录

林肯公园_97cc 37 0 0

ThingsBoard 3.3.2源码编译踩坑记

40dba2f2a596 57 0 0

SC-A-LOAM编译踩坑记录

心存浪漫 30 0 0

手动编译 Flink 1.9 踩坑实录

waaagh 55 0 0

django使用celery及踩坑

树下的老石头 90 0 0

Taro中的坑

whiteMu 58 0 0

taro（踩坑） npm run dev:weapp 微信小程序开发者工具预览报错

贵州谢高低 36 0 0

精彩评论（0）

0 0 举报