微信小程序_组件

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玩去，收缩

目前mini-router支持微信小程序里的路由的所有方法，函数名对比:

当你输入一个在pages模块中找不到的路由时(log)，mini-router会抛出错误，例如：

mini-router内置了一个属性 params ，它会根据你跳转的页面，动态的更换当前属性的值。

参数存储在storage里，你可以通过小程序调试工具看到:

获取参数时，你不必知道它存储在storage里的key是什么，你只要拿 app$routerparams 就可以了

mini-router 通过 back 或者 backHome 函数实现反向传值（反向携带参数）

当你选择不携带参数返回时，在首页你将拿不到 app$routerparams ,因为 mini-router 会把 params 软删除，如果你需要的话，你还是可以从storage里拿到它。

mini-router同小程序一样，提供三种状态 success ， fail ， complete

不同于小程序，mini-router使用链式调用来处理这三种状态，

上面的都是通过params传参，传的参数缓存在了storage里，新增加的query类型传参，将参数拼接到了url后面:

Github: >

创建组件的方法：

步骤一

在小程序项目中添加一个components文件夹，里面存放自定义的组件，然后在components目录下新建一个customComponent文件夹，文件夹可以命名为自定义组件名字相关，用来存放自定义的组件。

在这个文件夹右键，选择新建组件，输入组件名，一个自定义组件由 json, wxml, wxss, js4个文件组成，此时将自动生成这四个文件。

步骤二

接下来进行组件的相关配置：

首先需要在 json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件

步骤三

引用组件：

在父级中：“useingComponents”：{

“命名”：“子级路径”，

}

在实际开发中，很多时候都需要要上传，但是对于上传多张时需要一张张的上传，因为都可能比较大，这时就需要我们对上传的API进行进一步的处理，这样就解决了我们同时选择上传多张需求。所以为了方便以后使用，封装成一个特定的组件分享出来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1页面样式布局

view

css

插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： >

新建文件requestjs，将请求的封装方法写在里面

页面调用，在页面的js文件中引用

小程序默认请求超时时间是60秒，等待时间有点长，我们可以在appjson中进行设置

每个页面请求的时候都要引用封装，还是有点麻烦。注意到小程序页面都可以获取appjs的实例（const app = getApp()），所以可以改一下封装，将封装方法直接暴露出去，在appjs中再配置POST/GET等请求；请求的url也可以抽出来写在一起，方便查找和修改。自己试一下吧~

//觉得有用的话，点个喜欢再走嘛（不要脸jpg）

一、在pages同级创建request文件夹 在此文件夹下创建一个indexjs文件夹 在此文件夹内写入封装的api

const request = (method,url,params) => {               // method (请求方式)     url (请求的路径)   params (请求的参数)

  return new Promise((resolve,reject) => {             // 创建一个promise函数 

    let baseUrl = "公共url"

    unishowLoading({                                               // 添加加载动画

        title: '加载中'

    });

    unirequest({                                                         // 发送请求

        url: baseUrl + url,                                             // url 形参就是传入的地址

        data: params params:'',                               // 传入的请求参数

        method: method,                                            // 传入的请求方式

        success: res => {                                           // 成功的函数

          resolve(resdata);

          unihideLoading();

        },

        fail: err => {                                                 // 失败的函数

          reject(err); 

          unihideLoading();

        }

    });

  })

}

const api = {

  get: (url,params) => request("GET",url,params),

  post: (url,params) => request("POST",url,params)

}

export default api;                                                // 抛出接口

二、在request 文件目录下 创建一个 home文件夹  在home 文件夹内新建indexjs文件

// 所有的首页的请求 ，都放在这里维护

import api from '/indexjs';

export const get = params =>  apiget('路径',params);              // get请求

export const post = params =>  apipost('路径',params);              // post请求

三、在所需要请求数据的页面内

import  请求名  from '文件路径';

在小程序项目开发中，对请求做封装是比较常见的 *** 作，我们可以在封装过的请求里，做一些统一处理，比如统一配置、请求拦截、错误异常处理、授权处理等

好了，我们直接看干货，上代码

在项目根目录下新建一个request目录，再在目录下新建一个indexjs文件，文件里的内容如下

好了，wx小程序request请求封装就到这了

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

新手在第一次自定义组件的时候，首先写出来需要定义的组件的内容和布局，防止不熟练而出错。

一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。

二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。

三、在新建的文件夹内新建一个Component文件 命名也是自定义。

四、在xxx里面把事先写好的ml和ss以及js文件复制进去。

1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样  {{}}是插值表达式。这里可以直接使用js里面定义的数据。

eg:

1、组件自定义的属性列表写在 properties里面。需要写成对象的形式 

eg:

2、组件的方法列表写在 methods里面

eg:

五、在需要引用自定义组件页面文件的xxxjson里面引用。

注意：引用的时候，不可以以/开头。前面命名可以自命名，不必和后面名字一样。

六、在需要引用的页面里的的xxxwxml里写已经命名好的组件。

组件的名字为自定义命名。

eg:

因为组件是自己写的，并非微信提供的官方组件，所以如果想要获取触发事件的话 ，需要写一个同步组件回传数据

触发自定义事件用triggerEvent。在需要调用的方法内写thistriggerEvent(“自定义属性名”，‘需要更新的数据’)

eg:

然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”

利用data-active="变量名"属性添加需要变化的变量

eg:

xxxwxml内写法：

注意：想要在页面中使用自定义的组件属性时，必须要现在定义组件的文件夹内的js文件中，先去定义属性，然后才可以引入使用。

以上就是关于微信小程序_组件全部的内容，包括:微信小程序_组件、微信小程序 封装路由 mini-router、小程序创建和引用组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！