微信小程序文件上传下载应用场景 精 - 推酷
微信小程序文件上传下载应用场景 精
提供了一套在微信上运行小程序的解决方案，有比较完整的框架、组件以及 API，在这个平台上面的想象空间很大。
小相册是结合腾讯云对象存储服务（Cloud Object Service，简称COS）制作的一个微信小程序示例。在代码结构上包含如下两部分：
applet : 小相册应用包代码，可直接在微信开发者工具中作为项目打开
server : 搭建的 Node 服务端代码，作为服务器和applet通信，提供 CGI 接口示例用于拉取 COS 图片资源、上传图片到 COS、删除 COS 图片等。
小相册主要功能如下：
列出 COS 服务器中的图片列表
点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 COS 服务器中
轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片
长按任意图片，可将其保存到本地，或从 COS 中删除
部署和运行
拿到了本小程序源码的朋友可以尝试自己运行起来。
1. 准备域名和证书
在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求，具体包括：
只允许和在 MP 中配置好的域名进行通信，如果还没有域名，需要注册一个。
网络请求必须走 HTTPS 协议，所以你还需要为你的域名申请一个证书。
域名注册好之后，可以登录
配置通信域名了。
2. 云主机和镜像部署
小相册的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，大家可以直接使用。
腾讯云用户可以免费领取礼包，体验腾讯云小程序解决方案。
镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码，需要体验两个小程序的朋友无需重复部署
3. 配置 HTTPS
镜像中已经部署了 nginx ，需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
配置完成后，即可启动 nginx。
4. 域名解析
我们还需要添加域名记录解析到我们的云服务器上，这样才可以使用域名进行 HTTPS 服务。
在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。
解析生效后，我们在浏览器使用域名就可以进行 HTTPS 访问。
5. 开通和配置 COS
小相册示例的图片资源是存储在 COS 上的，要使用 COS 服务，需要登录COS 管理控制台，然后在其中完成以下操作：
开通 COS 服务分配得到唯一的 APP ID
使用密钥管理生成一对 SecretID 和 SecretKey （用于调用 COS API）
在 Bucket 列表中创建公有读私有写访问权限、CDN加速的 bucket（存储图片的目标容器）
6. 启动小相册示例 Node 服务
在镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album 下：
进入该目录：
cd /data/release/qcloud-applet-album
在该目录下有个名为 config.js 的配置文件（如下所示），按注释修改对应的 COS 配置：
module.exports = {
// Node 监听的端口号
port: '9993',
ROUTE_BASE_PATH: '/applet',
cosAppId: '填写开通 COS 时分配的 APP ID',
cosSecretId: '填写密钥 SecretID',
cosSecretKey: '填写密钥 SecretKey',
cosFileBucket: '填写创建的公有读私有写的bucket名称',
小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：
pm2 start process.json
7. 微信小程序服务器配置
进入微信公众平台管理后台设置服务器配置，配置类似如下设置：
注意：需要将 www.qcloud.la 设置为上面申请的域名，将 downloadFile 合法域名设置为在 COS 管理控制台中自己创建的 bucket 的相应 CDN 加速访问地址，如下图所示：
8. 启动小相册 Demo
在微信开发者工具将小相册应用包源码添加为项目，并把源文件 config.js 中的通讯域名修改成上面申请的域名。
然后点击调试即可打开小相册Demo开始体验。
这里有个问题。截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。
主要功能实现
上传图片使用了微信小程序提供的 wx.chooseImage(OBJECT) 获取需要上传的文件路径，然后调用上传文件接口 wx.request(OBJECT) 发送 HTTPS POST 请求到自己指定的后台服务器。和传统表单文件上传一样，请求头 Content-Type 也是 multipart/form-data 。后台服务器收到请求后，使用 npm 模块 multiparty 解析 multipart/form-data 请求，将解析后的数据保存为指定目录下的临时文件。拿到临时文件的路径后，就可直接调用 COS SDK 提供的文件上传 API进行图片存储，最后得到图片的存储路径及访问地址（存储的图片路径也可以直接在 COS 管理控制台看到）。
获取图片列表
可以获取到在 COS 服务端指定 bucket 和该 bucket 指定路径下存储的图片。
下载和保存图片
指定图片的访问地址，然后调用微信小程序提供的 wx.downloadFile(OBJECT) 和 wx.saveFile(OBJECT) 接口可以直接将图片下载和保存本地。这里要注意图片访问地址的域名需要和服务器配置的 dowmloadFile 合法域名一致，否则无法下载。
删除图片也十分简单，直接调用文件删除 API就可以将存储在 COS 服务端的图片删除。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致上海城市精神：海纳百川、追求卓越、开明睿智、大气谦和
您现在的位置： >
微信小程序 1 月上线 能做的远没有想的多
　　今年年初，之父张小龙在腾讯公开课上推出了一项基于应用内的云计算服务，它完全不需要下载和安装就能实现独立应用的部分功能，它被称为小程序。这个项目公布之后，引起了程序员界极大的反响：直接以为入口，通过云端服务器实现功能。也就意味着这将会极大地降低应用开发成本，顺便把机型适配和安卓、iOS 版本移植的问题也一并解决掉。甚至有人猜想，小程序的出现将可以直接代替应用程序、成为类似于 App Store 那样的应用分发平台。
　　其实在项目成立之初，团队也并不是十分确定他们到底要把小程序做成什么样子。所以 在 9 月份小程序还没成熟时就已经开始邀请开发者进行小程序内测，“摸着石头过河” 共同探索小程序的前进方向。
　　终于在今天 （ 12 月 28 日 ），张小龙站在公开课 PRO 版的讲台上，再一次向我们谈起了小程序。
　　他在公开课上表示：“是个工具，是个非常宏大的目标，我不认为工具是低层次的目标。一个好的工具应该有一个很强的属性，就是提高效率，用完即走。”小程序，就是张小龙口中那个 “用完即走” 的好工具。小程序并不打算长时间占用用户注意力和使用时间，而是在用户有需求的时候，能够通过访问小程序来快速解决，完成后直接返回不用考虑卸载或者的问题。
　　而小程序的主要功能为：线下扫码，可以让用户在小程序中使用扫一扫。对话分享，用户可以把当前这个小程序分享给好友或者群聊。消息通知，商家和用户可以用过小程序推送信息或者联系客服。小程序切换，用户可以在使用小程序过程中直接切换回聊天界面。历史列表，里面会记录下你用过的小程序。公众号关联，主要是提供给公众号推送使用。另外还有搜索查找，用户可以直接根据名称和品牌来搜索小程序，就像现在搜索公众号一样。
　　那到底该怎么进入小程序？通过在这次公开课上的内容来看，小程序将不会在内设置直接的入口，目前想要打开小程序可以靠扫一扫二维码或者寻找附近有提供小的店铺。
　　小程序会不会做应用商店？因为小程序不需要下载，所以也就没必要做成一个应用分发平台。而且团队也不希望最终成为一个平台，也不会去做小程序排行榜之类的东西，更不会因为用户使用了某个小程序，就会向用户推荐更多同类的小程序。
　　而且小程序并不能够直接订阅，小程序和公众号是截然不同的产品。如果用户希望能进入某个小程序，只可以通过扫描二维码、查找历史小程序或者自行搜索才能进入。既然没有关注订阅这个设定，自然也不用担心小程序会时不时向你推送消息。
　　同时根据上面的功能设定，小程序只打通了聊天好友和群体的分享接口，并不支持直接分享到朋友圈。而且这个七大功能模块，主要实现功能只是基础的界面交互，自然也不能实现一些更高级的应用功能，例如做成游戏或者修图应用等。
　　总体而言，小程序远没有我们当初想的那么极具颠覆性，更别说能威胁到现在的应用生态或者应用分发平台了。小程序只能说是功能和体验要比网页端或者公众号里面的接口、功能更丰富完善一些，而且不用下载，比起安装 App 要更方便。
　　小程序日后更多的使用场景应该是在餐厅或者一些服务性行业，例如可以直接扫码排队、点餐，甚至是打通支付接口直接在小程序里面结账。又例如可以应用在现在品牌众多的共享单车上，我们使用扫码就可以直接跳到这个共享单车品牌的小程序，不需要单独下载安装这个品牌的应用，用完扣费后就不需要再管它。
　　在 9 月份的内测中，张小龙就为小程序写过一段介绍： “小程序是一种不需要下载安装即可使用的应用，它实现了应用 「触手可及」 的梦想，用户扫一扫或者搜一下即可打开应用。也体现了 「用完即走」 的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装。”
　　从现在小程序可以做的功能来说，基本上算是实现了这个设定，只不过并不能完全代替应用本身而已。该发微博的还是得打开微博客户端，该上淘宝的还是得打开淘宝客户端。但小程序确实是开启了一种新的轻应用形式，接下来大部分简单的服务性应用都可以通过小程序来实现，说不定以后还会开发出更多新的玩法来充分发挥小程序的全部功能。
　　目前小程序已经确定在 2017 年 1 月 9 日正式对外开放使用，再过一个多星期我们就可以验证小程序到底能给我们带来怎样的便捷体验了。
　　免责声明：本文仅代表作者个人观点，与环球网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
侬好上海由新民网出品微信号：helloshanghai2013
吃喝玩乐、上海故事、同城活动每天热爱上海多一点，加入小侬家族就对啦！
新民晚报官方微信微信号：xmwb1929
有用、有益、有趣
街谈巷议微信微信号：xinminwangshi
街头访谈，麻辣点评
新闻热词榜
数据加载中……
太期待啦！
这里，有土生土长的本地上海人，有来自国内各地的新上海人，有不远万...
至少，咱们大上海的路，一点不套路！
老伴不慎摔倒在地，幸得三位好心人相助，平安送达医院抢救。昨天，市...
汽车遥控钥匙作为连接车主与爱车之间的重要工具，无论实用性还是设计...
新民晚报官方网站
All rights reserved2712人阅读
微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。
一、有好礼貌
为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序哎设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。
1. 重点突出
每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。
此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。
去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。
操作没有注册，让用户无从选择
首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。
2. 流程明确
为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。
用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒；而即使有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。
二、清晰明确
作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。
1. 导航明确，来去自如
导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，我在哪，我可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带微信提供的导航栏，统一统一解决我在哪，如何回去的问题。在微信层级导航保持体验一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换中新增学习成本或使用习惯。
微信导航栏
微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。
微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色，在iOS和Android展示有所不同，如下图所示：
导航区（iOS）
导航区通常只有一个操作，即返回上一级界面。开发者可定义其内容，不可对样式进行修改。
导航区（Android）
通常情况下，系统导航左侧唯一的操作为“离开小程序，回到微信，程序后台运行”。
当用户进入小程序次级页面后，我们建议小程序自身可以设计返回操作，同事用户也可以通过安卓系统自带的硬件返回按钮返回上一级。
微信导航栏自定义颜色规则（iOS和Android）
小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果：
选色方案示例：
页面内导航
开发者可根据自身功能合计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单，若仅为一般线性浏览的页面建议仅使用微信导航栏即可。
微信控件库提供tab导航供开发者选择。tab栏可固定在页面顶部或者底部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项。一个页面也不应出现一组以上的tab栏。
2. 减少等待，反馈及时
页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。
启动页设计
小程序启动也是小程序在微信内容一定程度上展现品牌特征的页面之一。
本页面将突出展示小程序品牌特征和加载状态。
启动页除LOGO品牌展示外，页面上的其他所有元素如加载进度指示，由微信统一提供且不能更改。无需开发者开发。
下拉标示区
微信类所有小程序页面，都会再下拉时出现微信为其统一设计的标示区。品牌展示区由品牌名称和微信小程序提示组成。目的是强化品牌和用户对小程序的产品感知。
下拉标示（iOS深浅两色方案）
微信提供深浅两套配色方案，如此处标示所示，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨识度。
下拉标示（Android深浅两色方案）
微信下拉提示用于给用户明确的小程序归属者，防止造假与作弊。此处标示提供深浅两套方案，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨识度。
页面刷新交互（iOS）
开发者可自定义需要通过下拉交互完成刷新的页面，此类交互微信将提供标准能力和样式。在样式上，刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标示与刷新图标的和谐统一。但用户在该类页面做出下拉交互时，出现微信小程序页面标准加载动画。开发者无需自行开发样式。
在开发者没有在页面顶部设计tab的情况下，若定义该页面可通过下拉动作刷新，则刷新后加载状态提示语小程序品牌展示区出现在标题栏之下，页面顶部。
开发者暂无法执行定义此加载效果。
在开发者定义了页面顶部tab并定义该Tab下的内容页面可通过下拉动作刷新，则刷新后加载状态提示语小程序品牌展示区出现在顶部Tab之下，且仅刷新当前页面内容。开发者暂无法自行定义此加载效果。
页面刷新交互（Android）
与iOS相同，在样式上，Android下刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标识与刷新图标的和谐统一。
微信下拉标示错误使用案例
请避免以下错误使用情况，确保信息的可见性和页面的可用性。
页面内导航
微信控件库提供深浅tab导航方案供开发者选择。tab栏需固定在页面顶部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项。一个页面也不应出现一组以上的tab栏。
Tab栏选中态默认为100%实色，未选中态带有60%，其中选中态颜色可自定义。在自定义颜色选择中，务必保持Tab的可用性、可视性和可操作性。
页面内加载反馈
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全体，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。开发者也可以使用微信提供的，统一的页面加载样式，如图中例所示。
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内哦让那个将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的菊花。
局部加载反馈
即旨在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面改动小，是微信推荐的反馈方式。例如：
加载反馈注意事项
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况看，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用toast、弹窗或结果页面展示。
页面局部操作结果反馈
对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。对于常用控件，微信设计中心已提供控件库及WeUI控件库，其中的控件都已设计有完整的操作反馈。
页面全局操作结果——toast
其中toast适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调成功专题的操作提醒。特别注意toast形式不适用于任何错误提醒。
页面全局操作结果——弹框
对于需要用户明确知晓的操作结果状态可通过弹框来提示，并可附带下一步操作指引。
页面全局操作结果——结果页
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
3. 异常可控，有路可退
在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。
要杜绝异常状态下，用户莫名其妙又无处可去，卡在某一个页面的情况。2.2中所提到的弹窗和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。
异常状态——表单出错
表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
三、便捷优雅
从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的操控界面。
1. 减少输入
由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，理由现有接口或其他一些易于操作的选择控件来改善用户输入的体验。
减少输入，巧用接口
例如下图中，在添加银行卡时，采用摄像头识别SDK接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种SDK接口（详见微信JS-SDK），充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。
除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要的键盘输入。
2. 避免误操作
一位内在手机上我们通过手指触摸屏幕来操控界面，手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准控件库中，各种控件均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。
3. 利用接口提升性能
微信设计中心已推出了一套网页标准控件库，包括sketch设计控件库和WeUI重构代码库，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能；同事微信web开发团队也在不断完善和扩充微信JS-SDK接口，并提供微信公共库，利用这些资源不但能够为用户提供更加快捷的服务，而且对页面性能的提高有极大作用，无形之中提升了用户体验。
四、统一稳定
除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。
五、视觉规范
为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时方便开发者调用。
预览地址：https://weui.io
1. 字体规范
常用字号为20，18，17，16，14，13，11（pt），使用场景具体如下：
微信类字体的使用与所运行的系统字体保持一致，以导航为例，iOS与Android对应字体如下：
导航（iOS和Android）
主内容Black黑色，次要内容Grey灰色；时间戳与表单缺省值Light灰色；大段的说明内容而且属于主要内容用Semi黑；
蓝色为链接用色，绿色为完成字样颜色，红色为出错用色Press与Disable状态分别降低透明度为20%与10%；
2. 列表视觉规范
3. 表单输入视觉规范
4. 按钮使用原则
列表外按钮上文字标准
按钮高度为44px下使用：颜色#000000 / #353535 字号18pt
列表外按钮上文字标准
按钮高度为25px下使用：颜色#000000 / #353535 字号14pt
页面线性按钮上文字标准
按钮高度为35px下使用：颜色#09BB07 / #353535 字号16pt
5. 图标使用原则
来源：微信团队
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：152909次
积分：2002
积分：2002
排名：第15744名
原创：18篇
转载：242篇
评论：15条
(1)(2)(1)(2)(1)(9)(11)(18)(12)(19)(17)(29)(39)(11)(9)(2)(28)(21)(8)(5)(15)}