MINA 文件目录结构 小程序配置 注册程序 注册页面 模块化 API 微信小程序 数据绑定 微信小程序 条件渲染 wx:if 微信小程序 列表渲染 wx:for 微信小程序 模板 微信小程序 事件 微信小程序 引用 微信小程序 WXSS 微信小程序 基础组件 微信小程序WeUI.js网页开发样式库 微信小程序视图容器 微信小程序可滚动视图区域 微信小程序滑块视图容器 微信小程序内容组件图标 icon 微信小程序内容组件 text(文本) 微信小程序内容组件 进度条:progress 微信小程序按钮组件:button 微信小程序表单组件 checkbox 微信小程序表单组件 form 微信小程序表单组件输入框 input 微信小程序表单组件 label 微信小程序表单组件选择器 picker 微信小程序表单组件picker-view(嵌入页面的滚动选择器) 微信小程序表单组件单选框 radio 微信小程序表单组件滑动选择器 slider 微信小程序表单组件 开关 switch 微信小程序表单组件多行输入框 textarea wxapp操作反馈上拉菜单 action-sheet wxapp操作反馈模式对话框 modal wxapp操作反馈消息提示框:toast wxapp操作反馈消息提示框:loading 微信小程序导航 navigator 媒体组件 audio 媒体组件 image 媒体组件 video(视频) 微信小程序地图 map wxapp画布 canvas 微信小程序组件 contact-button(客服会话按钮) 微信小程序API 发起请求 微信小程序API 上传、下载 微信小程序API Websocket 微信小程序API 图片 微信小程序API 录音 微信小程序API 音频播放控制 微信小程序API 音乐播放控制 微信小程序API 视频 微信小程序音频组件控制 微信小程序视频组件控制 微信小程序API 文件 微信小程序API 数据缓存 微信小程序API 位置 微信小程序API 获取位置 微信小程序API 查看位置 微信小程序API 地图组件控制 微信小程序API 系统信息 微信小程序API 网络状态 微信小程序API 重力感应 微信小程序API 罗盘 微信小程序API 拨打电话 微信小程序API 扫码 微信小程序API 交互反馈 微信小程序API 设置导航条 微信小程序API 导航 微信小程序API 动画 微信小程序API 绘图接口(reference)、方法大全 微信小程序API 绘图 微信小程序API 绘图介绍(如何在Canvas上画图) 微信小程序API coordinates(Canvas 坐标系) 微信小程序API gradient(如何绘制渐变效果) 微信小程序API wx.createCanvasContext(canvasId)(绘图上下文) 微信小程序API 绘图·绘制画布 drawCanvas (不推荐使用) 微信小程序API 绘图·导出图片canvasToTempFilePath(OBJECT) 微信小程序API 绘图·设置填充样式setFillStyle 微信小程序API 绘图setStrokeStyle(设置线条样式) 微信小程序API 绘图setShadow(设置阴影样式) 微信小程序API 绘图createLinearGradient(创建线性渐变) 微信小程序API 绘图createCircularGradient(创建圆形渐变) 微信小程序API绘图addColorStop(创建颜色渐变点) 微信小程序API 绘图setLineCap(设置线条端点样式) 微信小程序API 绘图setLineJoin(设置线条交点样式) 微信小程序API 绘图setMiterLimit(设置最大倾斜) 微信小程序API 绘图rect创建矩形 微信小程序API 绘图fillRect(填充矩形) 微信小程序API 绘图strokeRect(画一个矩形,非填充) 微信小程序API 绘图clearRect(在给定的矩形区域内,清除画布上的像素) 微信小程序API 绘图fill(对当前路径进行填充) 微信小程序API 绘图stroke(对当前路径进行描边) 微信小程序API 绘图beginPath(开始一个路径) 微信小程序API 绘图closePath(关闭一个路径) 微信小程序使用moveTo把路径移动到画布中的指定点,不创建线条 微信小程序中使用lineTo方法增加一个新点 使用arc()方法在微信小程序canvas中画弧线 在微信小程序绘图API中创建二次方贝塞尔曲线 在微信小程序API绘图中创建三次方贝塞尔曲线路径 在微信小程序中调用scale方法对横纵坐标进行缩放 微信小程序API 绘图对坐标轴进行顺时针旋转 微信小程序canvas中使用translate对坐标原点进行缩放 微信小程序API 绘图setFontSize(设置字号) 微信小程序绘图API中使用fillText在画布上绘制被填充的文本 微信小程序API中,使用drawImage完成绘制图像,图像保持原始尺寸 微信小程序API 绘图中使用setGlobalAlpha设置全局画笔透明度 微信小程序save/restore(保存和恢复绘图上下文) 微信小程序API 绘图·draw(进行绘图) 微信小程序API 绘图·getActions(不推荐使用) 微信小程序API 绘图·clearActions (不推荐使用) 微信小程序API 其他 微信小程序API 下拉刷新 微信小程序API 登录 微信小程序API 用户数据的签名验证和加解密 微信小程序API 用户信息 微信小程序API 微信支付 微信小程序API 模板消息 微信小程序API 接收消息和事件 微信小程序API 发送客服消息 微信小程序API 临时素材接口 微信小程序API 接入指引 微信小程序API 分享 微信小程序API 获取小程序页面二维码 微信小程序工具 概览 微信小程序工具 程序调试的三大主要功能区 微信小程序工具 代码编辑 微信小程序工具 项目页卡三大主要功能 微信小程序工具 下载地址 微信小程序工具细节点 微信小程序开发者工具测试版本的下载 微信小程序 联系我们 微信小程序 Q&A 微信小程序设计规范(1) 友好礼貌 微信小程序设计规范(2) 清晰明确 微信小程序设计规范(3) 便捷优雅 微信小程序设计规范(4) 统一稳定 微信小程序设计规范(5) 视觉规范

微信小程序 框架

逻辑层(App Service)

微信小程序导航

绘图

微信小程序API 绘图接口(reference)、方法大全 微信小程序API 绘图 微信小程序API 绘图介绍(如何在Canvas上画图) 微信小程序API coordinates(Canvas 坐标系) 微信小程序API gradient(如何绘制渐变效果) 微信小程序API wx.createCanvasContext(canvasId)(绘图上下文) 微信小程序API 绘图·绘制画布 drawCanvas (不推荐使用) 微信小程序API 绘图·导出图片canvasToTempFilePath(OBJECT) 微信小程序API 绘图·设置填充样式setFillStyle 微信小程序API 绘图setStrokeStyle(设置线条样式) 微信小程序API 绘图setShadow(设置阴影样式) 微信小程序API 绘图createLinearGradient(创建线性渐变) 微信小程序API 绘图createCircularGradient(创建圆形渐变) 微信小程序API绘图addColorStop(创建颜色渐变点) 微信小程序API 绘图setLineCap(设置线条端点样式) 微信小程序API 绘图setLineJoin(设置线条交点样式) 微信小程序API 绘图setMiterLimit(设置最大倾斜) 微信小程序API 绘图rect创建矩形 微信小程序API 绘图fillRect(填充矩形) 微信小程序API 绘图strokeRect(画一个矩形,非填充) 微信小程序API 绘图clearRect(在给定的矩形区域内,清除画布上的像素) 微信小程序API 绘图fill(对当前路径进行填充) 微信小程序API 绘图stroke(对当前路径进行描边) 微信小程序API 绘图beginPath(开始一个路径) 微信小程序API 绘图closePath(关闭一个路径) 微信小程序使用moveTo把路径移动到画布中的指定点,不创建线条 微信小程序中使用lineTo方法增加一个新点 使用arc()方法在微信小程序canvas中画弧线 在微信小程序绘图API中创建二次方贝塞尔曲线 在微信小程序API绘图中创建三次方贝塞尔曲线路径 在微信小程序中调用scale方法对横纵坐标进行缩放 微信小程序API 绘图对坐标轴进行顺时针旋转 微信小程序canvas中使用translate对坐标原点进行缩放 微信小程序API 绘图setFontSize(设置字号) 微信小程序绘图API中使用fillText在画布上绘制被填充的文本 微信小程序API中,使用drawImage完成绘制图像,图像保持原始尺寸 微信小程序API 绘图中使用setGlobalAlpha设置全局画笔透明度 微信小程序save/restore(保存和恢复绘图上下文) 微信小程序API 绘图·draw(进行绘图) 微信小程序API 绘图·getActions(不推荐使用) 微信小程序API 绘图·clearActions (不推荐使用) 微信小程序API 其他 微信小程序API 下拉刷新

微信小程序开发文档

浏览93889
更新时间2022-04-11

三、便捷优雅

从PC时代的物理键盘鼠标到移动端时代手指,虽然输入设备极大精简,但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化,需要开发者在设计过程中充分利用手机特性,让用户便捷优雅的操控界面。

1. 减少输入

由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时因尽量减少用户输入,理由现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

减少输入,巧用接口

例如下图中,在添加银行卡时,采用摄像头识别SDK接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种SDK接口(详见微信JS-SDK),充分利用这些接口将大大提高用户输入的效率和准确性,进而优化体验。

微信应用号(小程序)设计规范-稀土区

除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要的键盘输入。

微信应用号(小程序)设计规范-稀土区

2. 避免误操作

一位内在手机上我们通过手指触摸屏幕来操控界面,手指的点击精确度远不如鼠标,因此在设计页面上需点击的控件时,需要充分考虑到其热区面积,避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时,往往就容易出现这样的问题。由于手机屏幕分辨率各不相同,因此最适宜点击像素尺寸也不完全一致,但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准控件库中,各种控件均已考虑到了页面点击效果以及不同屏幕的适配,因此再次推荐使用或模仿标准控件尺寸进行设计。

3. 利用接口提升性能

微信设计中心已推出了一套网页标准控件库,包括sketch设计控件库和WeUI重构代码库,这些控件都已充分考虑了移动端页面的特点,能够保证其在移动端页面上的可用性和操作性能;同事微信web开发团队也在不断完善和扩充微信JS-SDK接口,并提供微信公共库,利用这些资源不但能够为用户提供更加快捷的服务,而且对页面性能的提高有极大作用,无形之中提升了用户体验。

相关视频

更多

免费

微信小程序--企业微网站
初级微信小程序--企业微网站

5.4万次学习

收藏

免费

微信小程序开发基础教程
初级微信小程序开发基础教程

6.8万次学习

收藏

免费

微信小程序基础API篇
高级微信小程序基础API篇

3.5万次学习

收藏

免费

微信小程序--微商城
高级微信小程序--微商城

3.9万次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

64.9万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

41.2万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76.6万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

64.1万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.3万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

36.2万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

133.1万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7,16种组合,超全大合集

下载

VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载

php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版
SublimeText3汉化版

中文版,非常好用

下载

Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包,适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载