小程序开发文档组件(小程序内常见的组件)

小程序开发 136
本篇文章给大家谈谈小程序开发文档组件,以及小程序内常见的组件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、小程序常用组件-视图容器

本篇文章给大家谈谈小程序开发文档组件,以及小程序内常见的组件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

小程序常用组件-视图容器

本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。

容器组件:内部能嵌套任何标签。常用的视图容器有: view , scroll-view , swiper

view/ 是一个块级容器组件,任何一种复杂的布局都可以嵌套在 view/ 组件内,并在 *.wxss 中设置相关样式。

view/ 除了上述组件共有的属性外,还包含一组关于点击行为的属性。

在布局中,需要容器具有可滑动的功能,且能监听滚动、触顶、触底等事件,就需要 scroll-view/ 组件, scroll-view/ 在 view/ 组件上添加滚动相关的属性,通过这些属性,可以响应滚动相关事件。

注意:

textarea/ , video/ , map/ , canvas/ 不能嵌套在 scroll-view/ 中使用

利用 swiper 组件,可以实现轮播图,滑动页面,预览图片等,一个完整的滑块视图软件由 swiper/ 和 swiper-item/ 两个标签组成,不能单独使用。一个 swiper/ 只能嵌套一个或多个 swiper-item/ 标签,放置其它的标签会被删除,其中, swiper-item/ 中能放置任何标签,高度默认为 100% ,另外没有任何其它特殊属性。

swiper/ 的属性如下:

uniapp开发微信小程序富文本编辑器(样式仿腾讯文档)

照着腾讯文档小程序开发了微信小程序富文本编辑器组件,这几天做个整理,如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序,无法做到百分百效果,只能按现有开放api尽可能实现。

项目地址:

uniapp插件市场:

editor富文本编辑器组件官方文档:

否则会受到小程序css影响。小程序本身editor标签有css样式:

editor {

display: block;

position: relative;

box-sizing: border-box;

-webkit-user-select: text;

user-select: text;

outline: 0;

overflow: hidden;

width: 100%;

height: 200px;

min-height: 200px;

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目标文字时,将值设为\n',可以实现换行

this.editorCtx.insertText({ text: '\n' });

参考:请问editor组件控制拉起键盘操作支持吗?

小程序技术专员-sanford 2019-09-20

不支持的。iOS无法通过接口拉起键盘,必须用户点击;安卓则可以。所以,终究是不一致,不行。。

该组件主要为微信editor组件的api调用集成封装,因此受到的限制同文档描述一致,即编辑器内支持部分 HTML 标签和内联样式,不支持class和id,支持的标签详见: 。

不满足的标签会被忽略,div会被转行为p储存。

这也是为什么在做富文本解析时,仅仅用rich-text组件无法有效还原html内容,在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。

所以,开发者需要自行权衡在做富文本编辑开发时,是否使用微信自带的editor组件,或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。

小程序富文本编辑器editor初体验:( )

如果是微信原生开发,将demo组件中的相关dom元素标签和api换成微信原生即可。

微信小程序之组件

一.创建并使用组件的步骤

1.创建一个文件夹存放组件,并在里面创建一个组件文件夹,components,tabs

2.在tabs文件里添加组件模板

3.引用组件,在父组件的json文件中的usingComponents中添加子组件路径,compont

4.使用组件,相当于正常标签进行使用

二.父组件向子组件传参的步骤

父组件给子组件的tabs传入对象

1.父组件的数据

2.子组件做的操作

如果没有传入数据,就会输出默认值value

3.子组件展示对象数据:

三.子组件向父组件传参的步骤

1.先给子组件添加一个点击事件

2.通过this.triggerEvent("自定义事件名称",{传的值})命令保证子组件和父组件同步被修改

3.父组件绑定子组件,定义一个事件名称,用来接收子组件传递的数据

关于小程序开发文档组件和小程序内常见的组件的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫码二维码