洞察了解什么是信创国产化,如何通过小程序技术推动数字化转型,满足行业合规与多样化需求。
1079
2023-01-01
本文目录一览:
本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。
小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。
容器组件:内部能嵌套任何标签。常用的视图容器有: 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/ 的属性如下:
微信小程序的组件和Vue的组件非常相似。
在微信小程序中有很多内置组件,比如button view input image等,有时候我们要自定义组件。和Vue的组件似的。
如何创建自定义组件:
新建一个components目录,在里边创建自定义组件
组件的组成:
使用组件:
一个简单的示例:
创建comp,代表页面;创建components/xxxx,代表组件。
创建组件:
使用组件:
注意:json文件中不能写注释啥的。这里的注释是为了解释清楚,在开发中不能写注释。
组件的注意事项:
组件的样式细节:
如何控制页面和组件的样式相互影响:
组件和页面相互通信
this.triggerEvent(事件名,参数对象,{}),最后是options,额外的一些选项
预留一个设备,以有利于对以后进行扩展。
好处:
例子:
在移动端,导航栏,nav-bar,分为左中右三部分。不把这三部分的内容写死。就用插槽,为了封装性更好。
单个插槽的使用很简单:
多个插槽的使用稍微复杂,要设置几个东西:
component构造器中可以写哪些东西,如下
https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang
vant 小程序组件库
第一步 先npm init 回车 初始化新建package.json文件包
如果微信开发者工具无法输入命令 打开cmd面板 cd d:/ 进入目录 cd users 知道进入小程序项目目录输入命令
第二步 ## 安装
将 app.json 中的 "style": "v2" 去除,小程序的 新版基础组件 强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
开发者工具创建的项目, miniprogramRoot 默认为 miniprogram , package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为'./'即可
打开微信开发者工具,点击 工具 - 构建 npm ,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。
请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp 所在的目录。
使用时:
https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian
vant小程序使用说明文档
在 app.json 或 index.json 中引入组件,详细介绍见 快速上手 。
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~