小程序组件怎么用

① 微信小程序如何使用npm，使用vant组件

新建一个微信小程序，在小程序目录下 输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在小程序目录下，生成package.json文件

通过 npm 安装
npm i @vant/weapp -S --proction
通过 yarn 安装
yarn add @vant/weapp --proction

之后的具体步骤参考 https://vant-contrib.gitee.io/vant-weapp/#/quickstart 文档

② 小程序引入weui使用步骤

第一步：
在app.json中，设置
"useExtendedLib":{
"weui": true
}
第二步：
在对应需要使用组件的页面json文件中，引入，例如引入弹框组件
{
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
}
第三步：在对应wxmll文件中，引入结构
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
<view>test content</view>
</mp-dialog>

③ 苹果手机小程序怎么用

以iPhone 7为例，使用小程序的方法如下：

1、在手机桌面找到微信图标，点击打开此应用。

④ 微信小程序自定义picker组件

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番操作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的弹窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求.

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgo弹出，所以不用考虑父view的范围问题了。 

⑤ 微信小程序多个视频组件同时播放

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

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

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

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

在play方法中实现即可:

var id = e.currentTarget.id;

      if (id != null) {

        if (app.currentVideoId != id) {

          if (app.videoContext != null) {

            app.videoContext.stop();

            console.warn("暂停");

          }

          app.currentVideoId = id;

          app.videoContext = wx.createVideoContext(id);

        }

      }

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

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

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

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

⑥ 微信小程序 怎么 选择组件 做操作

微信小程序怎么选择组件，怎么操作，我们可以通过以下方式：
一、常规代码式
一般有技术实力的公司开发小程序是依照微信官方的代码形式开发，这种方法优点就是，制作出的小程序界面、样式排列各不相同，功能也比较丰富。但是一般中小型传统企业并不具备这种开发实力。
原因：a、因为没有实力的专业开发人员;
b、没有太充足的开发资金提供;
c、对微信小程序未来发展和互联网的发展认知不够。
二、专业的第三方微信小程序开发公司
这类企业都有专门的技术团队和丰富的开发经验，商家只要把需求提供给公司，然后跟技术进行交流一下，把你的想法和需求说明，就可以开始了，而且这种开发方式开发价格较低，一般根据功能也就几千，贵的话也就是一两万既可以实现。

⑦ 小程序的 iview Weapp 组件库的使用

iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。

商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果，总的来看还是不错的。

还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：

总的来讲 iview 还比较好看的。
更多用法去参考： https://weapp.iviewui.com/

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

⑧ 小程序怎么组件开发

要有ES6 基础.
css js 基础.
根据小程序官方的组件文档.
把每一个可以复用的功能设计成通用的. 然后创建成组件 调用使用.
细节太多. 可以追问

⑨ 小程序自定义组件

新手在第一次自定义组件的时候，首先写出来需要定义的组件的内容和布局，防止不熟练而出错。

一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。

二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。

三、在新建的文件夹内新建一个Component文件 命名也是自定义。

四、在xxx里面把事先写好的ml和ss以及js文件复制进去。

1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样  {{}}是插值表达式。这里可以直接使用js里面定义的数据。

eg:

1、组件自定义的属性列表写在 properties里面。需要写成对象的形式 

eg:

2、组件的方法列表写在 methods里面

eg:

五、在需要引用自定义组件页面文件的xxx.json里面引用。

注意：引用的时候，不可以以./开头。前面命名可以自命名，不必和后面名字一样。

六、在需要引用的页面里的的xxx.wxml里写已经命名好的组件。

组件的名字为自定义命名。

eg:

因为组件是自己写的，并非微信提供的官方组件，所以如果想要获取触发事件的话 ，需要写一个同步组件回传数据

触发自定义事件用triggerEvent。在需要调用的方法内写this.triggerEvent(“自定义属性名”，‘需要更新的数据’)

eg:

然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”

利用data-active="变量名"属性添加需要变化的变量

eg:

xxx.wxml内写法：

注意：想要在页面中使用自定义的组件属性时，必须要现在定义组件的文件夹内的js文件中，先去定义属性，然后才可以引入使用。

⑩ 怎么在微信里添加“小程序”功能教程

在微信里添加“小程序”功能步骤如下：

1、打开微信，点击主页上方搜索方框，如下图所示