18.微信小程序使用npm包步骤

这里以npm引入小程序官方拓展组件库 recycle-view 为例

特别重要1在小程序根目录内，初始化 npm （官方文档上是没写出这一步，这里做个补充）

2在小程序中执行命令安装 npm 包（这里使用了recycle-view）：

3在微信开发者工具中的菜单栏：工具 --> 构建 npm （这里记得先安装 npm 包，即步骤2）:

完成构建后可以在目录树里看到了miniprogram_npm以及里面的weui-miniprogram组件文件夹

利用WeUI的flex布局。

微信小程序的WeUI样式以及微信小程序开发文档中发现并没有表单必填前的required属性中都没有required属性，所以，只能自己创造了。

改写之后，必填项就完成了。

appjson 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

appjson 配置：

在 tab 页面的 pagejson 中引入 tabbar 组件即可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 appjson 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

使用image标签，显示本地文件，在苹果机上正常，在安卓机器上有时能显示出来，有时不能，十分随性看心情