那些年，我们项目团队大大小小做了大概10版+ 小程序项目， 从最初的大玩+、大玩2期、刺激找人、隐形守护配音玩法到云顶战绩等， 踩了坑不少，接下来总结一波，避免新手入坑。
本次总结主要以下三个方面：
-
WXML （WeiXin Markup Language）
-
WXSS (WeiXin Style Sheets)
-
机型适配
一：WXML（WeiXin Markup Language） WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 WXML组件有：基础内容组件、视图组件、表单组件、原生组件等 一个萝卜一个坑， 列举如下：
1：基础组件 text组件类似H5开发中的span标签，但是请看下图
理想很丰富现实很骨感... 实际效果如下：
敲黑板，看坑点：视图组件text内部不能有换行符 需要去掉标签内部的换行符，否则会换行！
2: 滑块视图容器组件swiper
大家看到这种的分页效果一般会考虑用小程序自带的swiper， 但是在andriod6.0以下版本中会存在意想不到惊喜，小圆点不见了！如下图：
方法如下，小圆点出需要单独自定义结构，样式自定义
接下来我们只需要移除默认黑色原点即可，设置 swiper indicator-dots=”{false}” .... 即可
3：表单组件button Button标签会默认一些样式，都可以重置， 但是默认边框需要** button::after{none}** 重置
4：常见原生组件canvas、 video 层级高的z-index无法控制（表现在IOS真机上）
解决方案：
1：利用cover-view cover-image
弊端：1 ：所有需要在video层级以上的都必须要放到video标签里， 当然video里的标签也有限制，必须用cover-view、cover-image~ ，此时就无法解决canvas、video以外的标签问题
2 ：临时隐藏原生组件标签
出现弹窗时， 隐藏canvas标签（canvas直接转换成图片image），这样弹窗就不会被canvas层级遮挡
二： WXSS (WeiXin Style Sheets)
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
WXSS和H5样式基本一致，除了单位rpx以外，我们UI开发时直接时直接按照设计稿的750大小1：1还原即可，但是还有些与H5不一致的点要注意
1：背景图引用
背景图引用必须要绝对路径或者base64 否则会报错，这个报错比较明显，编辑器直接报错
2: mask-image的使用
当我们看到以下的异形图时，在普通H5开发当中，我们一般会想到用mask-image来处理，如下图：
但在小程序当中得把mask-image引用的图转换成base64，否则ios真机上无效~
3： 特殊字体引用：
小程序引用字体和H5页不同， 必须要把字体转换成base64来调用，否则andriod不会生效字体
模拟器和ios完美：
字体具体转换base64步骤： 1：收集用到的相关字体的文字，利用font-spider字蛛压缩 （字蛛：font-spider.org/）
2：将压缩后得fzyansjw.TTF字体转换成base64，推荐字体转换站点（transfonter.org/），转换步骤如下图
3：下载所需要文件宝拷贝base64字体引用放入样式即可
三：iphoneX适配
分析原因： 顶部自定义标题栏，iphoneX下高度要多24px
IphoneX
其他：
解决方案： 利用iphoneX的适配方案 padding-top: calc(constant(safe-area-inset-top)); padding-top: calc(env(safe-area-inset-top));
以上模拟器下会不生效，但是在iphoneX真机下看没有问题的，以真机为准！
总结：
-
涉及到引用问题，如果真机上不生效，可以尝试转换base64验证（mask-image和字体）
-
最终效果以真机为准（Ios 和 andriod），并且注意andriod低版本
