微信小程序避雷篇

Lidy_smile

已于 2022-07-25 16:59:58 修改

阅读量2.8k

点赞数 2

文章标签：微信小程序小程序

于 2022-07-25 16:58:35 首次发布

本文链接：https://blog.csdn.net/qq_41369019/article/details/125978724

版权

1. 关于微信小程序js项目更新为ts项目

（1）直接新增项目，创建一个ts版本的基础框架用于ts开发（新项目开发时用到）
（2）在miniprogram目录下创建miniprogram_npm文件夹

miniprogram_npm位置

（3）根目录 package.json 修改"scripts" 如下

"scripts": { 
         "compile": "./node_modules/typescript/bin/tsc",  
         "tsc":  "node./node_modules/typescript/lib/tsc.js" 
}

（4）根目录project.config.json修改"scripts"如下

"scripts": {  "beforeCompile": "npm run tsc"    }

（5）微信开发者工具右上角本地设置，选中"使用npm模块"、"启用自定义处理命令”（mac m1不好使，命令行 npm run tsc 执行）
- （6）安装typescript，执行npm install typescript --save-dev
- （7）再执行npm install
- （8）在微信开发者工具菜单“工具”点击“构建npm”
- （9）mac（命令npm run tsc）之后编译； windows 直接点击编译就ok啦

2、wx:for循环嵌套循环，怎样防止内部循环的item与index被覆盖

      <view wx:for="{{ externalList }}" wx:key="{{ index }}">

            <view wx:for="{{ item.list }}" wx:for-item="insideItem"  wx:for-index="i" wx:key="{{ i }}">

              <text> {{ insideItem.name }}</text>

            </view>

        </view>

3、小程序分包的问题

分包之后文件会自动创建

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

3、图片加载闪屏问题

主要原因：运行内存不够，微信对小程序图片渲染过大进行拦截
优化办法：可以大图片按比例进行压缩，可以根据下面的文档选择适合自己的方法
https://help.aliyun.com/document_detail/44688.html
页面中使用的话，可以写一个管道，例如

  /**
   * oss 图片缩放
   * @param value url图片
   * @param resizeNum 缩放比例单位px
   * @param type 类型 1-按宽高缩放（m_lfit）  2-按长边缩放(resize,l_100) 3-固定宽高(resize,h_100,w_100) 4-按比例缩放(p_30)
   */
  imageZoom: function (value, hResizeNum, wResizeNum, type) {
    if (value.indexOf('?x-oss-process=image') != -1) {
      return value;
    }
    type = type || 1;
    hNum = hResizeNum || 100; // 高
    wNum = wResizeNum || 100; // 宽
    // 等比缩放
    switch (type) {
      case 1:
        value = value + '?x-oss-process=image/resize,h_' + hNum + ',m_lfit';
        break;
      case 2:
        value = value + '?x-oss-process=image/resize,' + 'l_' + hNum;
        break;
      case 3:
        value = value + '?x-oss-process=image/resize,' + 'm_fixed,h_' + hNum + ',w_' + wNum;
        break;
      case 4:
        value = value + '?x-oss-process=image/resize,' + 'p_' + hNum;
        break;
      default:
        value = value + '?x-oss-process=image/resize,h_' + hNum + ',m_lfit';
    }
    return value;
  },

5、苹果底部黑边兼容代码：页面iphone底部安全距离问题**

方法一、可以根据机型判断是否是iphone，在页面中添加对应的安全距离的class

  <view class="{{ isIos ? 'pad-bot-ios' : ''}}"></view>

 // 获取系统信息
    wx.getSystemInfo({
      success(res) {
        console.log(res, '系统信息')
        isIos: res.system.indexOf('iOS') > -1 ? true : false;
      },
    });

方法二、 ios新增特性： CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

        safe-area-inset-left：安全区域距离左边边界距离；safe-area-inset-right：安全区域距离右边边界距离；safe-area-inset-top：安全区域距离顶部边界距离；safe-area-inset-bottom：安全区域距离底部边界距离(默认的是34px)


.ios-fixed {
  padding-bottom: calc(constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
  padding-bottom: calc(env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
}

原文出处链接： https://blog.csdn.net/SuperJane_123/article/details/124493306

6、建议）小程序图片的大小81*81。40kb

7、提示过长的问题wx. showToast

  //  wxml 
   <van-toast id="van-toast" />
 //  ts引入
  import Toast from  '../../../miniprogram_npm/@vant/weapp/toast/toast';
  // 使用方法：  
  Toast(messge);

8、如何避免微信小程序中 app.js中 onshow事件的多次触发的问题

在开发过程中，会遇到app.json 中 onShow事件会因调用其它api而触发，例如:wx.chooseImage，wx. previewImage等
解决方法：要根据不同场景调用不用业务逻辑。

  onShow: function (option) {// option  scene判断进入的场景， 根据不同场景业务逻辑处理 }

9、dialog. 滚动条问题

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
}

// wxss

10、1rpx的边线太粗的问题

.border::after {
 content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 1rpx;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  border-bottom: 1px solid #F3F3F3;
}

11、swiper 滚动失效并且不断抖动问题

// wxml
   <swiper class="swiper" autoplay :interval="3000" :duration="1000" circular @animationfinish="swiperChange2" :current="current2">
        <swiper-item class="swiper_item" v-for="(item,index) in caseList" :key="index">
            <view class="swiper-item">{{item.oneCaseDescription}}</view>
        </swiper-item>
    </swiper>

// ts
   swiperChange2(e){
        this.current2 = e.detail.current
     }

原文章链接： https://blog.csdn.net/weixin_42317515/article/details/104887325

12、小程序scroll-view横向滚动失效，内容被压缩

用scroll-view做横向滚动时，给scroll-view设置了display：flex，子元素宽度固定，并且总长度超出scroll-view的宽度，但是发现滚动不了，并且子元素宽度被压缩了。

解决方法：
（1）给scroll-view设置white-space: nowrap;
（2）给子元素设置display: inline-block;

// wxml
<scroll-view class="scroll" scroll-x="true">
    <navigator class="item1" v-for="(item, index) in allSub" :key="index"></navigator>
</scroll-view>

// wxss
.scroll {
    white-space: nowrap;
}

.item1 {
    margin-right: 30upx;
    width:350upx;
    height:180upx;
    display: inline-block;
    background-color: #FAFAFA;
}