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

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

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

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

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

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

首先说一下我的应用场景, 在小程序中会有多个页面存在视频组件的情况, 为了防止视频播放时多个视频组件同时播放的情况,现记录一下方案:

一 可以在需要视频播放的地方弄一个视频播放的按钮, 当视频播放的时候再初始化视频组件, 保证整个应用内只有一个视频组件(视频组件的位置需要计算), 整个方法只是理论下的情况;

二 在appjs中 设置两个对象, currentVideoId(播放视频组件的id)和videoContext(当前播放视频的对象, 通过wxcreateVideoContext方法获得), 在页面的js中控制, 保证video组件绑定play方法:

 <video src="url" bindplay="play"></video>

在play方法中实现即可:

var id = ecurrentTargetid;

      if (id != null) {

        if (appcurrentVideoId != id) {

          if (appvideoContext != null) {

            appvideoContextstop();

            consolewarn("暂停");

          }

          appcurrentVideoId = id;

          appvideoContext = wxcreateVideoContext(id);

        }

      }

因为currentVideoId 和videoContext是唯一的对象, 方法中播放监听事件会暂停之前的播放, 然后再赋值, 等下次video播放监听进来的时候, 会进行判断

三 包含富文本组件的视频组件同时播放的情况

依据上面的例子, 当自定义富文本组件中包含多个video组件时也用上面的方法会产生错误, 虽然log会显示将执行视频暂停或者停止播放, 但是没有效果, 查看 视频api , 提示

根据api显示, id为video组件的id, 还有一个"Object this", 但是依据上面的api使用, 直接用id确实可以获取video对象, 但是api解释中提示, "在自定义组件下，当前组件实例的this，以 *** 作组件内 video组件", 在自定义组件中, 要加this, 所以总结: 在上面api使用中, 如果video在pages页面中, wxcreateVideoContext参数只写id没有问题, 但是当video在自定义组件中, 要必须加this, 才能正确返回VideoContext对象;

我们单位实行的大小周工作制，即大周休息2天，小周消息一天。因这点小特殊，总有同事常记错周六这天是否上班。也因这点，在程序上需要特别体现出大小周的提示，于是需要设计一个日历组件，并在日历上标注出排班名称和大小周。最终实现图如下:

微信小程序demo提供了一个简单的日历组件，vant也提供了一个日历组件，在github上也有一些日历组件，我试用了一番，都多少存在一些不符合之处。重点说一下vant，它有几个问题：一是加载数据太大，一运行就加载至少一年以上的数据；二是样式不好控制，大小相修改一下就会变形；三是在日期上下方加文字不方便。

因为没有找到太好的组件可以引用，就自己想设计一个能方便控制的，遂有下面的设计，

1、采用grid组件显示日期，分三行，中间一行为日期具体天的数字，上面一行显示大小周提示、下面一行显示排班名称

2、采用scroll-view动态包含grid数目

3、一行显示几天，可以动态设置

1、日历头部

2、日历内容

3、日历结构体

4、具体每个月的日历算法

获取某个月的第一天和最后一天，再获取每天的星期数，循环放到grid结构体中

优点：一是加载数据量少，可控制；二是显示内容丰富，可以控制；三是也是显示可以使用slot，更加丰富

缺点：一不是专业日历组件，样式简单了些；二是加载数据量有限，grid自身也是一个组件，加载多了额外的开销肯定大起来。

将 appjson 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，packagejson 在其外部，npm 构建无法正常工作。需要手动在 projectconfigjson 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

打开微信开发者工具，点击  工具 -> 构建 npm ，并勾选  使用 npm 模块  选项，构建完成后，

到 全局配置 appjson 中注册引入组件，详见 快速上手 。

支持default、primary、info、warning、danger五种类型，默认为default。  格式：

通过plain属性将按钮设置为朴素按钮

设置hairline属性可以开启 05px 边框，基于伪类实现。

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

通过loading属性来设置加载按钮   loading-type="spinner"   loading-text="加载中"

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

label     输入框左侧文本

type    可设置为任意原生类型, 如 number   idcard    textarea    digit

readonly  是否只读

custom-style    自定义样式

autosize    是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px

show :是否显示 

onClose 点击其他位置，关闭d出层

position            可以设置为top、bottom、left、right。

Picker 选择器 需要配合d出层使用

<van-picker columns="{{ columns }}" bind:change="onChange" />

columns 对象数组，配置每一列显示的数据

onChange（e）    有默认参数 e 

value-key    选项对象中，文字对应的 key 通常用于对象数组

show-toolbar    是否显示顶部栏

defaultIndex     初始选中项的索引，默认为 0  不是双向绑定 需要自己改变defaultIndex  的值  需要渲染两次

1、打开微信小程序布局优化软件，选择新建项目或打开已有项目。

2、进入编辑页面，可以直接拖拽组件到画布中，也可以选择、复制和粘贴组件。

3、对选中组件进行调整和排布。注意要遵循良好的视觉习惯，如形状和颜色的一致性、间距的合理化等。

以上就是关于18.微信小程序使用npm包步骤全部的内容，包括:18.微信小程序使用npm包步骤、微信小程序多个视频组件同时播放、微信小程序之自定义日历组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！