1383人阅读
视频教程地址：
&&/v_show/id_XMTgyMDE5NjEyOA==.html
一 效果演示
& & & 1.点击头像，弹出图片裁剪框
& 2，选择图片，裁剪，上传
& 3.上传成功后，头像图标更改
二 案例解读
& & &案例目录
& & &wex5为我们提供了一个picut图片裁剪案例，如下：
& & 组件部局
& & & 加入file标签用来打开文件管理器进行图片选择，div标签进行图片预览,image标签为裁剪图片
& & 后端服务
& & 后端接收请求参数后，对路径进行了拼接，创建文件流，并创建文件，成功后将成功信息传给前台。
& & &代码解读
& & & & &引入cropper.js图片裁剪js.
&&&&&&&&&&&&&&&&
& & & & & & & cropper.js为我们提供了一组参数，案例中有注释，
& & & & & & &&$('.cropper-example-1 & img').cropper(options);找到img对像并初始化参数执行cropper.
&&&&&&&&&&&&&
& & & &&&&& 用button的click事件，触发file标签的click事件，打开文件管理器，选择图片
&&&&&&&&&&&
& & & 选中图片后，触发file标签的fileChange事件，在此事件中，对文件类型image判断。event.target.filts[0]表示从文件管理器选择的多个图片数组，只选其第一个对像，进行URL.createObjectURL(file)转换。
& & & &&var data = result.toDataURL();得到剪切后的二维流数据，通过baas.send方法异步上传，成功后返回信息。
& & &将成功上传后的图片信息给了image,实现预览。
三 实战改装与代码实现
& & & 1 数据库设计
&&&&&&&&&&&
& & & & 创建头像字段headImgUrl
& & & 2 后端改装
& & & & & & & 将后端上传upload.java复制到当前工程，添加到便于修改，
&&&&&&&&&&
& & & & & 修改文件路径为当前工程目录
&&&&&&&&&&&&&
& & &3. 前端改装
& & & & & & &点击头像，用windowDialog打开图片裁剪框，并将用户当前行数据传入。
&&&&&&&&&&&&&&&&
& & & & & &windowDialog数据进行映射。
&&&&&&&&&&&&&&
& & & & & & &裁剪框页面data autoLoad为false,接收参数，并加载。
&&&&&&&&&&&&&
&&&&&&&&&&&&&&
& & & & & &
& & & & & & & &图像预览，做成圆形，并放在标题头部。
&&&&&&&&&&
& & & 根据头像圆形，改变取景框为1:1,即正方形。
& & &用justep.UUID.createUUID()创建图片名称，并拼接imgUrl图片路径。
&&&&&&&&&&
& & 图片上传成功后，写入数据库imgUrl.
& & 因为我用windowDialog打开的图片裁剪框，确定后将数据传回主页面
& &工程完成，图标更换完成。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：24712次
排名：千里之外
原创：25篇
评论：10条
(3)(12)(10)> 博客详情
& 今天我想整理一下——WeX5中的各种绑定方式，下面分为表现类、流程类、交互类 3 种类型分别介绍。
表现类绑定
& & 表现类的绑定属性有visible、text、html、css、style、attr几种，除了css表示css的class之外，其他都是字面意思。示范用法：
布局中加入一个div标签和一个按钮，并设置div标签的绑定属性如下右所示。
& & 这样设定好了绑定关系，然后在 js 中将各绑定属性设置为可观察对象，让其可以自动更新界面：
define(function(require){
& & var $ = require("jquery");
& & var justep = require("$UI/system/lib/justep");
& & var Model = function(){
& & & & this.callParent();
& & & & this.canVisit = justep.Bind.observable(true);
& & & & this.htmlCnt = justep.Bind.observable("add HTML element : &button&btn&/button&");
& & & & this.myCls = justep.Bind.observable("div-one");
& & & & this.myStyle = justep.Bind.observable({color: "blue", "font-size": "22px"});
& & Model.prototype.button2Click = function(event){
& & & & this.myCls.set("div-two");
& & & & this.htmlCnt.set('remove button, add link: &a href="#"&link&/a&');
& & & & this.myStyle.set({border: "none", "font-size": "14px"});
& & return M
& & 这里在 Model 构造函数里面初始化了各绑定属性，然后定义 button 的点击事件，在其中改变绑属性值。效果如下：
& & 这里为了演示我没有使用text绑定，text绑定只能显示字符，不能将标签显示出来。另外，text 和 html 绑定都是对内容进行修改，而同时修改内容会发生冲突，所以不能同时应用这两个绑定。
& &注意，因为 js 的变量命名中不能带 [ – ] （减号），所以引用带[ – ]的CSS类名时需要用引号包起来。 style里面的内容也一样，这个也是JSON格式的要求了。
流程类绑定
& & 流程类包括foreach、if、ifnot、with绑定，if 和 ifnot 与 visible类似，差别就是：if 会直接从DOM中移除相应的组件，而visible只是控制隐藏显示，组件还是在DOM里面的。with 跟 js 中的 with 也是一样的效果，就是延长 了作用域链，简单的来说就是在变量前加了个’前缀.’。这里只介绍一下foreach，其他绑定请参考wex5官网绑定教程。
foreach顾名思义，是针对每一项进行操作的，一般用在对多组数据的绑定上。这次我们使用 html 原生的 ul 标签来做个示范：
先往界面编辑器里面放入一个list，并在list里面放入3个span标签用于显示，设置list的 bind-foreach为 items，然后分别设置3个span的 bind-text为 $index，itemName，creatTime：
再编写js如下：
define(function(require){
& & var $ = require("jquery");
& & var justep = require("$UI/system/lib/justep");
& & var Model = function(){
& & & & this.callParent();
& & & & this.items = [
& & & & & & {itemName: "JavaScript", creatTime: "Feb 10 2013"},
& & & & & & {itemName: "HTML", creatTime: "Mar 21 2015"},
& & & & & & {itemName: "CSS", creatTime: "May 13 2016"}
& & & & ];
& & return M
现在只是单纯的初始化数据，如果需要监视数据的变动，那就要用 this.items = justep.Bind.observableArray([{ itemName: ……}])来将数组设置为可观察对象。
这里我们在list上设置foreach为items，那么list下的子项和items下的子项就对应起来了，所以list子项的span就能直接绑定item子项里面的数据，这个跟js中的作用域是一样的。在使用foreach时要注意作用域的层次，否则很容易搞 乱。这里再给一个案例，通过这个案例应该可以很好理解foreach绑定中的作用域范围了。
&ul component="$UI/system/components/justep/list/list" class="x-list x-list-template" xid="list1" bind-foreach="items"&
& &&li xid="li1"&
& & & & & &NO.&span xid="span1" bind-text="$index"&&/span&
& & & & & &&span xid="span2" bind-text="itemName"&&/span&
& & & & & &&span xid="span3" bind-text="creatTime"&&/span&
& & & & & &&a xid="a2" bind-click="$parent.removeItem"&removeItem&/a&
& & & &&/li&
&a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button" xid="button1" bind-click="addItem"&
& &&i xid="i1"&&/i&
& &&span xid="span4"&&/span&
define(function(require){
& & var $ = require("jquery");
& & var justep = require("$UI/system/lib/justep");
& & var Model = function(){
& & & & this.callParent();
& & & & var that =
& & & & this.items = justep.Bind.observableArray([
& & & & & & {itemName: "JavaScript", creatTime: "Feb 10 2013"},
& & & & & & {itemName: "HTML", creatTime: "Mar 21 2015"},
& & & & & & {itemName: "CSS", creatTime: "May 13 2016"}
& & & & ]);
& & & & this.addItem = function () {
& & & & & & that.items.push({itemName: "WeX5", creatTime: new Date().toDateString()});
& & & & };
& & & & //remove的对象是整个 li标签，也就是 a标签的父对象。实际上要执行的是 Model.items.remove(a.parent)
& & & & this.removeItem = function() {
& & & & & & that.items.remove(this);
& & & & };
& & return M
交互类绑定
交互类绑定主要用在表单中，包括常用的value、textInput、options、submit以及validation等。下面简单说说。
（1）value绑定
使用方法和上面的一样，在界面设计器中绑定bind-value，然后在 js 中进行相应的操作即可。比如官方的Hello World教程，也可以用 value 绑定来改写：
先往界面编辑器中加入一个output控件和一个input控件，设置output控件的bind-text为‘Hello， ’+ mybind.get()，然后设置input控件的bind-value为mybind。然后在js中将mybind设置为可观察对象即可。
这样效果就出来了，每次输入完输入框失去焦点后output的内容就会被刷新。如果要让输入值马上更新到output中，那就要配置一个附加参数，bind-value设置为 myBind, valueUpdate: ‘afterkeydown’。效果：
（2）textInput绑定
属性HTML5的同学会知道DOM3事件中新增了一个 ‘textInput’事件，WeX5中也支持这个事件的绑定，目前可视化界面中还没有这个事件，但是可以在自定义属性中使用它。
如果需要实时同步效果的话，更推荐这个textInput方法，不单更加简单，对浏览器的支持也更加好。
（3）options、selectOptions绑定
在下拉列表中可使用 options 来绑定子项的值，子项既可以是字符串，也可以是 js 对象。操作与上述绑定一样，在select控件上自定义属性bind-options，在js中设置其绑定值为可观察对象数组（如this.listItem = justep.Bind.observableArray([“Mark”,”Jimmy”,”Denny”]);）。绑定 js 对象也基本一样的操作，只是需要注意设置相关的属性。具体可参考官方教程：
（4）hasFocus绑定
这个主要用在输入框上，不过原生事件中也有个focus，所以显得不是特别有用，这里给个案例。
&!-- HTML code --&
& & &b bind-visible="!editing.get()" bind-text="name" bind-click="edit"& &/b&
& & &input bind-visible="editing" bind-value="name" bind-hasFocus="editing"/&
&p&&em&Click click elsewhere to apply changes.&/em&&/p&
define(function(require){
& & var $ = require("jquery");
& & var justep = require("$UI/system/lib/justep");
& & var Model = function(){
& & & & var that =
& & & & this.callParent();
& & & & this.name = justep.Bind.observable("Justep wex5");
& & & & this.editing = justep.Bind.observable(false);
& & & & this.edit = function() {
& & & & & & that.editing.set(true);
& & & & };
& & return M
这个效果也是比较常见的了，主要是用两个标签的来回切换实现，切换事件由click和hasfocus触发。
基本的绑定用法就以上这些了，还有一些比如模板绑定和component绑定的内容就留到后续再介绍了。码字不易，顺手点赞哈~
人打赏支持
码字总数 33938
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥WeX5开发指南WeX5常用组件}