前言

2018年开始接触微信小程序，期间做过小程序、小程序插件、第三方平台代开发的小程序模板等 这期间两年多时间大部分都是用的官方原生开发

2020年初，老大让我尝试用多端框架进行开发。调研了一圈，结合本身前端业务开发用vue居多，故uniapp比较适合，学习成本较低。

uniapp的创建构建就不多赘述了，官方文档已经完善，直接开门见山。

本身开发微信小程序为主，文中小程序默认指的是微信小程序相关

填旧坑开新坑

软件工程没有银弹，小程序自身在不同设备环境下的限制以及uniapp编译成小程序后的一些兼容问题

描述的坑和解决方案是结合自身工作学习或社区大佬分享，如有更好的解决方案欢迎交流学习

一、uniapp编译重复生成sitemap

uniapp官方开发工具HBuilderX编译成小程序的时候sitemap会重复生成，时间一长会越堆越多。

解决方法：

找到manifest.json 在mp-weixin添加下面这个字段

"sitemapLocation" : "sitemap.json"

二、滚动页面事件穿透

如下图 实现一个订阅消息的引导tips，这里中间半透明是一层命名为mask的遮罩层用position:fixed固定，底层为主页面。正常我们希望遮罩层阻挡与主页面的事件，避免误触， 未作处理前页面的滚动还是会穿透，哪怕把遮罩层的z-index比主页面高。

解决方案

遮罩层监听事件并返回

<view class="inner-mask" :catchtouchmove="CatchTouch">
   ...
</view>

// 禁止底层滚动穿透
CatchTouch: function () {
    return;
}

END

念念不忘必有回响，有效的努力，会让你在未来闪闪发光。

本文正在参与「掘金小册免费学啦！」活动，点击查看活动详情。