记录小程序开发过程中的一些问题一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

最新小程序开发过程中的遇到的一些问题

1、`IOS` `input` `value`动态`set`成功后无法回显

解决方法： 大概是因为软键盘把input的中value顶上去了，收起软键盘就能成功回显

2、`IponeX` 底部黑条的兼容方案

解决方法： 通过padding-bottom: env(safe-area-inset-bottom);,padding-bottom: constant(safe-area-inset-bottom);，在底部撑开安全距离

3、组件与页面样式分离

解决方法： 小程序默认组件的样式跟全局的样式是分离的，为了不让组件的样式污染了全局，也为了不让全局的样式影响到组件，若组件中想引用全局样式，有以下3种配置：

从基础库2.10.1开始，在js文件中配置addGlobalClass: true，表示组件中可以使用全局样式
```
Component({
  options: {
    addGlobalClass: true
  },
  // ………………
})
```
从基础库2.6.5开始, js文件中增加了styleIsolation选项，该项支持3个取值：
- isolated：启用样式隔离
- apply-shared：全局样式对组件生效
- shared：全局样式对组件生效，组件样式对全局同样生效
```
Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  // ………………
})
```
从基础库2.10.1开始，styleIsolation也可在json文件中设置了，取值跟上面的一样

4、小程序组件按需引入

解决方法： 在组件.json文件中，配置"lazyCodeLoading": "requiredComponents",该配置要求小程序基础库在2.11.2以上，添加该项配置后，为自定义组件添加占位组件，页面渲染时，该组件被渲染为占位组件，渲染结束后才开始注入，注入完成后，占位组件替换为对应的组件。

5、`image`展示图片错误时，显示默认图

解决方法：

src绑定的变量若为空时，展示默认图，通过或运算符实现
src绑定的变量不为空，但是地址访问失败，可通过绑定error方法，重新动态赋值默认图片地址两种方法的代码如下：

<image lazy-load mode="widthFix" src="{{item.sbrand_logo || imgUrl + '/common/default.png'}}" data-name="{{'scrollList['+index+'].sbrand_logo'}}" binderror="handleErrorImg"></image>

  // 处理错误图片
  handleErrorImg(e) {
    let { name } = e.currentTarget.dataset;
    this.setData({
      [name]: this.data.imgUrl + '/common/default.png'
    })
  },

6、小程序加载太久问题

解决方法： 使用分包，需要注意：

主包不能引用分包文件，分包可以使用主包文件
分包主包大小不能超过2M，若使用分包代码包大小最大20M
分包加载的样式，android跟IOS不一样，样式不支持自定义

以下分包设置：主包只放了第一层页面（即导航栏tab页面）、登录注册页，以及一些公用组件，公用方法等；其余的分包按功能模块来划分，分包使用subpackages来定义，

{
  "pages": [
    "pages/index/index",
    "pages/mine/index",
    "pages/cart/index",
    "pages/product/index",
    "pages/login/index",
    "pages/regist/index",
    "pages/account/accSetting",
    "pages/account/repair/repairpwd",
  ],
  "subpackages": [
    {
      // 订单模块
      "root": "order",
      "pages": [
        "list/list",
        "detail/detail",
        "detail/cacel/index",
        "dealList/list",
        "dealDetail/detail",
        "dealDetail/cacel/index",
        "pay/pay",
        "createOrder/createOrder"
      ]
    },
    { 
      // 产品模块
      "root": "product",
      "pages": [
        "search/search",
        "list/list",
        "detail/detail",
        "result/result"]
      },
    {
      // 万客模块
      "root": "wanKe",
      "pages": [
        "index",
        "error",
        "draw",
        "invest",
        "follow"
      ]
    }
  ],
}
``

记录小程序开发过程中的一些问题

最新小程序开发过程中的遇到的一些问题

1、IOS input value动态set成功后无法回显

2、IponeX 底部黑条的兼容方案