微信小程序_组件

1基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </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 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image ， video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲，使收缩； vi玩去，收缩

小程序开发中，checkbox组件不可以单独使用。radio是选项按钮组件，该组件不能单独使用，必须作为radio-group的子组件使用，否则多个radio只有一个被选中。要监听radio组件的触发事件，需要使用radio-group组件的bindchange属性。

可以使用js的splice方法

arrayObjectsplice(index,howmany,item1,,itemX)

index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, , itemX 可选。向数组添加的新项目。

最近一直在做小程序，工作中也遇到了一些问题，踩了一些坑，所以想着写篇文章记录下来，并借此将小程序开发的相关知识进行梳理，方便以后参考，也为刚刚接触小程序的人提供一些思路方法，互相学习，共同进步。

1、微信小程序的目录结构及配置说明

appjson是小程序的全局配置文件，所有配置项key必须使用 双引号括起来 ，value值为字符串类型的也必须使用双引号， 不支持单引号 。

11 pages

pages选项是必须配置的。该配置项注册了小程序所有页面的地址，其中每一项都是页面的 路径+文件名 。每一个页面都是由json、js、wxml、wxss四个文件组成，并且 四个文件的名字必须要一致 。

12   tabBar

tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab

13 usingComponents

使用自定义组件或者插件提供的组件前，必须先在这里声明

2、开发微信小程序遇到的问题及解决办法

21 双向绑定

微信小程序不支持通过v-model的方式实现自动双向绑定，需要给表单元素通过绑定事件，并使用thissetData来赋值实现。

22 computed和watch

微信小程序默认是不支持computed和watch的，如需要使用这两项功能，需要安装miniprogram-computed ，安装方法见 官方文档

23 对象赋值

如果给对象的属性赋值，可以使用thissetData({'objkey':value})来赋值，但是如果给某个属性名是变量的属性赋值，通过这种方法是会报错的，经过多次尝试，发现使用如下的方式赋值成功。

let newObj = `obj${key}`

thissetData({

[newObj]: value

})

24 scroll-view

当页面存在d框容器，并且d框里的内容是需要滚动条滚动展示时，如果d框下面那层的容器使用view元素的话，会导致滚动d框内容时，同时会触发d框下面那层的页面容器也会一起滚动，解决此问题可以将d框下面的容器使用scroll-view元素替代view元素

3、小程序测试和发布

由于服务器域名request合法域名每个月 只能修改5次 ，因此在本地开发小程序时，需要在微信调试工具中设置不校验合法域名。等小程序上线前再一次性将所有域名添加到小程序管理后台。

以上便是此次小程序开发中积累的一些经验，希望能给刚刚接触小程序的人提供一些思路方法，在以后的开发中，如果遇到新的问题，继续更新文档

需求如下：当前后台返回json和需要用到的不一致，需要手动更改。

例1：更改对象中的某一元素

['']通过此种方式获取到需要改变的对象或者数组当中的元素然后更改

例2：将后台返回的对象（包含数组）中的部分数值赋值给需要的对象

现在最外层仅需要name和id字段，而数组list需要变更为数组children并且同样适用name和id属性。

以上就是关于微信小程序_组件全部的内容，包括:微信小程序_组件、小程序开发中,checkbox组件可以单独使用吗、小程序怎么实现多项单选提交选中的值，可取消选中等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！