uniapp打包成小程序踩坑(持续更新)

1、在页面上修改组件内部样式的方法，在此页面与data平级的地方加options配置，样式在此页面正常用/deep/即可。

options: {
            styleIsolation: 'shared', // 解除样式隔离
  },
data(){
  return{}
}

2、使用lime-echarts是，tooltip里的formatter属性，只能用字符串，不能使用html字符串模块，根本不生效，目前还不支持，没有好的解决办法；
3、使用uni-popup弹窗时，不能覆盖tabbar，可以使用如下方式

<uni-popup ref="dialogTip" @maskClick="closeTip()"  @change='popupChange'>
        <view class="tipBox">
            <view class="tipHeader">提示</view>
            <view class="tipContent">{{tipText}}</view>
            <button type="primary" size="mini" class="tipBtn" @click="closeTip()">确认</button>
        </view>
    </uni-popup>
                    closeTip() {
                this.$refs.dialogTip.close();
                uni.setNavigationBarColor({
                    frontColor: "#000000",
                    backgroundColor: '#f8f8f8',
                })
            },
            //添加此方法是UI要求弹窗覆盖tabbar及标题栏,待验证
            popupChange(e) {
                if (e.show) {
                    uni.hideTabBar();
                    uni.setNavigationBarColor({
                        //这里的颜色设置值能是十六进制这种 #999996，不支持其它类型
                        frontColor: "#000000", //字体颜色只能是黑或者白，#000000或者#FFFFFF,
                        backgroundColor: '##999996', //只改变这个背景颜色，不改变‘frontColor’字体颜色，背景色不会生效
                    })
                } else {
                    setTimeout(() => {
                        uni.showTabBar();
                        uni.setNavigationBarColor({
                            frontColor: "#000000",
                            backgroundColor: '#f8f8f8',
                        })
                    }, 300)
                }
            },

4、饼图位置确定不能由[grid]来设置，需要使用center和radius要设置；（另外，如果想默认包含标签，直接设置containLabel: true，不用设置上下左右的边距）

5、lime-echarts中折线图的真机上的tooltip文字有阴影，可以在配置中添加以下属性解决,textShadowBlur必须写，并且不能为0，否则textShadowColor不生效

tooltip: {
  trigger: "axis",
  textStyle: {
    align: "left",
    textShadowBlur: 10, // 重点
    textShadowColor: "transparent", // 重点
  },
},

6、微信小程序获取启动参数：wx.getLaunchOptionsSync（）；
7、微信小程序获取当前版本及传参给H5，H5的url处理

 var env = 'DEV';
 // #ifdef MP-WEIXIN
 const { miniProgram: { envVersion } } = wx.getAccountInfoSync();
 
 switch (envVersion) {
     case "develop": // 开发版
         env = 'DEV';
         break;
     case "trial": // 体验版
         env = 'PREPROD';
         break;
     default:    // 正式版
         env = 'DEV';
         break;
 };
 console.log(envVersion,env);
 // #endif
 
 // #ifdef H5
 const searchPar = new URLSearchParams(window.location.search)
 const paramsObj = {}
 for (const [key, value] of searchPar.entries()) {
   paramsObj[key] = value
 }
 switch (paramsObj.env) {
     case "develop": // 开发版
         env = 'DEV';
         break;
     case "trial": // 体验版
         env = 'PREPROD';
         break;
     default:    // 正式版
         env = 'DEV';
         break;
 };
 // #endif

8、小程序中饼图中有的label不显示，两种方法可以解决
1）可以设置minMargin: 0

1693365321.png

2）参考其他人如果排布情况可以随意的话，设置position改为outer，加上alignTo:'labelLine'，