微信小程序坑位总结

最近公司项目使用微信小程序做项目，踩坑3个月，给大家总结一下最近遇到的问题：
1、首先说一下npm包的使用
点击这里的 ’构建npm即可‘，但是构建之前记得要在工程中先执行npm init命令，否则会报’找不到Rootminiprogram_npm‘之类的错误，这个是比较坑的，大多数新手第一次使用第三方的npm包都会犯这个错误，省的大家百度了。

2、小程序的自定义导航栏

先来说明一下使用方法：
1、 使用npm i weui-miniprogram 命令下载微信官方的ui组件库
2、按照官方文档，在app.wxss中import组件库的样式
@import ‘weui-miniprogram/weui-wxss/dist/style/weui.wxss’;

上述准备就绪后，就可以开始页面级的配置了，在你编写页面的xxx.json中做如下修改即可

{
  "navigationStyle": "custom",
  "usingComponents": {
    "mp-navigation-bar": "/miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  }
}

然后再页面中就可以

<mp-navigation-bar
  background="{{headerColor}}" // 设置导航栏的背景颜色
  back="{{true}}">  // back 是否显示返回按钮，默认点击按钮会执行navigateBack，如果为false，则名为left的slot有效
    <text slot="center"  class="page-title"></text>
    // slot是插槽，分别可以设置为left center right 其中left生效必须back为false,center生效必须title为空,right无限制
    <text
      slot="left"
      class="iconfont icon40haojiantouzuo back-index"
      bind:tap="backIndex"
    ></text>
   // backIndex为自定义的返回icon并绑定了点击事件
</mp-navigation-bar>

那么好，做完以上设置是不是觉得不是特别繁琐对吧，接下来的个人就感觉有点恶心了，话不多说

我们在写小程序的时候会有标准导航栏

还有非标准的

标准导航没得说，就是按照官网去做配置，但是自定义的导航栏就比较繁琐了

主要分为以下：

// 这句话等于约等于获取全局对象app
const app = getApp();

wx.getSystemInfo({
    success: (res) => {
     	// 获取状态栏高度(4G信号等)
        this.globalData.statusBarHeight = res.statusBarHeight;
    }
});
// 获取胶囊按钮的width height top等信息
const menu = wx.getMenuButtonBoundingClientRect();
// 状态栏(胶囊区 + 上下间隔)
const navigationBarHeight = (menu.top - app.globalData.statusBarHeight) * 2 + menu.height;

// 需要注意navigationBarHeight和statusBarHeight单位都是px

// 最后
// navigationBarHeight + app.globalData.statusBarHeight 就是状态栏+胶囊占位的高度，那么我们的内容就可以在这里去写了，是不是有点繁琐；
// 可能官方尽可能想让我们去自由控制，但是既然官方提供了这个自定义，为什么不直接提供一些变量呢？还需要让开发者一个个api去查询，有点缺...

个人感觉坑点之一，第一开发小程序，就这个自定义导航栏就要查询2个api，2个配置项，有点烦。

3、向下滚动页面的时候有吸顶的导航条吸顶渐变
首先来说一下我的问题，最开始开发的时候认为就是简单的吸顶滑动渐变（fixed吸顶），开发完成第一版的时候，发现部分手机使用fixed滚动手机的时候会有卡顿问题，所以这个方案就不成立；

然后使用了自定义导航栏中的slot = “right”， 将需要吸顶的元素按照ui写好，最关键的来了，这时候我建议大家把整个内容区域用scroll-view包裹起来，当页面滚动的时候

<scroll-view
  scroll-y = "{{true}}"
  bindscroll="scroll"
>
内容
</scroll-view>
// 设置y方向允许滚动，然后绑定滚动事件
scroll(e) {
  const { scrollTop } = e.detail;
  this.setBarColor(scrollTop);
},
 // 设置 bar 颜色
setBarColor(scrollTop) {
   const start = 100;
   const len = 73;
   if (scrollTop <= start) {
     // headerColor是在wxml中mp-navigation-bar组件设置的background属性的值
     this.setData({
       headerColor: 'transparent'
     });
   }
   else if (scrollTop > start) {
     const p = (scrollTop - start) / len;
     this.setData({
       headerColor: `rgba(255, 255, 255, ${p})`
     });
   }
   // console.log(this.data.showSmallBar)
 }

以上设置就完成了滑动页面吸顶渐变的效果，不过需要注意的是scroll-view,它需要设置一个固定高度，这个高度可以直接写死，如果写死不能满足需求的话，还可以使用calc属性去计算，也可以使用js去动态计算，总之scroll-view需要有一个固定的高度，否则是不生效的；

scroll-view还有一个坑，如果页面滚动的非常快，监听的滚动条距离顶部高度也就是
e.detail.scrollTop不精确，这个是官方的缺陷，暂时还没有修复，不过一般业务足够使用了

4、扫码获取参数
1、业务场景是这样的，首先后台生成一个二维码，然后用户去扫码跳转到前端某个页面，在这个二维码中携带前端需要的参数，我们在小程序中直接在onload的options中是获取不到二维码中的参数（这是一个坑点，曾经捯饬了1个小时之久）

正确的做法：前端在app.js中的onLaunch或者onshow方法中直接可以在opitons参数中获取到scene，然后前端拿着这个scene去请求后台接口，后台根据scene去请求微信后台，拿到参数再返回给前端，这么做是为了安全起见

// 我贴一下关键代码
 // decodeURIComponent官方提供解密scene的api
const scene = decodeURIComponent(options.scene);

// getParamsByScene这个方法就是一个简单的promise不再贴出，最后通过这个方法拿到接口返回的参数
let res = await getParamsByScene(appid, scene);

最后我在补充一下调试方法，在微信开发者工具中如何使用二维码调试代码

选择"通过二维码编译"即可调试

5、小程序页面返回刷新

这个吐槽点，官方并没有提供强制刷新的功能，但是往往很多业务需要返回的时候重新页面，但是如果父页面的刷新依赖祖页面传递过来的参数就麻烦了，可能需要祖页面参数->父页面参数->当前页面返回带上父页面参数，除了参数的传递还要处理父页面的show函数、当前页面是否需要修改父页面数据等等问题。
如果页面是webview的话，返回刷新也比较麻烦，目前本人实现的刷新是通过在webview的src属性中动态添加time时间戳解决，但终究不是最好的解决方案。

返回刷新这个问题还没有好的解决方式，有待官方提供相关api简化开发成本。

6、webview
目前新版本的小程序是支持显示h5页面，webview立功了，开发者只需要在src属性中添加url就可以跳转，但是也为开发调试带来了困扰，比如在调试器的wxml中只能看到一个webview标签

如果想要调试代码，还需要在浏览器另外打开页面去调试，很麻烦，跳来跳去的看，并且样式问题也比较多，在浏览器是正常，在小程序就不正常，然而呢，你在小程序还直接查看不了元素，这里我就不一一举例了，难啊。

建议官方后续至少支持一下渲染html，简化一下webview的样式调试

7、自定义组件
自定义组件声明周期函数命名个人感觉就比较繁琐，页面级一套，组件级一套，虽然底层实现方式不一样，但是两套命名方式就很烦，增加学习成本

父页面中 修改自定义组件的样式，我们都知道在vue中如果想修改组件的样式，根据权重是可以直接修改的，但是到了小程序就不行了

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

/* 组件 */
<view class='my-class'></view>


/* 页面 */
<custom-component my-class="test-css" />

.test-css {
  color: red;
}

官方这样做的初衷大家都明白，不想让页面级的样式影响组件内的样式，但是这类写法也给后续维护者带来困扰，变相的增加了学习成本

8、修改Half Screen Dialog样式
这个也挺坑的，我将dialog做成了组件，不同的参数会展示不同的内容以及实现不同的业务，发现如果想要修改它的样式还必须去引用它的页面中去修改

.weui-half-screen-dialog {
  max-height: 80%;
}
.weui-half-screen-dialog__bd {
  padding: unset!important;
}
.weui-half-screen-dialog__hd {
  height: unset!important;
}
.weui-half-screen-dialog__ft {
  padding: unset!important;
}

类似以上代码，在组件中写是无效的，还必须去引用它的页面中写，太恶心了，官方也没有提到过覆盖样式一说，而且调试器中能不能不要再显示"shadow-root"了，组件也是页面的一部分，变相增大调试难度很开心吗? 当然我们作为开发者肯定知道微信官方想把东西都细化，但是有时候过于细化就变成了调试难度，学习成本，无力吐槽！

本篇文章写了不短，估计各位看官也烦躁了，等我后续继续更新吧，最后说一下小程序最大的优点，文档很健全，社区也很热闹，好多老键盘侠盘踞其中，噗！

对你有帮助的话，给博主个赞，给些动力继续和大家分享！谢谢！