小程序踩坑总结

时隔这么久，又开始写总结了，主要是小程序真的好坑，o(╥﹏╥)o，以下是我踩到的坑总结，希望其他的开发者不要像我这么痛苦。有收获的话，记得给我点赞点赞点赞呀

一、小程序页面生成二维码

官方文档
需要的传参是 page，scene，重点来谈谈scene
通过该api生成的二维码，扫该生成的二维码进入小程序之后，会进入到对应的page界面【即传的参数page】，而传的参数scene对应的数据的获得：代码如下

      //传参中的 page界面
      const pages = getCurrentPages();
      const {options} = pages.pop();
      console.log(options.scene); //传参中的scene数据在此可以打印出来

需要注意的是：二维码图片所带的scene数据与wx.getLaunchOptionsSync()中的scene没有任何关系

二、scroll-view在IOS13版本滚动失效

问题描述

这个问题真的让我很懵逼，只有ios 13的手机才能出现，具体表现形式如下：B界面使用了scroll-view组件，当从A界面进入B界面，滚动正常，当从B界面回到A界面，或者去其它界面，之后再回到B界面，滚动失效，B界面它不会滚了。

解决方法

经过我各种研究，发现解决方法非常简单，只要一行，在scroll-view设置一个wx:if，如下图所示：

image.png

总结

小程序问题的万能解决法，当你确认自己代码没有问题的情况下，不知道问题为什么会发生，尤其是类似上述问题，一定要记住！记住！记住！进入该组件/界面的时候，尽量可以做到该组件可以重新渲染，一个wx:if可以解决很多莫名其妙的问题。上述问题就是这个道理。

三、小程序中使用canvas

目前只遇到一个问题，就是在某些手机的机型中，文字的展示会出现异常，场景：在ios13的版本下，canvas生成的图片对应的文字大小变得极小
解决方法：把渲染字体改为normal，其它字体都可能会出现错误展示情况：

ctx.font = `500 ${20 * RATE}px normal`; 

四、关于组件web-view

业务场景：给出一个路由，仅用web-view来展示h5界面，该路由的参数为path

注意点： 参数path必须被编码过，如下：

     wx.navigateTo({
       url:/xxx/xxx?path=${encodeURIComponent(src)}`,
     });

.wxml：代码如下：

.js：代码如下：

Page({
  data: {
    path: ''
  },
  onLoad(options) {
    //页面创建时执行
    console.log(options);
    this.setData({
      path: decodeURIComponent(options.path)//在此处解码
    });
  },

该业务场景下的界面分享

遇到的问题：分享该界面，再通过分享的入口进入小程序的该界面，web链接所代表的h5界面未展示
解决方法：

  onShareAppMessage(param) {
    // 页面被用户分享时执行
    return {
      imageUrl: 'xxxx',
      title: 'xxx小程序',
      path: `/xxx/xxx?path=${encodeURIComponent(param.webViewUrl)}`
    }
  },

五、小程序dialog样式踩坑

问题描述：

当设置 弹窗宽度 时，在其它机型弹窗都可以完美居中，只有iPhone5,iphoneSE的小屏手机，弹窗会出现偏移，如图所示：

弹窗偏移.png

代码如下：

//.wxml

 ...

//.wxss
.dialog-ext-class .weui-dialog {
  width: 560rpx;
}

产生原因：

一把辛酸泪，经过寻找：发现在小程序中，iPhone5,iphoneSE的小屏手机自带的.weui-dialog默认样式类不同，
iPhone5,iphoneSE的样式类：

小屏.png

其它正常居中的手机样式类：

正常.png

解决方法

经过各种调试，既要兼容正常手机的居中，又要兼容小屏手机的居中，最简单的方法就是计算居中的位置左右偏移量。so easy，设计使用的屏幕宽度750，弹窗宽度 560，居中则可得左右偏移量为：(750 - 560)/2 = 95
自信一点，代码如下：

.dialog-ext-class .weui-dialog {
  width: 560rpx;
  right: 95rpx;
  left: 95rpx;
}

注意：right 和left都要写,不然只有小屏手机可以居中，而正常手机会产生偏移

附：个人总结的小程序目录结构一份

├── assets
│   ├── images（公共图片）
│   |   └── personal
│   |       ├── avatar_none.png
│   |       └── ...
│   └── styles （公用样式目录）
│       ├── color.css （颜色样式）
│       └── ...
|
├── behavior (自定义behavior)
│   ├── article（文件夹按照模块分）
│   |   ├── article.js
│   |   └── ...
│   └── ...
|
├── components (公共组件目录)
│   ├── shareInfo (分享组件)
│   |   ├── shareInfo.js
│   |   ├── shareInfo.json
│   |   ├── shareInfo.wxml
│   |   ├── shareInfo.wxss
│   |   └── template.wxml（共享同文件夹下的wxss）
│   └── ...
|
├── pages（主包目录）
│   ├── index
│   |   ├── index.js
│   |   ├── index.json
│   |   ├── index.wxml
│   |   ├── index.wxss
│   |   ├── template.wxml （index的模板文件，共享同文件夹下的wxss）
|   |   └── components（index组件目录，结构同公共组件目录）
│   └── ...
|
├── subpackages（分包目录）
│   │── packageA （结构同主包目录）
│   │── evaluationDetail （评测）
│   │── description （说明：维护页，隐私协议等）
|   └── ...
|
├── templates （公用模板目录）
│   │── templateA
|   |   ├── templateA.wxml
│   |   └── templateA.wxss
|   └── ...   
|
├── utils（公共模块，工具类）
│   ├── app.js（接口请求方法）
│   ├── constant.js（常量声明）
│   ├── http.js（接口请求配置）
│   ├── local.js（微信本地数据保存）
│   ├── navigation.js（微信跳转方法）
│   ├── util.js（公用方法）
│   └── valid.js（正则配置）
|
├── .gitignore
├── app.js
├── app.json
├── app.wxss （assets/style中的css需要引入到该文件）
├── project.config.json