微信小程序调用方法有哪些开发工具和方法
点击联系发帖人
时间：2017-09-18 01:33
微信小程序开发科普，让你1小时内从入门到上手｜硬创公开课a year ago0收藏分享举报文章被以下专栏收录{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&&,&urlToken&:&ycgkk&,&id&:17265,&imagePath&:&da7a69f92dbad3290ce5.jpeg&,&slug&:&ycgkk&,&applyReason&:&0&,&name&:&硬创公开课&,&title&:&硬创公开课&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fycgkk&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:1924,&avatar&:{&id&:&da7a69f92dbad3290ce5&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fda7a69f92dbad3290ce5_l.jpg&,&articlesCount&:76},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-df9debccd5bfc78bd629dd34645ee27a_r.jpg&,&lastUpdated&:,&imagePath&:&v2-df9debccd5bfc78bd629dd34645ee27a.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[7,163629],&summary&:&1月9日，\u003Ca href=\&http:\u002F\u002Fwww.leiphone.com\u002Fnews\u002F2Fri7dDB7Fq0mMj1qh.html\& data-editable=\&true\& data-title=\&微信小程序正式上线\&\u003E微信小程序正式上线\u003C\u002Fa\u003E，互联网迎来了一次狂欢。张小龙在上个月的公开演讲中表示，“\u003Ca href=\&http:\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%E5%B0%8F%E7%A8%8B%E5%BA%8F\& data-editable=\&true\& data-title=\&小程序\&\u003E小程序\u003C\u002Fa\u003E是一种比现有所有 App 更加灵活，更加唾手可得的一种形态，并将无处不在。”作为微信的一种新形态，小程序不仅扩大了微信的生态，也被看作是移动互联网的“革…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T15:05:11+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2147377,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&微信小程序开发科普，让你1小时内从入门到上手｜硬创公开课&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:17265,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-df9debccd5bfc78bd629dd34645ee27a_r.jpg&,&author&:{&bio&:&雷锋公开课，用技术洞见未来，公众号【AI研习社】&,&isFollowing&:false,&hash&:&ba9af5fdb6f04a6a177a674c75731c37&,&uid&:681800,&isOrg&:false,&slug&:&ycgkk&,&isFollowed&:false,&description&:&&,&name&:&机智的大群主&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fycgkk&,&avatar&:{&id&:&v2-387e5271c5aed2dc4c40bc&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:525358}],&title&:&微信小程序开发科普，让你1小时内从入门到上手｜硬创公开课&,&author&:&ycgkk&,&content&:&\u003Cp\u003E1月9日，\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Fnews\u002F2Fri7dDB7Fq0mMj1qh.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E微信小程序正式上线\u003C\u002Fa\u003E，互联网迎来了一次狂欢。\u003C\u002Fp\u003E\u003Cp\u003E张小龙在上个月的公开演讲中表示，“\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小程序\u003C\u002Fa\u003E是一种比现有所有 App 更加灵活，更加唾手可得的一种形态，并将无处不在。”作为微信的一种新形态，小程序不仅扩大了微信的生态，也被看作是移动互联网的“革命者”。\u003C\u002Fp\u003E\u003Cp\u003E任何文字解析都不如视频直播直观。\u003C\u002Fp\u003E\u003Cp\u003E本次硬创公开课雷锋网请到了「开眼」视频的技术负责人为大家直播演示讲解如何开发一款视频\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%25E5%25BE%25AE%25E4%25BF%25A1%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E微信小程序\u003C\u002Fa\u003E。「开眼」视频是一款短视频日报应用。由「开眼」视频团队制作微信小程序「开眼Eyepetizer」，作为为数不多的第一批上线的视频类小程序，受到了许多开发者的关注。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E嘉宾介绍：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E杨凯，「开眼」视频团队技术负责人。\u003C\u002Fp\u003E\u003Cp\u003E曾供职于 360，是 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Fnews\u002F2FDycwUo5W9kETXMMg.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E360 手机\u003C\u002Fa\u003E桌面创始团队成员之一，由他参与研发的该款桌面在国内第三方桌面市场很长时间排名第一。2014 年加入豌豆荚，任豌豆荚 Tech Lead，负责豌豆荚主程序开发，主要参与网络库优化，UI 性能调优，通过代理缓存多媒体 web 页等工作。后加入「开眼」视频团队，作为技术负责人，负责技术开发、迭代工作。\u003Ca class=\&video-box\& href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\& target=\&_blank\& data-video-id=\&\& data-video-playable=\&\& data-name=\&113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\& data-poster=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\& data-lens-id=\&\&\u003E
\u003Cimg class=\&thumbnail\& src=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\&\u003E
\u003Cspan class=\&content\&\u003E
\u003Cspan class=\&title\&\u003E113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\u003Cspan class=\&z-ico-extern-gray\&\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&z-ico-extern-blue\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E
\u003Cspan class=\&url\&\u003E\u003Cspan class=\&z-ico-video\&\u003E\u003C\u002Fspan\u003Ehttps:\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\u003C\u002Fspan\u003E
\u003C\u002Fspan\u003E
\u003C\u002Fa\u003E
\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E下文为雷锋网整理的本次公开课直播分享中的要点。课后陈凯老师还分享了本次课程中完成的 demo，关注雷锋网(公众号：雷锋网)「唯物 」公众号（ID：okweiwu），回复「 小程序」即可获取链接。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E今天主要讲一下微信小程序的开发，希望通过直播开发一个「开眼」视频的小程序，帮大家了解微信小程序的开发步骤、流程以及基本 API 的使用，内容主要包括以下几个方面：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E开发一个可滚动列表，在这个列表的制作中，我们会熟悉微信小程序数据绑定的方法，以及怎么样发起一个网络请求；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E处理点击事件，通过这一操作了解微信是怎样做事件绑定的；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E在列表的指定位置，展现一个视频播放器，通过这一操作了解微信小程序给我们的视频标签是怎样使用的；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E将页面分享给好友，在好友对话里可以看到制作的微信小程序。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E大家可以看到「开眼」视频小程序就是一个简单的列表，列表中的每一个画面其实都是一个可以点开播放的视频。进一步分析可以得知，在我们看到的每一个视频封面图上有一个 icon，图下面是这个视频的文字介绍，标题以及分类。继续向下拉会发现，有多少视频，就会显示多个元素，并且是刷新不到头的。当我们点击一个视频封面或播放按钮 icon 时，视频会开始播放，接着点击播放第二视频时，第一个视频就会自动停止播放，以上就是我们这堂课想要完成的事情。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f2a88e987dc2b1fc2ce8a9_b.jpg\& data-rawwidth=\&270\& data-rawheight=\&480\& class=\&content_image\& width=\&270\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='270'%20height='480'&&\u002Fsvg&\& data-rawwidth=\&270\& data-rawheight=\&480\& class=\&content_image lazy\& width=\&270\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f2a88e987dc2b1fc2ce8a9_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤一：开发一个可滚动列表\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E由于时间关系，本次直播不会从零开始做这款小程序，会直接从微信的 demo （小程序组件）中开始操作。\u003C\u002Fp\u003E\u003Cp\u003E这是微信小程序官方给出的一个 demo，可以看到有两个 tab，今天的操作主要是在第二个 tab 的右边再添加一个 tab，在第三个 tab 中实现一个跟「开眼」视频小程序一样的功能。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E可以看到 pages 列表内容非常多，其内容主要是定义或声明一下在这个小程序中会用到一些界面。windows 花括号里面的一些选项是帮你定义 tool bar 上的颜色和信息，可以在这个页面看到demo 中 toolbar 的颜色就在这里设置的。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E在 tab bar 里新加一个“开眼视频”文件夹，配置地址是刚刚写好的，抄过来就好，配制完成可以看到左边的页面已经出来了，虽然没有内容，但第三个 tab 的框架已经完成了。接下来是继续开发这个 tab，我一般会直接从之前写好的代码里复制过来，然后进行一些简单的修改，演示一下变化过程。\u003C\u002Fp\u003E\u003Cp\u003E注意要把相关文件名也改成“开眼视频”，否则会出现找不到布局文件的情况发生。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E文件夹名称改完后，可以看到刚在第三个 tab 里添加的内容，已经可以显示出来了，这是一个微信小程序官方 audio 的页面，还需要对这个页面进行一些改动。\u003C\u002Fp\u003E\u003Cp\u003E首先写一下这个页面的布局文件，把没有用的布局文件删掉，在最上层定义一个 view，进行最外层的展示，然后会加一个 image 标签，这个标签主要的功能是展示刚才看到的 cover 图（由于时间关系，直播时省略了敲代码步骤，直接从之前的文件中拷贝）。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E解释一下拷过来的这几行代码。第一代码是 WX : for,前面 WX 是微信的简称，后面的 for 是说，它会在你的 JS 文件里找到一个名字叫 videos 的变量，该变量是一个数组，image 这个便签会重复多次，直到和 videos 数组长度一致。\u003C\u002Fp\u003E\u003Cp\u003E后面 for-item 标签是指，每一个 image 标签可以通过 video 变量名拿到和它绑定在一起的视频数据，例如下面 video.coverForFeed 就是把当前绑定的视频数据中 coverForFeed 字段赋值给 image 的 src。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E接下来看下 GS 的写法，先定义一个 videos，也就是刚刚在布局文件里声明需要的，这个 videos 会在 onload 里赋值。解释一下 onload 这个方法：页面被加载的时候，onload 会被调用。在微信小程序官方开发文档中也可以看到这个方法的相关声明，其中：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003Eonload 是页面被加载；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eonready 是第一次渲染完毕；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eonshow 是监听事件显示；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eonhide 是监听页面被隐藏。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_b.jpg\&\u003E\u003C\u002Ffigure\u003E如果有前端开发经验的话，可以看到跟 window 的很多页面很像.最常用的是 onload，再仔细看一下这个方法的使用，在这个地方会尝试调用一个叫 load 的方法，并且把“我们自己”传进去，再传一个options。解释一下 options，举个简单的例子，如果想调一个这样的配置，可以看到它的 url＝page\u002Fitem\u002Fitem，后面会带一个参数，参数名叫 id 值等于 1，这个方法是在调用者那边使用的，被调用者也就是被唤起的页面怎么样读到这个 id 等于 1 的参数呢？是通过 const id ＝ options.id 这个代码，options 相当于页面间传递参数传递的一个工具。
\u003C\u002Fp\u003E\u003Cp\u003E再看下 load 的方法，一行一行的来看，第一行 pages 和 options 是两个传参，第二行 wx.ewqiest 是发送一个 API 请求，注意，小程序官方文档里的对 wx.ewqiest 的定义是发送一个 HTTPS 请求，现在是本地操作，如果是线上环境的话，一定要写成 HTTPS，否则会被拦截。完整示例写法如下：\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003Eurl 是请求的地址；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Edata 是 url 里的参数，也就是我们传进去的参数；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eheader 是我们发送 HTTPS 请求的时候所带的 header；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Esuccess 当发送成功时，这个方法会被回掉；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Efail 当请求失败时，会回调这个方法，通知你失败的原因。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E再回到开发页面，video：videoData 是说把本地变量变为配置的参数，要注意的是微信小程序和 Vue 不同，小程序的数据不是双向绑定的，或者说不是默认双向绑定的，如果数据或数据结构发生了改变，想通知到 video 层级上，让 video 去刷新，必须要通过 page 中的 setdata 来实现。也就是说必须要这样写， videos 才会生效（video＝videoData 的形式不不会生效）。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E现在已经把简单的列表写好了，回到微信小程序的开发列表里可以看到，已经显示出了我们想要的效果，我们请求到了 6 个视频，界面上显示了六个 cover 图。微信会对 image 标签有默认的高和宽（240＊320 像素），所以需要对图片进行微调。\u003C\u002Fp\u003E\u003Cp\u003E接着写 css，微信的 css 语法和标准的 css 语法几乎没有区别，只是有一些子集不支持，这些在微信的开发文档里也有写，但是我们一般用到的都有。需要额外讲下 rpx，这是微信小程序里自己定义的一个属性。这个属性的定义是说它认为所有屏幕的宽都是 750 个 rps，也就是说，你拿到一台 iphone 5 和一台 iphone 6S，它的宽都是750 rpx。\u003C\u002Fp\u003E\u003Cp\u003E但是会反过来算一个像素等于多少 rpx，在 iphone5 里，假如说一个像素等于一个 rpx的话，在 iphone 6 里，两个像素等于一个 rpx。这样做的好处是降低了 UI 的适配成本。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E到这里本堂课的第一个目标已经完成，已经开发完成了一个可滚动的列表，并熟悉了数据绑定和网络请求。 \u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤二：处理点击事件\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E接下来要处理一个点击事件，点击事件触发之后，会在图片原来的位置展示一个视频播放器，并且播放图片所代表的视频。\u003C\u002Fp\u003E\u003Cp\u003E先看一下微信小程序定义的的事件绑定过程是怎样的：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E在组件中绑定一个事件处理函数，如 bindtap，这个用户在点击组件的时候，就会出发到这个 video 的 bindtap。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_b.jpg\&\u003E\u003C\u002Ffigure\u003E高亮的这几行意思是我把一个函数 tapname 绑在 video 标签的点击上。也就是说当前这个 video 标签被点击时，系统会调用名字为 tapname 的方法，并且把当前 video 的一些参数传到这个 tapname 函数里。\u003C\u002Fp\u003E\u003Cp\u003E接下来在项目里定义一个绑定，把 image 的点击事件绑定在一个 onTap 的方法上。接下来要在 JS 里实现这个 onTap 的方法。\u003C\u002Fp\u003E\u003Cp\u003E在 JS 里 onload 下面，重起一行接着写 onTap：function (element)，微信小程序官方文档中对 element 的定义中包涵了几个属性：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003Etype （事件类型）；\u003C\u002Fp\u003E\u003Cp\u003EtimeStamp（事件生成时的时间戳）\u003C\u002Fp\u003E\u003Cp\u003Etarget（触发事件组件的一些属性值结合）\u003C\u002Fp\u003E\u003Cp\u003EcurrentTarget（当前时间的一些属性值集合）\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E接下来要实现一个方法叫 tap，它需要两个传参，第一个是 page，第二个是 element。page 就是 this，element 就是刚刚定义的 element，传进来后可以看到这个方法就被调用了。打一个 log 可以看到以下结果。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E每点一次，下面都会出现一个 tap，也就是说已经成功的把 video 上的事件传递到了 JS 的处理函数中。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E第一段代码中的 element 就是刚刚传过来的被点击元素，currenttarget 是当前被点击的目标… 重点讲下videoUrl，videoUrl 是刚在开发中定义的一个内容，不是系统自带的，看下它是从哪里来的\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003Edata-video-id 的意思是把当前视频 id 附给 image 标签，作为这个 image 标签上的属性，当点击一个 image 标签是，JS 可以从传入的 element 中读到这个值。\u003C\u002Fp\u003E\u003Cp\u003E因为列表里有 6 个标签，所以必须要知道当前点击的标签是什么，以及当前被点击的标签上绑定的 video 数据，来决定后面需要播哪一个视频。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003Eid 我们用不到，先删去。上面的写法是 -video-url 这个地方写成 videoUrl 略有不同。原因是微信小程序会帮开发者们做一件事情，把 data 和后面的横线去掉，然后自动驼峰。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E上面这句话的意思是从被点击的 element 中拿到当前标签绑定的 video 的播放 url 是什么。可能很多做前端的同学心里会有疑问，为什么要费这么大劲去拿，而不通过一些其它的手段。因为微信小程序废除了 document，以及 window 的很多方法，目的是让小程序变成纯数据驱动的编程思想，也就是说所有的事件和所有的数据，一定是以事件或者是消息这样的方式来传递的，开发者没有办法主动的去拿到当前显示的 video。\u003C\u002Fp\u003E\u003Cp\u003E举一个简单的例子，如果在页面加载完后，设一个 timer 定时器，每五秒中告知当前列表中展示的第一个元素是什么，这个在小程序里做不到。因为没有办法主动拿到当前列表这个元素，也就没办法拿到列表上展示的内容，只有一种办法，用户手动触发了一个事件时，开发者才可能拿到这个事件相关的（并不是所有的）一些信息。\u003C\u002Fp\u003E\u003Cp\u003E为了取到当前被点击的这个 item 上面绑定的 video 的播放地址，要通过这种方式来实现，而不能通过其它的方式来实现，这个确实有点绕。\u003C\u002Fp\u003E\u003Cp\u003E这个思想在微信小程序里可以说是最重要的思想，也就是 DOM 模型几乎完全不能用。这个可能给很多前端开发带来非常大的困扰。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤三：在列表指定位置展示视频播放器\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E接着来看一下，现在还要做另外一件事，要在界面里加一个 video 标签，id 叫 video，class 叫 video，这样写主要是为了一会儿 CSS 绑定用。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E后面它的 style 写法，第一是 display，为什么用这个属性，据我个人的经验，在微信里如果想隐藏一个 video 标签，只有这一种方法可以隐藏，也就是说 display 属性设成 none，才可以把 video 隐藏，visibility hidden 方式都不行。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003Etop 就是说这个视频标签在列表中距离顶端的位置，所有带两层大括号的东西都是引用到 JS 里的变量，两个变量一个是 covertop，一个是 videoDisply，src 是 currentUrL，就是说 video 播放地址是什么，这也是第三个变量。
\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E对上面三个变量做个定义：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003EvideoDisplay 是 none，默认隐藏 video 标签；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Ecovertop 是 video 标签默认顶部，隐藏在那里都可以；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EcurrentUrl 开始时为空，也就是说在开始时，视频播放器里是没有地址的。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_b.jpg\&\u003E\u003C\u002Ffigure\u003E再来看一下 tap 事件，直接复制过来三行。前面 page.setdata 是给下面的 data 进行一种更新，这是一种特殊的复制方法。offsettop 这个属性会告诉你当前被点击的元素，相对它的父节点向下挪了多少位置 。currentUrl，就是刚才拿到的 url。后面的 videodisply：block，是指现在可以显示出视频元素了。\u003C\u002Fp\u003E\u003Cp\u003E试一下，页面刷新了，说明更改生效了。可以看到视频播放器已经出现了，而且进度条已经显示出时间了，但是还没有开始播。下一步想办法让它开始播放。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E先看一下微信小程序的的定义：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E微信定义一个方法叫 creatVideoContext，意思是说在传入一个 videoid 时，它会把当前 videoid 的 video 元素与系统的播放器进行绑定，也就是完成这个操作后的你添加的这个元素就可以播了。
\u003C\u002Fp\u003E\u003Cp\u003E微信官方共提供了play、pause、seek、sendDanmu 四种方法。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_b.jpg\&\u003E\u003C\u002Ffigure\u003E看下代码，可以看到 creatVideoContext，传入的参数叫video，就是刚才说布局文件里定义的一个 id 等于 video。
\u003C\u002Fp\u003E\u003Cp\u003E可以发现视频已经开始播了，划动一下列表，视频跟着这个列表在走，第二个视频显示出来后，并没有播放。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E这是我自己发现的微信小程序里 bug，点击第二个视频时不能自动播放，手动点控制条的时候有可能触发播放，这是小程序系统的 bug。但有方法可以绕过：在原来的方法上加两句话，就是设一个 timeout，也就是将这个事件延迟一段时间再出发，点击事件结束之后 500 毫秒再去触发视频的播放。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E微信官方推荐用自带的 IDE 来做开发。但是我平时还会做其它平台的开发，所以会比较倾向统一用 intellij，写好代码后只在微信小程序里做调试。绕过 bug 后可以看到滑视频随着列表滚动可以自动播放了。这样我们基本上完成第二个目标，在列表中播放视频，而且在滚动列表时只有一个视频在播放。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤四：将页面分享给好友\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E在微信小程序官方文档的最后，可以看到有一个关于 onShareAppMessage 的说明，意思是如果你在页面里定义了这个函数，这个函数叫 onShareAppMessage，右上角会出现分享按钮。\u003C\u002Fp\u003E\u003Cp\u003E可以看到，不定义这个函数时，点击右上角会出现“当前页面未设置分享”的提示。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E接下来写这个代码，直接把官方文档抄过来即可，要注意，设置页面元素时，一定要在 page 后的括号中写，也就是说，一定要在 page 页面里设置有关这个页面的系统回调。保存后回到 IDE，点击右上角，会出现分享按钮，可以自定义分享标题与自定义分享描述。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E看一下代码也是这么写的：自定义标题、自定义描述、自定义 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002Fpath\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EPath\u003C\u002Fa\u003E。自定义 path 是最外层还有一个 APP.gaisen，里面定义了所有的页面地址，把页面地址可以写过来后我们今天的任务就完成了。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T07:05:11.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:0,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-df9debccd5bfc78bd629dd34645ee27a_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微信小程序&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&开眼Eyepetizer&}],&adminClosedComment&:false,&titleImageSize&:{&width&:624,&height&:408},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&ycgkk&,&name&:&硬创公开课&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T15:05:11+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[],&summary&:&1月9日，\u003Ca href=\&http:\u002F\u002Fwww.leiphone.com\u002Fnews\u002F2Fri7dDB7Fq0mMj1qh.html\& data-editable=\&true\& data-title=\&微信小程序正式上线\&\u003E微信小程序正式上线\u003C\u002Fa\u003E，互联网迎来了一次狂欢。张小龙在上个月的公开演讲中表示，“\u003Ca href=\&http:\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%E5%B0%8F%E7%A8%8B%E5%BA%8F\& data-editable=\&true\& data-title=\&小程序\&\u003E小程序\u003C\u002Fa\u003E是一种比现有所有 App 更加灵活，更加唾手可得的一种形态，并将无处不在。”作为微信的一种新形态，小程序不仅扩大了微信的生态，也被看作是移动互联网的“革…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-7a113c185c1025193fec_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&人机交互&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&交互设计&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&雷锋公开课，用技术洞见未来，公众号【AI研习社】&,&isFollowing&:false,&hash&:&ba9af5fdb6f04a6a177a674c75731c37&,&uid&:681800,&isOrg&:false,&slug&:&ycgkk&,&isFollowed&:false,&description&:&&,&name&:&机智的大群主&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fycgkk&,&avatar&:{&id&:&v2-387e5271c5aed2dc4c40bc&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&ycgkk&,&name&:&硬创公开课&},&content&:&\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-c45debcfd8d3_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-c45debcfd8d3_r.jpg\&\u003E\u003C\u002Ffigure\u003E无论是开创\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%25E6%2599%25BA%25E8%2583%25BD%25E6%E6%259C%25BA\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E智能手机\u003C\u002Fa\u003E时代的 iPhone，还是如今很热门的 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Fcategory\u002Farvr\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVR\u003C\u002Fa\u003E\u002FAR 和\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%25E4%25BA%25BA%25E5%25B7%25A5%25E6%2599%25BA%25E8%2583%25BD\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E人工智能\u003C\u002Fa\u003E，再到苹果新 Macbook Pro 的亮点 Touchbar。人机交互的创新是消费科技产品进步的核心。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E而在这个领域，近些年最流行概念的大概就是“自然人机交互”了，苹果多点触控交互设计，VR\u002FAR 里的动作捕捉、空间定位，人工\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E智能\u003C\u002Fa\u003E产品时常用到的语音交互，都强调 Intuitive interface，也就是直观、自然的交互体验，不需要太多学习就能上手。\u003C\u002Fp\u003E\u003Cp\u003E但如果要推出一个自然人机交互设计，到底如何才能体现其中的“自然”这个词呢？实际上，雷锋网发现，当下许多号称自然的产品交互，并没有得到用户青睐，为产品加分，反而成为被诟病的对象。\u003C\u002Fp\u003E\u003Cp\u003E如何破解自然人机交互中的自然，是许多产品开发者需要掌握的知识。为此，雷锋网邀请了小小牛创意科技创始人，自然人机交互技术国际专家曹翔，来讲解自然人机交互到底“自然”在哪儿？\u003C\u002Fp\u003E\u003Ch2\u003E嘉宾介绍\u003C\u002Fh2\u003E\u003Cp\u003E曹翔，博士，小小牛创意科技创始人，自然人机交互技术国际专家。曾任微软研究院研究员，联想研究院总监、主任研究员。清华大学计算机系学士，加拿大多伦多大学计算机系硕士、博士，英国剑桥大学Fellow。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-5d8b16ce4ff8e8c7a9a4e_b.jpg\& data-rawwidth=\&400\& data-rawheight=\&600\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Ffigure\u003E以下内容整理自曹翔在硬创公开课的分享。\u003C\u002Fp\u003E\u003Ch2\u003E公开课视频：\u003Ca class=\&video-box\& href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\& target=\&_blank\& data-video-id=\&\& data-video-playable=\&\& data-name=\&113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\& data-poster=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\& data-lens-id=\&\&\u003E
\u003Cimg class=\&thumbnail\& src=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\&\u003E
\u003Cspan class=\&content\&\u003E
\u003Cspan class=\&title\&\u003E113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\u003Cspan class=\&z-ico-extern-gray\&\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&z-ico-extern-blue\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E
\u003Cspan class=\&url\&\u003E\u003Cspan class=\&z-ico-video\&\u003E\u003C\u002Fspan\u003Ehttps:\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\u003C\u002Fspan\u003E
\u003C\u002Fspan\u003E
\u003C\u002Fa\u003E
\u003C\u002Fh2\u003E\u003Cp\u003E自然人机交互（NUI）成了这些年业内的时髦词，手势、语音、触控、眼动……各种新的界面操作方式从实验室里飞进了千家万户。可到底什么样的界面才算得上自然？是不用鼠标键盘，看着很炫的，还是有更微妙的含义？根据自己在人机交互领域研究的经历，以及从同行那里得到的许多启发，聊聊对自然人机交互的理解。\u003C\u002Fp\u003E\u003Ch2\u003E常见的理解\u003C\u002Fh2\u003E\u003Cp\u003E不管是有意识的还是无意识的，谈到自然人机交互，人人心中都有一个或清晰或模糊的理解。这些形形色色的理解都各有各的道理，但往往又有不尽然的地方。要探讨什么样的界面是属于“自然”的，就不妨先从人们常见的一些理解出发，看看它们各自正确和不足的地方在哪里。\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-25ed98a566c5e2abc325f_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-25ed98a566c5e2abc325f_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E自然人机交互等于“新”模态界面吗？\u003C\u002Fp\u003E\u003Cp\u003E的确，许多自然人机交互的成功例子，譬如微软的体感游戏设备（Kinect）、Surface交互桌面和任天堂的Wii游戏等等，都运用了手势、语音、多点触控等交互模态，甚至同时结合了多种模态。那么，是否使用了这些模态的界面就一定是“自然”的？恐怕不尽然。\u003C\u002Fp\u003E\u003Cp\u003E我想不少人都能举出使这些“自然”模态不自然的场景。譬如语音操控：很适合于私人空间，而在公众场合却可能带来尴尬。再如手势界面：大家对电影《少数派报告》中主人公挥舞双手操作大屏幕界面完成每日工作的场景也许不陌生，这几乎成了大众心目中自然手势界面的代表。\u003C\u002Fp\u003E\u003Cp\u003E然而据这一场景的设计者说，在电影拍摄过程中，身体健硕的男主角却因为不堪长时间举着双手的疲劳，不得不用钢丝吊着胳膊完成拍摄。这直接印证了手势界面对于日常工作场合并不一定自然，尽管它在Kinect家庭游戏中早已备受欢迎。相反，一些较为传统的交互模态，譬如鼠标和键盘，在其特有的使用情境中却有着强大的生命力。\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-27d4f07b4fc4c585cda694_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-27d4f07b4fc4c585cda694_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E其实，自然人机交互并不是一个崭新的概念，而是自计算机诞生之日就存在，并不断地发展。作为计算机同行，一定对计算机界面更迭的历史都耳熟能详：从穿孔卡片到命令行再到图形界面，每一代界面的出现都比前一代更为自然和直观，但也都花费了相当长时间才成为主流。\u003C\u002Fp\u003E\u003Cp\u003E与之前的主要针对桌面计算机和工作环境而设计的界面相比，今天的用户界面所面临的是多样化的使用情境：移动、游戏、社交等等不一而足。而在何种情况下选择何种模态进行交互才是最自然的，这是每个人机交互从业者必须面对的问题。\u003C\u002Fp\u003E\u003Ch3\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-9dfcea67457_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-9dfcea67457_r.jpg\&\u003E\u003C\u002Ffigure\u003E自然人机交互等于模仿人的界面吗？\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-922a85fa4a_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-922a85fa4a_r.jpg\&\u003E\u003C\u002Ffigure\u003E在科幻电影中，经常会出现计算机模仿人的语音与用户进行交流的场景，有时计算机甚至会模拟人的形象，以虚拟助手的形式出现在屏幕上或现实世界中。\u003C\u002Fp\u003E\u003Cp\u003E无疑，这样的拟人化界面可以让用户与计算机交流就像与他人交往一样，很多情况下的确会感觉更为自然和亲切，甚至有可能在人与计算机间建立情感上的联系。它特别适用于用户其它交互渠道（譬如手眼）被占用，或是需要计算机提供智能化帮助的时候。\u003C\u002Fp\u003E\u003Cp\u003E但这种方式也有局限，在日常生活中，许多时候我们所做的事情并非与人交流，而是直接去操纵物理世界：比如直接拿起筷子吃饭就会比告诉别人怎么把食物喂到嘴里更为自然。同理，对于某些活动，用户直接操控界面也会比间接地通过拟人化交流更为自然和高效。\u003C\u002Fp\u003E\u003Ch2\u003E自然人机交互等于模仿物理世界的界面吗？\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-ab69b4b37aa5b5e73a5cd_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-ab69b4b37aa5b5e73a5cd_r.jpg\&\u003E\u003C\u002Ffigure\u003E那是不是模仿人与物理世界交互方式的界面就更加自然？实际上，当前通行的许多界面模式，都是建立在物理世界概念的基础上的，比如Windows图形界面和文件夹组织结构，就是对真实办公桌的一种模仿。还有不少研究人员探索了如何把物理模型引入用户界面用于驱动交互的过程，甚至把真实物体作为界面的一部分，通过操作物理实体与计算机进行交互，即实体用户界面（tangible user interface）。\u003C\u002Fp\u003E\u003Cp\u003E这些基于物理世界规则的界面能让用户完全地按照操作真实物体的方式与计算机交互，省去了不少学习时间，在一定意义上提供了最大限度的自然。\u003C\u002Fp\u003E\u003Cp\u003E但如果纯粹模仿物理世界，也会遇到瓶颈，那就是真实世界本身受到各种物理定律和客观条件制约，我们在复制它的种种直观属性的同时，也复制了它的种种限制与不便。这在某些情况下恰恰牺牲了计算机的灵活性，使用户失去了软件界面本来所能提供的自由空间。\u003C\u002Fp\u003E\u003Cp\u003E而在这一点上，大家熟悉的多点触控界面中用两个手指操作图片或者其它虚拟物体的手势，并没有拘泥于物理操作，而是在平移和旋转这两个完全符合物理常规的操作之中，加入了缩放这一在真实世界几乎不可能的操作，形成了一个无缝的自然交互方式——多数用户在使用它的时候可能甚至从来没有意识到这一点。可以说，自然人机交互应当源于真实，高于真实。\u003C\u002Fp\u003E\u003Ch3\u003E自然人机交互等于不用输入设备的界面吗？\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-53d832e19ed80c267b0f_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-53d832e19ed80c267b0f_r.jpg\&\u003E\u003C\u002Ffigure\u003E如果我们关注最近的一些被称为自然人机交互的产品，无论是使用手势、语音、触控，甚至是脑电波，他们的共性似乎是不需要专门的输入工具，而用身体的某一部分来直接进行操作。这是否是一切自然人机交互的大势所趋？\u003C\u002Fp\u003E\u003Cp\u003E一方面，人的手和身体本身就是极为灵活的工具，不需辅助就可以胜任许多通用型的任务，这正是今天许多无需输入设备界面的基础；但另一方面，物理工具的发明恰恰标志着人类的进化。\u003C\u002Fp\u003E\u003Cp\u003E各式各样的工具造就了人类从事各种专门活动的能力，而每一种工具的设计和使用方法都最大可能地为其支持的活动做了专门的优化，本身就是“自然人机交互”的典范。\u003C\u002Fp\u003E\u003Cp\u003E最好的例子莫过于形形色色的笔：比起用手指写字，用笔写字实际上更好地利用了人多个手指灵活配合和控制的能力，大大提高了书写的准确和丰富性。同样的道理，在今天的计算机使用中，特别是对于许多专门性的活动，一套设计合理的输入设备（例如数字笔）也可以延展人的能力，从而提供更加自然的界面。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E上述各种理解有一个共性，那就是它们都是将某一类特定的交互模式等同于自然人机交互。\u003C\u002Fstrong\u003E而实际上，“自然”并不是一个绝对的概念，无法抛开情境来下结论。上述提到或没提到的每一种交互模式都在某些使用情境中成为自然界面的典范，但在另一些情境下却又可能显得不那么自然。\u003C\u002Fp\u003E\u003Cp\u003E在尚未了解界面所要支持的用户、活动和环境的前提下，几乎无从判断它的自然与否。正如人机交互研究的一位先驱比尔o巴克斯顿(Bill Buxton)所说，“不论是什么东西，都对某些事情最好，而对另一些事情最糟。”\u003C\u002Fp\u003E\u003Ch2\u003E那么，自然人机交互能否有一个普适的标准？\u003C\u002Fh2\u003E\u003Cp\u003E一些研究人机交互的同行提出了一个有趣的问题：自然用户界面这个词，究竟是自然的“用户界面”还是“自然用户”的界面？乍看起来这是个文字游戏，答案也许并不重要。但这个问题的提出，为回答前一个问题指出了一条方向，那就是对自然人机交互的衡量，并非取决于界面的交互模式，而是取决于用户自身的体验。\u003C\u002Fp\u003E\u003Ch3\u003E自然源于体验\u002F经验\u003C\u002Fh3\u003E\u003Cp\u003E在英文中experience既有体验又有经验的意思。而在讨论自然的用户体验时，正要从用户的经验说起。这乍听似乎有些矛盾：自然人机交互不应该要求用户没有任何经验吗？不错，对界面本身而言，让用户在没有经验的前提下上手，让学习过程尽量缩短，这正是自然人机交互的主要优势之一。而这里要谈的，是另一种经验——对现实生活的经验。\u003C\u002Fp\u003E\u003Cp\u003E具体解释之前，先讲讲我的两位人机交互同行亲身经历的故事。\u003C\u002Fp\u003E\u003Cp\u003E一位印度的同行为当地用户设计了一组用数字笔操作的界面。在进行用户测试时，他对其中一位用户说：“请拿起笔碰一下屏幕。”出乎他意料的是，这一看起来十分简单自然的操作，居然出了问题：这位用户没有用笔尖，而是把笔横过来整个贴在了屏幕上！经询问才知道原来他不识字，也从没用过笔。\u003C\u002Fp\u003E\u003Cp\u003E而另一位欧洲的同行为家庭用户在交互桌面上开发了一套软件，包括一些直观的手势交互，例如用两个手指相反方向移动做打开的手势来打开一个虚拟的储物箱。当他向用户家庭演示时，他想考考这个家中正上小学的孩子：“你试试看怎么打开这个箱子？”孩子二话不说，直接用食指在箱子上双击！\u003C\u002Fp\u003E\u003Cp\u003E从这两个例子可以明显地看出，对于用户而言什么是自然并不等于与生俱来，而是在很大程度上取决于它们之前的生活经验：前者因为没有用笔的经验，“自然”的操作对他毫无自然可言；而后者由于从小与电脑和鼠标打交道，“不自然”的操作对他却是再自然不过。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-11e7bcc2fe0e66f8d997b85b_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-11e7bcc2fe0e66f8d997b85b_r.jpg\&\u003E\u003C\u002Ffigure\u003E同样的道理，我们平时觉得自然的事情，不论书写、语言、手势，还是触摸，恰恰是来自于若干年积累下来的经验或者有意识无意识的人为训练，当然也包括对真实世界物理规律的经验，和对已有计算机界面模式的经验。这些训练和经验，有些是较为广泛地为所有人所共享的，比如物理规律；而有些则与用户所属的社会文化群体息息相关，正像上边所举的两个例子。\u003C\u002Fp\u003E\u003Cp\u003E由此可见，如果想让用户尽快上手，恰恰要建立在用户已有生活经验的基础之上。缩短了的界面学习过程，正是因为借用了此前若干年用户学习其它相关事物的过程。于是，了解目标用户群体已有的经验，并试图让交互方式与这些经验相一致，就成了设计自然人机交互的关键。\u003C\u002Fp\u003E\u003Cp\u003E实际上，在人机交互中非常强调的“隐喻（metaphor）”概念，正可看成是这种思想的一种体现。隐喻指的是把用户界面中的概念比拟为一种人们熟悉的概念或现象，用于解释其交互方式，例如将图形界面元素比喻为大家熟悉的桌面、窗口等等。隐喻越贴切，越为用户熟悉，往往就意味着界面越自然。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-cfd609a0d744b10be8e23bf0_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-cfd609a0d744b10be8e23bf0_r.jpg\&\u003E\u003C\u002Ffigure\u003E当然，界面设计不可能也不应当完全局限于人们已有的经验。有时，界面所涉及的活动并没有直接对应的现实经验可以借鉴；有时，拘泥于已有经验会失去了界面设计的灵活性和创新空间。\u003C\u002Fp\u003E\u003Cp\u003E如何确保用户界面在超越已有经验的同时，又不失其自然呢？这里要涉及到人机交互中另一个与用户经验息息相关的概念，即思维模型（mental model）。它是用户脑中对所进行的具体活动机制的一个抽象，源于经验，又高于经验。\u003C\u002Fp\u003E\u003Cp\u003E还以多点触控中的两指操纵手势为例，根据物理经验，真实的物体无法被缩放，但基于平移和旋转的经验，用户抽象出的思维模型则是无论手指怎样移动，物体上固定的两个点始终对应于两个手指的位置。缩放操作正是这一思维模型的直接的推广，而这也是广大用户在使用这一操作时没有感到任何不自然的原因。\u003C\u002Fp\u003E\u003Cp\u003E由此可见，理解用户已有的思维模型，并加以外推，不失为设计自然人机交互的有效方法，也可以覆盖大量的用户原本没有经验或预期的使用情境。这样设计出的界面可以说是“情理之中，意料之外”。\u003C\u002Fp\u003E\u003Cp\u003E基于这些讨论，不妨试着给自然人机交互一个定义：\u003Cstrong\u003E自然人机交互是与目标用户群体在预期使用情境下已有的经验或思维模型相符的用户界面。\u003C\u002Fstrong\u003E虽然与许多常见理解相比，这个定义少了“新”和“炫”的成分，但它在某种意义上也许更加贴合自然的本义：往往是“无招胜有招”，一个理想的自然人机交互应当能让用户的注意力完全集中在所要从事的活动上，而忘记界面本身的存在，或者说，界面变得“透明”了。\u003C\u002Fp\u003E\u003Ch2\u003E实践尝试\u003C\u002Fh2\u003E\u003Cp\u003E下面介绍一些我们在自然人机交互研究方面的尝试。虽然这些例子未必在自然方面做到了完美，但希望能以它们来直观地映证前文的一些思路。 \u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-eff86ee02e6690dcbf733_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-eff86ee02e6690dcbf733_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch3\u003E所握即所得的数字笔\u003C\u002Fh3\u003E\u003Cp\u003E数字笔在设计、艺术等行业内广泛采用，相比鼠标等其他输入设备，对于从事视觉创作人群的自然性不言而喻。但今天的数字笔已经完全自然了吗？如果我们看看现实中这些人群用于创作的物理工具，却远不止一支笔这么简单。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-7cef168c3def1e6dfd6edb_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-7cef168c3def1e6dfd6edb_r.jpg\&\u003E\u003C\u002Ffigure\u003E他们要用到的有钢笔、毛笔、素描铅笔、刻刀、尺子等等工具。虽然这些工具形状相仿，却每一件都是为了特殊的功能而专门设计的，让使用者用起来得心应手，最为自然。\u003C\u002Fp\u003E\u003Cp\u003E虽然从软件上用同一支数字笔在画板上模拟各种工具的功能并不困难，但却在一定程度上缺失了每件物理工具使用的自然性。专用工具的自然，与通用工具的便利，有时看起来确实是一对矛盾。如何在这两者间取得平衡？答案依然要来自对现实经验的观察：当人们使用物理工具时，手握的方式都不尽相同，钢笔和毛笔的不同握法就是最好的例子。\u003C\u002Fp\u003E\u003Cp\u003E而每种握法，也正是为了最舒适地完成相应的功能而优化的结果，这些握法本身就是自然性的体现。由此，如果我们能在同一支数字笔上，通过识别用户不同的握法来自动提供不同的功能，那么用户就不必再刻意地选择不同的工具（无论物理工具或是虚拟工具），而只需要关注想要完成的功能，相应转换到最为自然的握法，便可以直接开始使用这一种功能。\u003C\u002Fp\u003E\u003Cp\u003E这样，用户不管从思维上还是操作上都跳过了工具选择这一步，可以说，工具变得“透明”了。基于这一想法，我们研制了一支“所握即所得的数字笔”，通过在笔上附加多点触摸和方向的传感器，可以识别出用户十余种不同的握法，并在数字画板上提供相应的功能：钢笔、毛笔、印章……甚至超出视觉创作的范畴，譬如模拟笛子等不同的乐器，从而使用户使用数字笔的体验更为自然和丰富。
\u003C\u002Fp\u003E\u003Ch2\u003EShapeTouch: 从多点触控到形状触控\u003C\u002Fh2\u003E\u003Cp\u003E多点触控中的两指操纵手势作为自然人机交互设计的范例，本身也面临着挑战。试想一下，如果不是在触摸屏或交互桌面上，而是在物理世界中操纵真实物体时也同样只用两个手指去移动和旋转，是否还那么自然？\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-ecee712bac77_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-ecee712bac77_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E人手是一件极为灵活的工具，我们在与物理世界交互时，会根据物体的特性（形状、重量等）和操作的目的（精细或是粗略，局部或是整体，等等）而采取不同的接触方式。我们的手能够完成的极其丰富的操作，远远超过多“点”触控的范畴。\u003C\u002Fp\u003E\u003Cp\u003E那么，怎样才能让对虚拟物体的触控操作也像物理世界中那样丰富而自然？关键在于对于触摸输入的理解不能再简单地将其抽象为多“点”}
\u003Cimg class=\&thumbnail\& src=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\&\u003E
\u003Cspan class=\&content\&\u003E
\u003Cspan class=\&title\&\u003E113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\u003Cspan class=\&z-ico-extern-gray\&\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&z-ico-extern-blue\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E
\u003Cspan class=\&url\&\u003E\u003Cspan class=\&z-ico-video\&\u003E\u003C\u002Fspan\u003Ehttps:\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\u003C\u002Fspan\u003E
\u003C\u002Fspan\u003E
\u003C\u002Fa\u003E
\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E下文为雷锋网整理的本次公开课直播分享中的要点。课后陈凯老师还分享了本次课程中完成的 demo，关注雷锋网(公众号：雷锋网)「唯物 」公众号（ID：okweiwu），回复「 小程序」即可获取链接。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E今天主要讲一下微信小程序的开发，希望通过直播开发一个「开眼」视频的小程序，帮大家了解微信小程序的开发步骤、流程以及基本 API 的使用，内容主要包括以下几个方面：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E开发一个可滚动列表，在这个列表的制作中，我们会熟悉微信小程序数据绑定的方法，以及怎么样发起一个网络请求；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E处理点击事件，通过这一操作了解微信是怎样做事件绑定的；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E在列表的指定位置，展现一个视频播放器，通过这一操作了解微信小程序给我们的视频标签是怎样使用的；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E将页面分享给好友，在好友对话里可以看到制作的微信小程序。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E大家可以看到「开眼」视频小程序就是一个简单的列表，列表中的每一个画面其实都是一个可以点开播放的视频。进一步分析可以得知，在我们看到的每一个视频封面图上有一个 icon，图下面是这个视频的文字介绍，标题以及分类。继续向下拉会发现，有多少视频，就会显示多个元素，并且是刷新不到头的。当我们点击一个视频封面或播放按钮 icon 时，视频会开始播放，接着点击播放第二视频时，第一个视频就会自动停止播放，以上就是我们这堂课想要完成的事情。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f2a88e987dc2b1fc2ce8a9_b.jpg\& data-rawwidth=\&270\& data-rawheight=\&480\& class=\&content_image\& width=\&270\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='270'%20height='480'&&\u002Fsvg&\& data-rawwidth=\&270\& data-rawheight=\&480\& class=\&content_image lazy\& width=\&270\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f2a88e987dc2b1fc2ce8a9_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤一：开发一个可滚动列表\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E由于时间关系，本次直播不会从零开始做这款小程序，会直接从微信的 demo （小程序组件）中开始操作。\u003C\u002Fp\u003E\u003Cp\u003E这是微信小程序官方给出的一个 demo，可以看到有两个 tab，今天的操作主要是在第二个 tab 的右边再添加一个 tab，在第三个 tab 中实现一个跟「开眼」视频小程序一样的功能。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2adf9db6ae8_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E可以看到 pages 列表内容非常多，其内容主要是定义或声明一下在这个小程序中会用到一些界面。windows 花括号里面的一些选项是帮你定义 tool bar 上的颜色和信息，可以在这个页面看到demo 中 toolbar 的颜色就在这里设置的。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a6ddfad613_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E在 tab bar 里新加一个“开眼视频”文件夹，配置地址是刚刚写好的，抄过来就好，配制完成可以看到左边的页面已经出来了，虽然没有内容，但第三个 tab 的框架已经完成了。接下来是继续开发这个 tab，我一般会直接从之前写好的代码里复制过来，然后进行一些简单的修改，演示一下变化过程。\u003C\u002Fp\u003E\u003Cp\u003E注意要把相关文件名也改成“开眼视频”，否则会出现找不到布局文件的情况发生。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4e23905fb8bfeff63465a7c_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E文件夹名称改完后，可以看到刚在第三个 tab 里添加的内容，已经可以显示出来了，这是一个微信小程序官方 audio 的页面，还需要对这个页面进行一些改动。\u003C\u002Fp\u003E\u003Cp\u003E首先写一下这个页面的布局文件，把没有用的布局文件删掉，在最上层定义一个 view，进行最外层的展示，然后会加一个 image 标签，这个标签主要的功能是展示刚才看到的 cover 图（由于时间关系，直播时省略了敲代码步骤，直接从之前的文件中拷贝）。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-353c857f6db46e98e0a52f74bfcb2f70_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E解释一下拷过来的这几行代码。第一代码是 WX : for,前面 WX 是微信的简称，后面的 for 是说，它会在你的 JS 文件里找到一个名字叫 videos 的变量，该变量是一个数组，image 这个便签会重复多次，直到和 videos 数组长度一致。\u003C\u002Fp\u003E\u003Cp\u003E后面 for-item 标签是指，每一个 image 标签可以通过 video 变量名拿到和它绑定在一起的视频数据，例如下面 video.coverForFeed 就是把当前绑定的视频数据中 coverForFeed 字段赋值给 image 的 src。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-28fc387f14c49f4385f3_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E接下来看下 GS 的写法，先定义一个 videos，也就是刚刚在布局文件里声明需要的，这个 videos 会在 onload 里赋值。解释一下 onload 这个方法：页面被加载的时候，onload 会被调用。在微信小程序官方开发文档中也可以看到这个方法的相关声明，其中：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003Eonload 是页面被加载；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eonready 是第一次渲染完毕；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eonshow 是监听事件显示；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eonhide 是监听页面被隐藏。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-4eacfe72e4_b.jpg\&\u003E\u003C\u002Ffigure\u003E如果有前端开发经验的话，可以看到跟 window 的很多页面很像.最常用的是 onload，再仔细看一下这个方法的使用，在这个地方会尝试调用一个叫 load 的方法，并且把“我们自己”传进去，再传一个options。解释一下 options，举个简单的例子，如果想调一个这样的配置，可以看到它的 url＝page\u002Fitem\u002Fitem，后面会带一个参数，参数名叫 id 值等于 1，这个方法是在调用者那边使用的，被调用者也就是被唤起的页面怎么样读到这个 id 等于 1 的参数呢？是通过 const id ＝ options.id 这个代码，options 相当于页面间传递参数传递的一个工具。
\u003C\u002Fp\u003E\u003Cp\u003E再看下 load 的方法，一行一行的来看，第一行 pages 和 options 是两个传参，第二行 wx.ewqiest 是发送一个 API 请求，注意，小程序官方文档里的对 wx.ewqiest 的定义是发送一个 HTTPS 请求，现在是本地操作，如果是线上环境的话，一定要写成 HTTPS，否则会被拦截。完整示例写法如下：\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-457bce62cd7c_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003Eurl 是请求的地址；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Edata 是 url 里的参数，也就是我们传进去的参数；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eheader 是我们发送 HTTPS 请求的时候所带的 header；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Esuccess 当发送成功时，这个方法会被回掉；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Efail 当请求失败时，会回调这个方法，通知你失败的原因。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E再回到开发页面，video：videoData 是说把本地变量变为配置的参数，要注意的是微信小程序和 Vue 不同，小程序的数据不是双向绑定的，或者说不是默认双向绑定的，如果数据或数据结构发生了改变，想通知到 video 层级上，让 video 去刷新，必须要通过 page 中的 setdata 来实现。也就是说必须要这样写， videos 才会生效（video＝videoData 的形式不不会生效）。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6d4e3e927e84bf28079dd_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E现在已经把简单的列表写好了，回到微信小程序的开发列表里可以看到，已经显示出了我们想要的效果，我们请求到了 6 个视频，界面上显示了六个 cover 图。微信会对 image 标签有默认的高和宽（240＊320 像素），所以需要对图片进行微调。\u003C\u002Fp\u003E\u003Cp\u003E接着写 css，微信的 css 语法和标准的 css 语法几乎没有区别，只是有一些子集不支持，这些在微信的开发文档里也有写，但是我们一般用到的都有。需要额外讲下 rpx，这是微信小程序里自己定义的一个属性。这个属性的定义是说它认为所有屏幕的宽都是 750 个 rps，也就是说，你拿到一台 iphone 5 和一台 iphone 6S，它的宽都是750 rpx。\u003C\u002Fp\u003E\u003Cp\u003E但是会反过来算一个像素等于多少 rpx，在 iphone5 里，假如说一个像素等于一个 rpx的话，在 iphone 6 里，两个像素等于一个 rpx。这样做的好处是降低了 UI 的适配成本。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E到这里本堂课的第一个目标已经完成，已经开发完成了一个可滚动的列表，并熟悉了数据绑定和网络请求。 \u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤二：处理点击事件\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E接下来要处理一个点击事件，点击事件触发之后，会在图片原来的位置展示一个视频播放器，并且播放图片所代表的视频。\u003C\u002Fp\u003E\u003Cp\u003E先看一下微信小程序定义的的事件绑定过程是怎样的：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E在组件中绑定一个事件处理函数，如 bindtap，这个用户在点击组件的时候，就会出发到这个 video 的 bindtap。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-2a1f3e5dace81a2bc9b00a2_b.jpg\&\u003E\u003C\u002Ffigure\u003E高亮的这几行意思是我把一个函数 tapname 绑在 video 标签的点击上。也就是说当前这个 video 标签被点击时，系统会调用名字为 tapname 的方法，并且把当前 video 的一些参数传到这个 tapname 函数里。\u003C\u002Fp\u003E\u003Cp\u003E接下来在项目里定义一个绑定，把 image 的点击事件绑定在一个 onTap 的方法上。接下来要在 JS 里实现这个 onTap 的方法。\u003C\u002Fp\u003E\u003Cp\u003E在 JS 里 onload 下面，重起一行接着写 onTap：function (element)，微信小程序官方文档中对 element 的定义中包涵了几个属性：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003Etype （事件类型）；\u003C\u002Fp\u003E\u003Cp\u003EtimeStamp（事件生成时的时间戳）\u003C\u002Fp\u003E\u003Cp\u003Etarget（触发事件组件的一些属性值结合）\u003C\u002Fp\u003E\u003Cp\u003EcurrentTarget（当前时间的一些属性值集合）\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E接下来要实现一个方法叫 tap，它需要两个传参，第一个是 page，第二个是 element。page 就是 this，element 就是刚刚定义的 element，传进来后可以看到这个方法就被调用了。打一个 log 可以看到以下结果。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fe9b4dcff5c71bc8e216f4_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E每点一次，下面都会出现一个 tap，也就是说已经成功的把 video 上的事件传递到了 JS 的处理函数中。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ad288ece93d042c5f1f072e_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E第一段代码中的 element 就是刚刚传过来的被点击元素，currenttarget 是当前被点击的目标… 重点讲下videoUrl，videoUrl 是刚在开发中定义的一个内容，不是系统自带的，看下它是从哪里来的\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-f77cbd4fddfbba589ad79_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003Edata-video-id 的意思是把当前视频 id 附给 image 标签，作为这个 image 标签上的属性，当点击一个 image 标签是，JS 可以从传入的 element 中读到这个值。\u003C\u002Fp\u003E\u003Cp\u003E因为列表里有 6 个标签，所以必须要知道当前点击的标签是什么，以及当前被点击的标签上绑定的 video 数据，来决定后面需要播哪一个视频。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-26dc41dbdc5_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003Eid 我们用不到，先删去。上面的写法是 -video-url 这个地方写成 videoUrl 略有不同。原因是微信小程序会帮开发者们做一件事情，把 data 和后面的横线去掉，然后自动驼峰。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-5d23f31d94aa42b6d4fe812e237a2723_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E上面这句话的意思是从被点击的 element 中拿到当前标签绑定的 video 的播放 url 是什么。可能很多做前端的同学心里会有疑问，为什么要费这么大劲去拿，而不通过一些其它的手段。因为微信小程序废除了 document，以及 window 的很多方法，目的是让小程序变成纯数据驱动的编程思想，也就是说所有的事件和所有的数据，一定是以事件或者是消息这样的方式来传递的，开发者没有办法主动的去拿到当前显示的 video。\u003C\u002Fp\u003E\u003Cp\u003E举一个简单的例子，如果在页面加载完后，设一个 timer 定时器，每五秒中告知当前列表中展示的第一个元素是什么，这个在小程序里做不到。因为没有办法主动拿到当前列表这个元素，也就没办法拿到列表上展示的内容，只有一种办法，用户手动触发了一个事件时，开发者才可能拿到这个事件相关的（并不是所有的）一些信息。\u003C\u002Fp\u003E\u003Cp\u003E为了取到当前被点击的这个 item 上面绑定的 video 的播放地址，要通过这种方式来实现，而不能通过其它的方式来实现，这个确实有点绕。\u003C\u002Fp\u003E\u003Cp\u003E这个思想在微信小程序里可以说是最重要的思想，也就是 DOM 模型几乎完全不能用。这个可能给很多前端开发带来非常大的困扰。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤三：在列表指定位置展示视频播放器\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E接着来看一下，现在还要做另外一件事，要在界面里加一个 video 标签，id 叫 video，class 叫 video，这样写主要是为了一会儿 CSS 绑定用。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-17c02ebb45e02c78fa9b75_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E后面它的 style 写法，第一是 display，为什么用这个属性，据我个人的经验，在微信里如果想隐藏一个 video 标签，只有这一种方法可以隐藏，也就是说 display 属性设成 none，才可以把 video 隐藏，visibility hidden 方式都不行。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-6f22b11add251ed21d4a_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003Etop 就是说这个视频标签在列表中距离顶端的位置，所有带两层大括号的东西都是引用到 JS 里的变量，两个变量一个是 covertop，一个是 videoDisply，src 是 currentUrL，就是说 video 播放地址是什么，这也是第三个变量。
\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-695ddc85ad7d17967edf4ccea70c7200_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E对上面三个变量做个定义：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003EvideoDisplay 是 none，默认隐藏 video 标签；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Ecovertop 是 video 标签默认顶部，隐藏在那里都可以；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EcurrentUrl 开始时为空，也就是说在开始时，视频播放器里是没有地址的。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-e457c992f0baca643de8_b.jpg\&\u003E\u003C\u002Ffigure\u003E再来看一下 tap 事件，直接复制过来三行。前面 page.setdata 是给下面的 data 进行一种更新，这是一种特殊的复制方法。offsettop 这个属性会告诉你当前被点击的元素，相对它的父节点向下挪了多少位置 。currentUrl，就是刚才拿到的 url。后面的 videodisply：block，是指现在可以显示出视频元素了。\u003C\u002Fp\u003E\u003Cp\u003E试一下，页面刷新了，说明更改生效了。可以看到视频播放器已经出现了，而且进度条已经显示出时间了，但是还没有开始播。下一步想办法让它开始播放。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-9d438b2e7ecb2b094b38ad_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E先看一下微信小程序的的定义：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E微信定义一个方法叫 creatVideoContext，意思是说在传入一个 videoid 时，它会把当前 videoid 的 video 元素与系统的播放器进行绑定，也就是完成这个操作后的你添加的这个元素就可以播了。
\u003C\u002Fp\u003E\u003Cp\u003E微信官方共提供了play、pause、seek、sendDanmu 四种方法。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-60aeeaeb1ea1ea5e23eb646befb5b977_b.jpg\&\u003E\u003C\u002Ffigure\u003E看下代码，可以看到 creatVideoContext，传入的参数叫video，就是刚才说布局文件里定义的一个 id 等于 video。
\u003C\u002Fp\u003E\u003Cp\u003E可以发现视频已经开始播了，划动一下列表，视频跟着这个列表在走，第二个视频显示出来后，并没有播放。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5efacc2b78b984_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E这是我自己发现的微信小程序里 bug，点击第二个视频时不能自动播放，手动点控制条的时候有可能触发播放，这是小程序系统的 bug。但有方法可以绕过：在原来的方法上加两句话，就是设一个 timeout，也就是将这个事件延迟一段时间再出发，点击事件结束之后 500 毫秒再去触发视频的播放。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fcf5b6ac63cf98151a27ec_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E微信官方推荐用自带的 IDE 来做开发。但是我平时还会做其它平台的开发，所以会比较倾向统一用 intellij，写好代码后只在微信小程序里做调试。绕过 bug 后可以看到滑视频随着列表滚动可以自动播放了。这样我们基本上完成第二个目标，在列表中播放视频，而且在滚动列表时只有一个视频在播放。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E｜\u003C\u002Fstrong\u003E\u003Cstrong\u003E步骤四：将页面分享给好友\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E在微信小程序官方文档的最后，可以看到有一个关于 onShareAppMessage 的说明，意思是如果你在页面里定义了这个函数，这个函数叫 onShareAppMessage，右上角会出现分享按钮。\u003C\u002Fp\u003E\u003Cp\u003E可以看到，不定义这个函数时，点击右上角会出现“当前页面未设置分享”的提示。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-cd0c290978_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E接下来写这个代码，直接把官方文档抄过来即可，要注意，设置页面元素时，一定要在 page 后的括号中写，也就是说，一定要在 page 页面里设置有关这个页面的系统回调。保存后回到 IDE，点击右上角，会出现分享按钮，可以自定义分享标题与自定义分享描述。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-664faa0fa53b9_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4e532ccbddaf0b_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E看一下代码也是这么写的：自定义标题、自定义描述、自定义 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002Fpath\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EPath\u003C\u002Fa\u003E。自定义 path 是最外层还有一个 APP.gaisen，里面定义了所有的页面地址，把页面地址可以写过来后我们今天的任务就完成了。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='740'%20height='417'&&\u002Fsvg&\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&740\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-4b63cc2e651310ebbdb54ce7ab000edf_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T07:05:11.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:0,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-df9debccd5bfc78bd629dd34645ee27a_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微信小程序&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&开眼Eyepetizer&}],&adminClosedComment&:false,&titleImageSize&:{&width&:624,&height&:408},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&ycgkk&,&name&:&硬创公开课&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T15:05:11+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[],&summary&:&1月9日，\u003Ca href=\&http:\u002F\u002Fwww.leiphone.com\u002Fnews\u002F2Fri7dDB7Fq0mMj1qh.html\& data-editable=\&true\& data-title=\&微信小程序正式上线\&\u003E微信小程序正式上线\u003C\u002Fa\u003E，互联网迎来了一次狂欢。张小龙在上个月的公开演讲中表示，“\u003Ca href=\&http:\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%E5%B0%8F%E7%A8%8B%E5%BA%8F\& data-editable=\&true\& data-title=\&小程序\&\u003E小程序\u003C\u002Fa\u003E是一种比现有所有 App 更加灵活，更加唾手可得的一种形态，并将无处不在。”作为微信的一种新形态，小程序不仅扩大了微信的生态，也被看作是移动互联网的“革…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-7a113c185c1025193fec_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&人机交互&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&交互设计&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&雷锋公开课，用技术洞见未来，公众号【AI研习社】&,&isFollowing&:false,&hash&:&ba9af5fdb6f04a6a177a674c75731c37&,&uid&:681800,&isOrg&:false,&slug&:&ycgkk&,&isFollowed&:false,&description&:&&,&name&:&机智的大群主&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fycgkk&,&avatar&:{&id&:&v2-387e5271c5aed2dc4c40bc&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&ycgkk&,&name&:&硬创公开课&},&content&:&\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-c45debcfd8d3_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-c45debcfd8d3_r.jpg\&\u003E\u003C\u002Ffigure\u003E无论是开创\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%25E6%2599%25BA%25E8%2583%25BD%25E6%E6%259C%25BA\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E智能手机\u003C\u002Fa\u003E时代的 iPhone，还是如今很热门的 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Fcategory\u002Farvr\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVR\u003C\u002Fa\u003E\u002FAR 和\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002Ftag\u002F%25E4%25BA%25BA%25E5%25B7%25A5%25E6%2599%25BA%25E8%2583%25BD\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E人工智能\u003C\u002Fa\u003E，再到苹果新 Macbook Pro 的亮点 Touchbar。人机交互的创新是消费科技产品进步的核心。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E而在这个领域，近些年最流行概念的大概就是“自然人机交互”了，苹果多点触控交互设计，VR\u002FAR 里的动作捕捉、空间定位，人工\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.leiphone.com\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E智能\u003C\u002Fa\u003E产品时常用到的语音交互，都强调 Intuitive interface，也就是直观、自然的交互体验，不需要太多学习就能上手。\u003C\u002Fp\u003E\u003Cp\u003E但如果要推出一个自然人机交互设计，到底如何才能体现其中的“自然”这个词呢？实际上，雷锋网发现，当下许多号称自然的产品交互，并没有得到用户青睐，为产品加分，反而成为被诟病的对象。\u003C\u002Fp\u003E\u003Cp\u003E如何破解自然人机交互中的自然，是许多产品开发者需要掌握的知识。为此，雷锋网邀请了小小牛创意科技创始人，自然人机交互技术国际专家曹翔，来讲解自然人机交互到底“自然”在哪儿？\u003C\u002Fp\u003E\u003Ch2\u003E嘉宾介绍\u003C\u002Fh2\u003E\u003Cp\u003E曹翔，博士，小小牛创意科技创始人，自然人机交互技术国际专家。曾任微软研究院研究员，联想研究院总监、主任研究员。清华大学计算机系学士，加拿大多伦多大学计算机系硕士、博士，英国剑桥大学Fellow。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-5d8b16ce4ff8e8c7a9a4e_b.jpg\& data-rawwidth=\&400\& data-rawheight=\&600\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Ffigure\u003E以下内容整理自曹翔在硬创公开课的分享。\u003C\u002Fp\u003E\u003Ch2\u003E公开课视频：\u003Ca class=\&video-box\& href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\& target=\&_blank\& data-video-id=\&\& data-video-playable=\&\& data-name=\&113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\& data-poster=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\& data-lens-id=\&\&\u003E
\u003Cimg class=\&thumbnail\& src=\&\u002F\u002Fshp.qpic.cn\u002Fqqvideo_ori\u002F0\u002Fpu_228_128\u002F0\&\u003E
\u003Cspan class=\&content\&\u003E
\u003Cspan class=\&title\&\u003E113期：直播小程序开发，1小时从入门到上手 | 硬创公开课 - 腾讯视频\u003Cspan class=\&z-ico-extern-gray\&\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&z-ico-extern-blue\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E
\u003Cspan class=\&url\&\u003E\u003Cspan class=\&z-ico-video\&\u003E\u003C\u002Fspan\u003Ehttps:\u002F\u002Fv.qq.com\u002Fx\u002Fpage\u002Fpu.html\u003C\u002Fspan\u003E
\u003C\u002Fspan\u003E
\u003C\u002Fa\u003E
\u003C\u002Fh2\u003E\u003Cp\u003E自然人机交互（NUI）成了这些年业内的时髦词，手势、语音、触控、眼动……各种新的界面操作方式从实验室里飞进了千家万户。可到底什么样的界面才算得上自然？是不用鼠标键盘，看着很炫的，还是有更微妙的含义？根据自己在人机交互领域研究的经历，以及从同行那里得到的许多启发，聊聊对自然人机交互的理解。\u003C\u002Fp\u003E\u003Ch2\u003E常见的理解\u003C\u002Fh2\u003E\u003Cp\u003E不管是有意识的还是无意识的，谈到自然人机交互，人人心中都有一个或清晰或模糊的理解。这些形形色色的理解都各有各的道理，但往往又有不尽然的地方。要探讨什么样的界面是属于“自然”的，就不妨先从人们常见的一些理解出发，看看它们各自正确和不足的地方在哪里。\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-25ed98a566c5e2abc325f_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-25ed98a566c5e2abc325f_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E自然人机交互等于“新”模态界面吗？\u003C\u002Fp\u003E\u003Cp\u003E的确，许多自然人机交互的成功例子，譬如微软的体感游戏设备（Kinect）、Surface交互桌面和任天堂的Wii游戏等等，都运用了手势、语音、多点触控等交互模态，甚至同时结合了多种模态。那么，是否使用了这些模态的界面就一定是“自然”的？恐怕不尽然。\u003C\u002Fp\u003E\u003Cp\u003E我想不少人都能举出使这些“自然”模态不自然的场景。譬如语音操控：很适合于私人空间，而在公众场合却可能带来尴尬。再如手势界面：大家对电影《少数派报告》中主人公挥舞双手操作大屏幕界面完成每日工作的场景也许不陌生，这几乎成了大众心目中自然手势界面的代表。\u003C\u002Fp\u003E\u003Cp\u003E然而据这一场景的设计者说，在电影拍摄过程中，身体健硕的男主角却因为不堪长时间举着双手的疲劳，不得不用钢丝吊着胳膊完成拍摄。这直接印证了手势界面对于日常工作场合并不一定自然，尽管它在Kinect家庭游戏中早已备受欢迎。相反，一些较为传统的交互模态，譬如鼠标和键盘，在其特有的使用情境中却有着强大的生命力。\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-27d4f07b4fc4c585cda694_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-27d4f07b4fc4c585cda694_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E其实，自然人机交互并不是一个崭新的概念，而是自计算机诞生之日就存在，并不断地发展。作为计算机同行，一定对计算机界面更迭的历史都耳熟能详：从穿孔卡片到命令行再到图形界面，每一代界面的出现都比前一代更为自然和直观，但也都花费了相当长时间才成为主流。\u003C\u002Fp\u003E\u003Cp\u003E与之前的主要针对桌面计算机和工作环境而设计的界面相比，今天的用户界面所面临的是多样化的使用情境：移动、游戏、社交等等不一而足。而在何种情况下选择何种模态进行交互才是最自然的，这是每个人机交互从业者必须面对的问题。\u003C\u002Fp\u003E\u003Ch3\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-9dfcea67457_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-9dfcea67457_r.jpg\&\u003E\u003C\u002Ffigure\u003E自然人机交互等于模仿人的界面吗？\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-922a85fa4a_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-922a85fa4a_r.jpg\&\u003E\u003C\u002Ffigure\u003E在科幻电影中，经常会出现计算机模仿人的语音与用户进行交流的场景，有时计算机甚至会模拟人的形象，以虚拟助手的形式出现在屏幕上或现实世界中。\u003C\u002Fp\u003E\u003Cp\u003E无疑，这样的拟人化界面可以让用户与计算机交流就像与他人交往一样，很多情况下的确会感觉更为自然和亲切，甚至有可能在人与计算机间建立情感上的联系。它特别适用于用户其它交互渠道（譬如手眼）被占用，或是需要计算机提供智能化帮助的时候。\u003C\u002Fp\u003E\u003Cp\u003E但这种方式也有局限，在日常生活中，许多时候我们所做的事情并非与人交流，而是直接去操纵物理世界：比如直接拿起筷子吃饭就会比告诉别人怎么把食物喂到嘴里更为自然。同理，对于某些活动，用户直接操控界面也会比间接地通过拟人化交流更为自然和高效。\u003C\u002Fp\u003E\u003Ch2\u003E自然人机交互等于模仿物理世界的界面吗？\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-ab69b4b37aa5b5e73a5cd_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-ab69b4b37aa5b5e73a5cd_r.jpg\&\u003E\u003C\u002Ffigure\u003E那是不是模仿人与物理世界交互方式的界面就更加自然？实际上，当前通行的许多界面模式，都是建立在物理世界概念的基础上的，比如Windows图形界面和文件夹组织结构，就是对真实办公桌的一种模仿。还有不少研究人员探索了如何把物理模型引入用户界面用于驱动交互的过程，甚至把真实物体作为界面的一部分，通过操作物理实体与计算机进行交互，即实体用户界面（tangible user interface）。\u003C\u002Fp\u003E\u003Cp\u003E这些基于物理世界规则的界面能让用户完全地按照操作真实物体的方式与计算机交互，省去了不少学习时间，在一定意义上提供了最大限度的自然。\u003C\u002Fp\u003E\u003Cp\u003E但如果纯粹模仿物理世界，也会遇到瓶颈，那就是真实世界本身受到各种物理定律和客观条件制约，我们在复制它的种种直观属性的同时，也复制了它的种种限制与不便。这在某些情况下恰恰牺牲了计算机的灵活性，使用户失去了软件界面本来所能提供的自由空间。\u003C\u002Fp\u003E\u003Cp\u003E而在这一点上，大家熟悉的多点触控界面中用两个手指操作图片或者其它虚拟物体的手势，并没有拘泥于物理操作，而是在平移和旋转这两个完全符合物理常规的操作之中，加入了缩放这一在真实世界几乎不可能的操作，形成了一个无缝的自然交互方式——多数用户在使用它的时候可能甚至从来没有意识到这一点。可以说，自然人机交互应当源于真实，高于真实。\u003C\u002Fp\u003E\u003Ch3\u003E自然人机交互等于不用输入设备的界面吗？\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-53d832e19ed80c267b0f_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-53d832e19ed80c267b0f_r.jpg\&\u003E\u003C\u002Ffigure\u003E如果我们关注最近的一些被称为自然人机交互的产品，无论是使用手势、语音、触控，甚至是脑电波，他们的共性似乎是不需要专门的输入工具，而用身体的某一部分来直接进行操作。这是否是一切自然人机交互的大势所趋？\u003C\u002Fp\u003E\u003Cp\u003E一方面，人的手和身体本身就是极为灵活的工具，不需辅助就可以胜任许多通用型的任务，这正是今天许多无需输入设备界面的基础；但另一方面，物理工具的发明恰恰标志着人类的进化。\u003C\u002Fp\u003E\u003Cp\u003E各式各样的工具造就了人类从事各种专门活动的能力，而每一种工具的设计和使用方法都最大可能地为其支持的活动做了专门的优化，本身就是“自然人机交互”的典范。\u003C\u002Fp\u003E\u003Cp\u003E最好的例子莫过于形形色色的笔：比起用手指写字，用笔写字实际上更好地利用了人多个手指灵活配合和控制的能力，大大提高了书写的准确和丰富性。同样的道理，在今天的计算机使用中，特别是对于许多专门性的活动，一套设计合理的输入设备（例如数字笔）也可以延展人的能力，从而提供更加自然的界面。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E上述各种理解有一个共性，那就是它们都是将某一类特定的交互模式等同于自然人机交互。\u003C\u002Fstrong\u003E而实际上，“自然”并不是一个绝对的概念，无法抛开情境来下结论。上述提到或没提到的每一种交互模式都在某些使用情境中成为自然界面的典范，但在另一些情境下却又可能显得不那么自然。\u003C\u002Fp\u003E\u003Cp\u003E在尚未了解界面所要支持的用户、活动和环境的前提下，几乎无从判断它的自然与否。正如人机交互研究的一位先驱比尔o巴克斯顿(Bill Buxton)所说，“不论是什么东西，都对某些事情最好，而对另一些事情最糟。”\u003C\u002Fp\u003E\u003Ch2\u003E那么，自然人机交互能否有一个普适的标准？\u003C\u002Fh2\u003E\u003Cp\u003E一些研究人机交互的同行提出了一个有趣的问题：自然用户界面这个词，究竟是自然的“用户界面”还是“自然用户”的界面？乍看起来这是个文字游戏，答案也许并不重要。但这个问题的提出，为回答前一个问题指出了一条方向，那就是对自然人机交互的衡量，并非取决于界面的交互模式，而是取决于用户自身的体验。\u003C\u002Fp\u003E\u003Ch3\u003E自然源于体验\u002F经验\u003C\u002Fh3\u003E\u003Cp\u003E在英文中experience既有体验又有经验的意思。而在讨论自然的用户体验时，正要从用户的经验说起。这乍听似乎有些矛盾：自然人机交互不应该要求用户没有任何经验吗？不错，对界面本身而言，让用户在没有经验的前提下上手，让学习过程尽量缩短，这正是自然人机交互的主要优势之一。而这里要谈的，是另一种经验——对现实生活的经验。\u003C\u002Fp\u003E\u003Cp\u003E具体解释之前，先讲讲我的两位人机交互同行亲身经历的故事。\u003C\u002Fp\u003E\u003Cp\u003E一位印度的同行为当地用户设计了一组用数字笔操作的界面。在进行用户测试时，他对其中一位用户说：“请拿起笔碰一下屏幕。”出乎他意料的是，这一看起来十分简单自然的操作，居然出了问题：这位用户没有用笔尖，而是把笔横过来整个贴在了屏幕上！经询问才知道原来他不识字，也从没用过笔。\u003C\u002Fp\u003E\u003Cp\u003E而另一位欧洲的同行为家庭用户在交互桌面上开发了一套软件，包括一些直观的手势交互，例如用两个手指相反方向移动做打开的手势来打开一个虚拟的储物箱。当他向用户家庭演示时，他想考考这个家中正上小学的孩子：“你试试看怎么打开这个箱子？”孩子二话不说，直接用食指在箱子上双击！\u003C\u002Fp\u003E\u003Cp\u003E从这两个例子可以明显地看出，对于用户而言什么是自然并不等于与生俱来，而是在很大程度上取决于它们之前的生活经验：前者因为没有用笔的经验，“自然”的操作对他毫无自然可言；而后者由于从小与电脑和鼠标打交道，“不自然”的操作对他却是再自然不过。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-11e7bcc2fe0e66f8d997b85b_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-11e7bcc2fe0e66f8d997b85b_r.jpg\&\u003E\u003C\u002Ffigure\u003E同样的道理，我们平时觉得自然的事情，不论书写、语言、手势，还是触摸，恰恰是来自于若干年积累下来的经验或者有意识无意识的人为训练，当然也包括对真实世界物理规律的经验，和对已有计算机界面模式的经验。这些训练和经验，有些是较为广泛地为所有人所共享的，比如物理规律；而有些则与用户所属的社会文化群体息息相关，正像上边所举的两个例子。\u003C\u002Fp\u003E\u003Cp\u003E由此可见，如果想让用户尽快上手，恰恰要建立在用户已有生活经验的基础之上。缩短了的界面学习过程，正是因为借用了此前若干年用户学习其它相关事物的过程。于是，了解目标用户群体已有的经验，并试图让交互方式与这些经验相一致，就成了设计自然人机交互的关键。\u003C\u002Fp\u003E\u003Cp\u003E实际上，在人机交互中非常强调的“隐喻（metaphor）”概念，正可看成是这种思想的一种体现。隐喻指的是把用户界面中的概念比拟为一种人们熟悉的概念或现象，用于解释其交互方式，例如将图形界面元素比喻为大家熟悉的桌面、窗口等等。隐喻越贴切，越为用户熟悉，往往就意味着界面越自然。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-cfd609a0d744b10be8e23bf0_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-cfd609a0d744b10be8e23bf0_r.jpg\&\u003E\u003C\u002Ffigure\u003E当然，界面设计不可能也不应当完全局限于人们已有的经验。有时，界面所涉及的活动并没有直接对应的现实经验可以借鉴；有时，拘泥于已有经验会失去了界面设计的灵活性和创新空间。\u003C\u002Fp\u003E\u003Cp\u003E如何确保用户界面在超越已有经验的同时，又不失其自然呢？这里要涉及到人机交互中另一个与用户经验息息相关的概念，即思维模型（mental model）。它是用户脑中对所进行的具体活动机制的一个抽象，源于经验，又高于经验。\u003C\u002Fp\u003E\u003Cp\u003E还以多点触控中的两指操纵手势为例，根据物理经验，真实的物体无法被缩放，但基于平移和旋转的经验，用户抽象出的思维模型则是无论手指怎样移动，物体上固定的两个点始终对应于两个手指的位置。缩放操作正是这一思维模型的直接的推广，而这也是广大用户在使用这一操作时没有感到任何不自然的原因。\u003C\u002Fp\u003E\u003Cp\u003E由此可见，理解用户已有的思维模型，并加以外推，不失为设计自然人机交互的有效方法，也可以覆盖大量的用户原本没有经验或预期的使用情境。这样设计出的界面可以说是“情理之中，意料之外”。\u003C\u002Fp\u003E\u003Cp\u003E基于这些讨论，不妨试着给自然人机交互一个定义：\u003Cstrong\u003E自然人机交互是与目标用户群体在预期使用情境下已有的经验或思维模型相符的用户界面。\u003C\u002Fstrong\u003E虽然与许多常见理解相比，这个定义少了“新”和“炫”的成分，但它在某种意义上也许更加贴合自然的本义：往往是“无招胜有招”，一个理想的自然人机交互应当能让用户的注意力完全集中在所要从事的活动上，而忘记界面本身的存在，或者说，界面变得“透明”了。\u003C\u002Fp\u003E\u003Ch2\u003E实践尝试\u003C\u002Fh2\u003E\u003Cp\u003E下面介绍一些我们在自然人机交互研究方面的尝试。虽然这些例子未必在自然方面做到了完美，但希望能以它们来直观地映证前文的一些思路。 \u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-eff86ee02e6690dcbf733_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-eff86ee02e6690dcbf733_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch3\u003E所握即所得的数字笔\u003C\u002Fh3\u003E\u003Cp\u003E数字笔在设计、艺术等行业内广泛采用，相比鼠标等其他输入设备，对于从事视觉创作人群的自然性不言而喻。但今天的数字笔已经完全自然了吗？如果我们看看现实中这些人群用于创作的物理工具，却远不止一支笔这么简单。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-7cef168c3def1e6dfd6edb_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-7cef168c3def1e6dfd6edb_r.jpg\&\u003E\u003C\u002Ffigure\u003E他们要用到的有钢笔、毛笔、素描铅笔、刻刀、尺子等等工具。虽然这些工具形状相仿，却每一件都是为了特殊的功能而专门设计的，让使用者用起来得心应手，最为自然。\u003C\u002Fp\u003E\u003Cp\u003E虽然从软件上用同一支数字笔在画板上模拟各种工具的功能并不困难，但却在一定程度上缺失了每件物理工具使用的自然性。专用工具的自然，与通用工具的便利，有时看起来确实是一对矛盾。如何在这两者间取得平衡？答案依然要来自对现实经验的观察：当人们使用物理工具时，手握的方式都不尽相同，钢笔和毛笔的不同握法就是最好的例子。\u003C\u002Fp\u003E\u003Cp\u003E而每种握法，也正是为了最舒适地完成相应的功能而优化的结果，这些握法本身就是自然性的体现。由此，如果我们能在同一支数字笔上，通过识别用户不同的握法来自动提供不同的功能，那么用户就不必再刻意地选择不同的工具（无论物理工具或是虚拟工具），而只需要关注想要完成的功能，相应转换到最为自然的握法，便可以直接开始使用这一种功能。\u003C\u002Fp\u003E\u003Cp\u003E这样，用户不管从思维上还是操作上都跳过了工具选择这一步，可以说，工具变得“透明”了。基于这一想法，我们研制了一支“所握即所得的数字笔”，通过在笔上附加多点触摸和方向的传感器，可以识别出用户十余种不同的握法，并在数字画板上提供相应的功能：钢笔、毛笔、印章……甚至超出视觉创作的范畴，譬如模拟笛子等不同的乐器，从而使用户使用数字笔的体验更为自然和丰富。
\u003C\u002Fp\u003E\u003Ch2\u003EShapeTouch: 从多点触控到形状触控\u003C\u002Fh2\u003E\u003Cp\u003E多点触控中的两指操纵手势作为自然人机交互设计的范例，本身也面临着挑战。试想一下，如果不是在触摸屏或交互桌面上，而是在物理世界中操纵真实物体时也同样只用两个手指去移动和旋转，是否还那么自然？\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-ecee712bac77_b.jpg\& data-rawwidth=\&740\& data-rawheight=\&417\& class=\&origin_image zh-lightbox-thumb\& width=\&740\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-ecee712bac77_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E人手是一件极为灵活的工具，我们在与物理世界交互时，会根据物体的特性（形状、重量等）和操作的目的（精细或是粗略，局部或是整体，等等）而采取不同的接触方式。我们的手能够完成的极其丰富的操作，远远超过多“点”触控的范畴。\u003C\u002Fp\u003E\u003Cp\u003E那么，怎样才能让对虚拟物体的触控操作也像物理世界中那样丰富而自然？关键在于对于触摸输入的理解不能再简单地将其抽象为多“点”}
我要回帖
更多关于 微信小程序开发工具 的文章
更多推荐
- ·中专和一个当兵的谈网恋会有结果吗男生到现在在我QQ空间关注我，啥意思啊，我是女生，我读了大学的？
- ·如何将pdf按搜索结果pdf页面删除排序？
- ·这个游戏叫什么名字抖音最近很火的游戏上面的？
- ·怎么入驻在美团上怎么开店短视频？
- ·想问下小型沈阳货运物流公司司可以找网络货运代开票吗，普票和专票都能开吗？操作起来麻烦吗？
- ·做个自己的注册微信小程序费用，费用高吗？
- ·java软件开发之前没有接触过，去太原哪里能学会？
- ·求解：亚马逊加拿大站为何很少单量
- ·微信小程序难吗？开发要多久？门槛高不高？外包的话，费用大概多少？
- ·淘宝客微信小程序怎么做，不懂代码
- ·怎么制作自己的微信小程序制作教程？
- ·ipone上开启通知对情况下Wechat好友请求 电影 2016被通过
- ·hga010客户端下载下载;怎样才能知道庄的资金流向？
- ·自己做的软件怎么才能出现在微信小程序
- ·了如指掌是360500的注册商标吗
- ·微信小程序开发版发布需要审核吗？
- ·微信小程序错误码1代表什么？
- ·电信手机话费查询一年要赚我多少话费啊，太黑了.注目无
- ·沃尔沃ec60c挖掘机挖掘机报警代码981,是什么情况？
- ·客所思mx2客所思的声卡怎么样样？
- ·微信小程序调用方法有哪些开发工具和方法
- ·巴黎圣日耳曼比赛直播下一场比赛还能继续穿 盘吗？
- ·耐克的跑步鞋赤足系列的好，还是登月系列
- ·李石技术咋样呢，他这边出来的胸是否自然
- ·白练腾空造句的练是什么意思，紧急求救
- ·篮球卡盘套利;各位初中生篮球训练应该怎么学
- ·如果知道的话麻烦帮我解答，乔爱军 百度知道与王凤芹谁做脂肪厉害
- ·人工膝关节置换后能下蹲吗做的运动
- ·万胜围球场;能反射出一定的区域性吗
- ·日常代步小车哪款好电单车，性价比高的？
- ·篮球对冲套利大小分套利;有系统中的c轴使用过程？
- ·求一款游戏，篮球类找一款关于餐厅的模拟经营游戏，管理球队的那种。
- ·半一球猩球崛起3百度网盘分享析;有内涵以及操作要领图解吗？
- ·萌卡篮球皇帝成长计划2刷开局局号;怎么掌握庄家的动态想法？
- ·今晚欧冠;支持手机频段 英文的英文怎么说？
- ·上海科目二考完什么时候可以考科三考完可以直接考科四吗哇？
