微信小程序开发组件（微信小程序开发组件是什么）
本篇文章给大家谈谈微信小程序开发组件，以及微信小程序开发组件是什么对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
微信小程序需要哪些开发工具
微信小程序需要哪些开发工具?
一、微信小程序官方开发工具
注意，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。
优点
因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势，如果不是他代码编辑功能太弱的话。
官方工具，可调试，可预览
基本的代码编辑、智能提示、调试等功能都有
项目管理、创建、手机预览、代码提交审核
官方维护更新
缺点
不好的地方也很明显，总体而言是一款工具而不是IDE。糟糕的代码编辑功能，写起代码非常别扭，这是我放弃它的最重要原因。
api提示不全，要一个个查api，影响写代码的速度
很多必备的快捷键都没有，比如全选关键字、快速复制一行等等
颜色主题不能选，不喜欢白色风格怎么搞
没有插件 没有插件 没有插件 重要的事情说三遍
评价
目前因为需要用到微信web开发工具进行小程序的创建、调试、查看、预览、上传，所以这个工具必不可少。但是代码编辑功能实在太差，推荐使用其它第三方代码编辑工具代替。
二、即速应用——适合技术小白的小程序开发工具
严格来说，即速应用并不是为专业程序员准备的开发工具，但它绝对是一款功能非常强大的微信小程序制作工具。不懂技术不懂编程的人，一定会爱上即速应用这款工具的。
优点
可视化操作，直接拖拽组件生成页面
提供大量可套用的模板
可将代码打包下载，直接对接到小程序的开发工具
下载下来后的代码可以任意编辑
缺点
电商模板居多，其他类别的模板较少
复杂的功能仍然需要专业程序员二次开发
评价
客观地说，即速应用这款微信小程序制作工具非常适合技术小白。因为它相当于把需要代码的`部分都帮你做好了，所以不用太头疼技术方面的问题。当然，如果你是程序员，一样可以在它生成的代码基础上进行二次开发的。
三、Sublime Text 3——简洁高效的开发工具
sublime text 3定位于代码编辑器而不是IDE，在代码提示方面只能算一般般，不过胜在使用起来非常方便。
优点
打开文件速度倍儿快、UI简洁大方
代码编辑体验舒适、高效
拥有大量插件，针对不同需求基本上能找到对应插件来满足
第三方开发者开发小程序插件用于代码着色和代码提示
缺点
没有调试，没有预览
因为是第三方开发者编写的插件，代码提示也不是非常全面
评价
使用门槛不会太高，可以迅速上手。是但如果想实现一些丰富的功能就会比较吃力了。
四、WebStorm——功能繁多的重度开发工具
WebStorm网上有个插件，可以实现代码提示，不能做调试和预览，并且属于重度工具，如果你是，可以尝试一下这个工具。
优点
有插件可以实现代码高亮，代码提示等功能
有非常成熟和非常丰富的功能
各种快捷键
缺点
无法调试预览
功能比较多、比较臃肿
评价
Webstorm和上述几个工具相比，代码编辑功能较强大。但是需要插件支持才可以开发小程序，而且体积臃肿。
微信小程序引入第三方UI组件
需要引入第三方UI组件 Vant-Weapp
打开终端，输入cd 拖拽项目文件到终端，然后输入命令npm init
此时，输入package name名称，一直点回车就行
出现Is this OK?(yes)，直接回车即可
在终端输入命令npm i vant-weapp -S --production
在回过头看，在微信小程序开发工具中会多一个文件package.json，在这里面就可以进行包的配置。
这个时候可以在项目文件夹中看见一个新生成的文件夹miniprogram_npm，其中就有我们刚刚安装好的vant组件库
这里要注意，一定是将引入的第三方组件写入“usingComponents”的字典中，如果写成平级的话，会提示page.json [vant-button]无效
vant-button type="danger"微信登陆/vant-button
微信小程序开发工具——引入vant组件库
1.在小程序更目录下初始化npm：
2.在小程序 package.json 所在的目录中执行命令安装 npm 包：
3.安装vant包：
npm i @vant/weapp -S --production
4.
5.
报错如下图：
6.
7.然后在需要引入组件的页面中的.json文件里按需引入即可
微信小程序组件化开发
微信小程序的组件和Vue的组件非常相似。
在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。
如何创建自定义组件：
新建一个components目录，在里边创建自定义组件
组件的组成：
使用组件：
一个简单的示例：
创建comp，代表页面；创建components/xxxx，代表组件。
创建组件：
使用组件：
注意：json文件中不能写注释啥的。这里的注释是为了解释清楚，在开发中不能写注释。
组件的注意事项：
组件的样式细节：
如何控制页面和组件的样式相互影响：
组件和页面相互通信
this.triggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项
预留一个设备，以有利于对以后进行扩展。
好处：
例子：
在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。
单个插槽的使用很简单：
多个插槽的使用稍微复杂，要设置几个东西：
component构造器中可以写哪些东西，如下
微信小程序开发|工具|npm 使用
用过 npm 的小伙伴肯定很熟悉 node_modules，但是「微信开发工具」是不认 node_modules 的 , 它认的是 miniprogram_npm； 而 miniprogram_npm 是通过 node_modules 转出来的， 它是通过「微信开发工具」的 “工具” - “构建 npm” 生成出来的。
具体步骤如下：
1、 npm init
这里会产生 package.json 的配置文件
2、 npm install ** --p --s
安装需要的包，这里会产生 node_modules
3、「微信开发工具」走一遍 “工具” - “构建 npm”
这里会产生 miniprogram_npm
4、「微信开发工具」的本地配置中 “使用 npm 模块” 勾上
5、使用包
引入的组件可以有第三方组件和 js 工具
1、 按照步骤安装库同时走一遍 “工具” - “构建 npm”，产生\miniprogram_npm\weui-miniprogra
npm install weui-miniprogram --p --s
2、 在 app.wxss 引入全局样式
3、在需要使用的页面中引入控件和使用，
譬如 pages/index/index.json，然后就可以在 index.wxml
1、 按照步骤安装库同时走一遍 “工具” - “构建 npm”，产生\miniprogram_npm\js-base64
npm install js-base64 --p --s
2、在 *.js 文件中用 require 或者 import 引入，然后使用
微信小程序开发组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序开发组件是什么、微信小程序开发组件的信息别忘了在本站进行查找喔。
