vue微信小程序组件(vue微信小程序开发)

网友投稿 1422 2023-01-02

本篇文章给大家谈谈vue微信小程序组件,以及vue微信小程序开发对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享vue微信小程序组件的知识,其中也会对vue微信小程序开发进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

微信小程序创建组件以及父传子、子传父内容

一、小程序创建组件过程

1、首先创建一个components目录vue微信小程序组件,下面放文件(组件文件)

2、创建两个组件文件(Listitem和lunbo)

3、在pages文件夹json文件里面vue微信小程序组件,进入对应的模块内引用Listitem和lunbo组件

4、在wxml文件中使用标签属性来引入组件

自定义组件中和页面中的class名重名vue微信小程序组件,是不会产生冲突的;

页面中的class和自定义组件中的class重名;同样不会产生冲突;

二、父传子:

三、子传父:

子组件绑定事件handle事件(bindtap=“handle”)

微信小程序_组件

1.基础组件:

什么是组件:
<ul
<li组件是视图层的基本组成单元。</li
<li组件自带一些功能与微信风格的样式。</li
<li一个组件通常包括开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。</li
</ul

2.属性类型
<ul
<liBoolean 布尔值 组件写上该属性,不管该属性等于什么,其值都为true
,只有组件上没有写该属性时,属性值才为false
。如果属性值为变量,变量的值会被转换为Boolean类型</li
<liNumber 数字 1
, 2.5</li
<liString 字符串 "string"</li
<liArray 数组 [ 1, "string" ] </li
<liObject 对象 { key: value } </li
<liEventHandler 事件处理函数名 "handlerName"
是 Page中定义的事件处理函数名</li
<liAny 任意属性 </li
</ul

3.共同属性类型

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类:

视图容器(View Container):
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content):
icon 图标, text 文字, progress 进度条

表单(Form):
button 按钮, form 表单, input 输入框, checkbox 多想选择器, radio 单选器, picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签.
操作反馈(Interaction)
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片, video 视频
** 地图 **

map 地图

画布Canvas
canvas 画布

flex: vt.折曲,使收缩; vi.玩去,收缩

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

iview 这个 UI 框架想必大家都很熟了,这个搞 Vue 框架的基本素养。下面来看看小程序版的。
商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

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

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

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别,一起来看看:
总的来讲 iview 还比较好看的。
更多用法去参考: https://weapp.iviewui.com/

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

推荐两个微信小程序开发框架

下面是最近了解的,开发者使用较多的框架:

1. WePY

WePY属腾讯系,是一款组件化的开发框架,比原生小程序的开发模式更接近于MVVM ,它类Vue的开发风格,让Vue开发者很容易上手。

Github地址: https://github.com/Tencent/wepy

官网地址:https://tencent.github.io/wepy

2. mpvue

mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

Github:https://github.com/Meituan-Dianping/mpvue

官网:http://mpvue.com/

uniapp和vue有什么区别?

vue和uni-app的区别如下:

1、uni-app可以通过打包实现一套代码多端运行,而vue不行。

2、uni-app有自动的框架预载,加载页面的速度更快,vue没有。

3、uniapp使用小程序的标签,vue使用web端的标签。

4、uni不支持vue-router,使用自带的路由。

uni-app的优点

优点一:

uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。

优点二:

uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一样。

优点三:

uni-app使用HBX进行开发,HBX对于vue语法等支持可以说是比较完备了。

关于vue微信小程序组件和vue微信小程序开发的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 vue微信小程序组件的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vue微信小程序开发、vue微信小程序组件的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:物联网终端(物联网终端二维码)
下一篇:mybatis 解决从列名到属性名的自动映射失败问题
相关文章

 发表评论

暂时没有评论,来抢沙发吧~