微信小程序_组件

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

有时候会遇到后端需要前端获取的文件转换成base64，在传给后台

小程序有专门的选择接口，

wxchooseImage(OBJECT)

但是这个只是返回一个的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本190以后要才有）先获取内容，

再通过插件upngjs插件实现转base64（所需插件文件附件中）

1 把upngjs和pakominjs文件放到项目中

2 在pages下的页面js文件中导入

var upng = require('//utils/upngjs');

这里只需要导入npngjs ，pakominjs是在npng,js里面调用

3 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位展示 变量imgbase64

need-to-insert-img

4 添加js点击chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wxgetStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wxcreateCanvasContext(canvasID)

        wxchooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = restempFilePaths;

                // 获取文件路径

                var filePath = tempFilePaths[0];

                // 1 绘制至canvas

                canvasdrawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 170

                canvasdraw(false, function(res){

                    // 2 获取图像数据， API 190

                    wxcanvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3 png编码

                          let pngData = upngencode([resdatabuffer], reswidth, resheight)

                          // 4 base64编码

                          let base64 = wxarrayBufferToBase64(pngData)

                          //

                          thatsetData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5 实现

need-to-insert-img

need-to-insert-img

tips

画布画的的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

wxgetImageInfo(OBJECT)

获取长和宽

相关链接

upngjs:  >

Canvas 组件表示屏幕上一个空白矩形区域，应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。

应用程序必须为 Canvas 类创建子类，以获得有用的功能（如创建自定义组件）。必须重写paint 方法，以便在 canvas 上执行自定义图形。

举例：

Paneladd(new MyCanvas());//往panel中添加画布canvas

class MyCanvas extends Canvas {//定义一个canvas

public MyCanvas () {

setBackground (ColorGRAY);//设置背景为灰色

setSize(300, 300);//定义canvs大小是300300

}

public void paint (Graphics g) {//画布的paint方法，

Graphics2D g2;

g2 = (Graphics2D) g;

g2drawString ("It is a custom canvas area", 70, 70);//屏幕输出该字符串

}

}

以上就是关于微信小程序_组件全部的内容，包括:微信小程序_组件、小程序 使用upng.js 把小程序选择的图片转换为base64、小程序中的canvas覆盖了定位的元素怎么弄等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！