微信小程序

一张思维导图带领你快速了解微信小程序！这一份微信小程序思维导图包含产品设计、API开发两大内容，并且重点讲解了微信小程序定位、设计、运营和探索的四部曲。如果对微信小程序感兴趣的话，不妨仔细看看呀！

微信小程序

• 产品设计
  • 友好，高效，一致的用户体验
  • 友好礼貌
    • 减少干扰
    • 礼貌的展示服务
    • 友好的引导操作
  • 突出重点
    • 快速理解
    • 减少与操作无关因素
    • 避免过多平级操作
      • 区分操作主次
        • 减少用户选择难度
  • 流程明确
    • 避免出现流程外的内容
  • 导航明确
    • 用户在页面中游刃有余地穿梭
    • 顶部导航
    • tab
      • 2<=x<5
        • 4个确保了点击区域
      • 可用性
      • 可视性
      • 可操作性
    • 底部标签
      • 暂无描述
  • 减少等待，反馈及时
    • 启动页加载
      • Logo-可操作
      • 加载进度等不可操作
    • 页面下拉刷新加载
      • 微信提供2套样式，无需自行开发。注意用色的辨识
    • 页面内加载
      • 上拉加载
    • 模态加载
      • 页面转菊
    • 局部加载反馈
      • 按钮内加载
      • 时间久的操作，预留取消加载
      • 载入过程中，动画全程跟随
      • 1个页面少于2个加载动画
    • 局部操作结果反馈
      • 微信控件提供完整的操作反馈
    • 页面全局操作结果
      • 1.5s toast
      • 模态对话框
      • 结果页
        • 流程完结页
          • 主要操纵
          • 次要操作引导
      • 异常页面
        • 文案提示
        • 字段变红
  • 便捷
    • 减少输入
      • 使用接口
        • 场景：添加银行卡，使用摄像头自动识别。
    • 必须输入，设置选择题
    • 微信基于移动端的标准控件
  • 统一稳定
    • 交互方式一致
  • 视觉规范
    • 7种常用字号
    • 字体颜色
      • 主要内容黑丝，次要灰色，绿色完成，红色错误
  • 视觉列表规范
    • 标题，小标题高度固定
  • 表单输入视觉规范
  • 按钮使用规则
    • 大按钮
      • 当前页面的即时操作
    • 中按钮
      • 重要程度不高，不鼓励用户操作的
    • 小按钮
      • 内容操作，重复使用
    • 失效按钮
      • 失效，不可点
    • 按钮loading
      • 无法马上反馈
  • 图标使用原则
    • 完成
    • 错误提示
    • 提醒
• 开发API
  • 网络
    • 发起请求
      • 1个小程序，同时最多只能发起5个网络请求链接。
    • 上传，下载
      • 本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求
      • 下载文件资源到本地。客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
    • websocket
      • 一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接
      • 监听WebSocket连接打开事件。
      • 监听WebSocket错误。
      • 通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
      • 监听WebSocket接受到服务器的消息事件。
      • 关闭WebSocket连接。
      • 监听WebSocket关闭。
  • 媒体
    • 图片
      • 本地相册选择or拍摄
      • 预览
      • 获取图片信息
    • 录音
      • 开始录音。当主动调用wx.stopRecord，或者录音超过1分钟时自动结束录音，返回录音文件的临时文件路径。
      • 主动调用停止录音。
    • 音频播放控制
      • 开始播放语音，同时只允许一个语音文件正在播放，如果前一个语音文件还没播放完，将中断前一个语音播放。
      • 暂停正在播放的语音。再次调用wx.playVoice播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，需要先调用 wx.stopVoice。
      • 结束播放录音
    • 音乐播放控制
      • 获取音乐播放状态。
      • 播放音乐，同时只能有一首音乐正在播放。
      • 暂停播放音乐。
      • 控制音乐播放进度。
      • 停止播放音乐。
      • 监听音乐播放。
      • 监听音乐暂停。
      • 监听音乐停止。
    • 文件
      • 保存文件到本地。
      • 获取本地已保存的文件列表
      • 获取本地文件的文件信息
      • 删除本地存储的文件
    • 视频
      • 拍摄视频或从手机相册中选视频，返回视频的临时文件路径。
    • 音频组件控制
      • 通过 audioId 跟一个 audio 组件绑定，通过它可以操作一个 audio 组件。
    • 视频组件控制
      • 通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。
  • 数据
    • 数据缓存
      • 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
      • 从本地缓存中异步获取指定 key 对应的内容。
      • 从本地缓存中同步获取指定 key 对应的内容。
      • 异步获取当前storage的相关信息
      • 同步获取当前storage的相关信息
      • 从本地缓存中异步移除指定 key 。
      • 从本地缓存中同步移除指定 key 。
      • 清理本地数据缓存。
      • 同步清理本地数据缓存
  • 地理位置
    • 获取位置
      • 获取当前的地理位置、速度。
    • 查看位置
      • 使用微信内置地图查看位置
  • 设备
    • 网络状态
      • 获取网络类型。
    • 系统信息
      • 获取系统信息。
    • 重力感应
      • 监听重力感应数据，频率：5次/秒
    • 罗盘
      • 监听罗盘数据，频率：5次/秒
    • 拨打电话
  • 界面
    • 交互反馈
      • 显示消息提示框
      • ​显示模态弹窗
      • 显示操作菜单
    • 设置导航条
      • 动态设置当前页面的标题。
      • 在当前页面显示导航条加载动画。
      • 隐藏导航条加载动画。
    • 导航
      • 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
      • 关闭当前页面，跳转到应用内的某个页面。
      • 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
    • 动画
      • 创建一个动画实例
      • 动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
        • 样式
        • 旋转
        • 缩放
        • 偏移
        • 倾斜
        • 矩阵变形
      • 动画队列
        • 调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
    • 绘图
      • 变形
      • 旋转
      • 变换
      • 清除
      • 绘制
      • 填充文本
      • 画布内容导出图片
  • 开放接口
    • 登陆
      • 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。
      • 签名加密
    • 用户信息
      • 获取用户信息
    • 微信支付
    • 模板消息
      • 使用说明
      • 接口说明
        • 获取 access_token
        • 发送模板消息
• 四部曲
  • 小程序1
    • 1. 什么叫小程序
      • 微信自身提供的技术底层支持，开发者可用写网站的语言，做出类似APP效果流畅的产品
    • 2. 带来哪些机会
      • 短期不可高估
        • 小程序瞄准的是未来，可能是物联网时代
      • 长期不可低估
        • 微信目前在一定程度上压制线上，扶持线下
      • 线下：传统行业/线下服务/智能硬件
      • 线上：群插件/小而美的工具/SaaS
        • 【SaaS是Software-as-a-service(软件即服务)。SaaS在业内的叫法是软件运营，或称软营。是一种基于互联网提供软件服务的应用模式。】
    • 3. 什么适合小程序
      • 场景化
        • 番茄闹钟：需要保持专注
      • 有传播
        • 微课：将课程分享到群里
        • 投票
        • 群插件
      • 有交易
        • 用户愿意在小程序上支付
          • 做小程序要摒弃APP和公众号思维
            • 产品目前重营销——短期不适合小程序
            • 产品力强—比较适合小程序
          • 做一些功能让用户用完就想分享
    • 4. 为什么要做小程序
      • 拉新
      • 促活
      • 变现
    • 5. 与公众号/实体结合
    • 6. 与线下结合
      • 出版社：书的每一页都附带二维码，可以了解作者写这段文字是的心理状态
      • 药行业
      • 小商铺/小卖部
        • 客户支付扫码，消费记录会记载在店铺小程序，后期可直接在小程序下单
    • 7. 七大武器
      • 推荐流量游戏
      • 搜索流量
      • 朋友圈流量
      • 社交关系
      • 消息推送
      • 用户关注
    • 8. 小程序基础
      • 小程序官方文档
      • w3school 在线教程 http://www.w3school.com.cn/
        • HTML
        • JavaScript
        • CSS
  • 小程序2
    • 一：小程序目前的能力
      • 如何快速了解小程序能力
        • 阅读小程序文档
        • 看demo
        • 持续关注新款小程序，了解各项能力
      • 具备何种能力
        • 组件（偏向展示）
          • 视图容器
            • 例子：朝夕日历Pro：首页使用上下滑动效果
          • 表单组件
            • 例：添加日程—编辑时间、主题地点，保存提交submit后，相当于提交了一个form表单，表单里提供的信息通过小程序提供的网络能力成立后台，后台表单里的数据打包后形成一个日程，返回给小程序，就能看到创建的日程
          • 导航navigation（页面链接跳转的功能）
            • 点击某一天的日程会跳转到详情页
            • 从1号点击到5号，使用的是redirect刷新页面功能，并非导航功能
          • 媒体组件
            • 图片
            • 音频
            • 视频
          • 地图
            • H5需要借用第三方SDK
        • 接口（偏向信息处理）
          • 用户信息接口
            • 名称。。。。
          • 获取设备信息
            • 手机机型
            • 设备定位
          • 网络请求（web
            • 只允许一个请求
          • 多媒体接口
            • 长按发语音
            • 录像：视频红包
            • 传图片
          • 位置信息接口
            • 明天在万达吃饭：根据用户位置信息作出判断，推荐附近最近的万达店
          • 数据存储接口
            • 日程：用户建立了一个日程，数据会储存在本地，再点开时，不需要再请求网络数据
            • 番茄闹钟：
          • 画布canvas
            • 有此接口，各种功能都能实现
              • 例子：饼状图展示一天内不同的番茄闹钟（微信不具备这功能）
              • 画表情
          • 分享接口
          • 支付接口
            • 前提：小程序有开通微信支付
          • 带参数二维码
            • 朝夕打卡
            • 小程序现在可支持无限次参数二维码，但一天只能请求1万次
          • 模板消息
            • 拽回用户：每次提交表单，在标签请求一个phone ID，7天之内用phoneID获取一次模板消息，通过请求模板将消息发给用户，每个phoneID跟每次表单请求是绑定的
    • 二：需要怎样的团队
      • 前端
      • 后端
      • 产品
      • 设计
    • 三：小程序设计初探
      • 设计格局
        • 有传播
          • 分享出去有用户红包
        • 场景化
          • 一想点外卖，就会想起美团外卖
        • 有交易
          • 先免费
      • UI设计
      • 设计风格
        • 例子：苹果 、谷歌
        • 产品一致性
        • 推荐体验小程序
          • 随手记
          • NoPingWestAI
        • 推荐工具
          • mac电脑：颜色正
          • Sketch
          • 设计网站：www.dribbble.com
    • 四：小程序运营初探
      • 暂时无法快速复制
      • 公众号推荐
        • 将小程序绑定公众号
        • 文章绑定
      • 模糊搜索
        • 数字优先级最高
        • 英文次之
        • 中文拼音首字母先后顺序：b>d
      • 广告导流
        • 目前导流效果一般
  • 小程序3
    • 1. 小程序的定位
      • 小程序跟S、Androl端平级，不属于APP、网页、服务号的附属
      • 需要业务拆分，抓关键词，不能做成APP的MVP（最小可执行产品），通过一个小程序引导到另外一个相关小程序
      • 运营方面：新战场，不能完全套用服务号和APP的套路，用新思路
        • 例子：视频红包鼓励发红包的人塞足够多的钱和红包数（因为小程序只能分享到群组），扩大宣传曝光量
    • 2. 宏观层面的设计
      • 案例分析场景化，有传播，有交易
        • 点歌：KTV预定功能，扫码打开
          • 想要唱歌，回去寻找点歌的小程序，这样具备了场景和交易功能
        • 点餐：扫码点餐支付
          • 发到群组AA支付
        • 桶装水
        • 星巴克：微信钱包页有星巴克的入口
          • 扫码进入星巴克小程序，下单购买咖啡送人：实现了场景化。有交易、有传插的要求
      • 如何场景化
        • 格物
        • 联想发散
        • 验证
        • 看到一个东西，联想到场景，思索能做到什么小程序，然后去验证场景是否适合小程序
    • 3. 如何设计小而美的产品（微观层面）
      • 对小程序的基本认知
        • 小程序设计规范
        • Material Design（谷歌设计风格）-Bin
        • 苹果设计风格（拟物风格）
      • 风格一致
        • 例：朝夕5款小程序
      • 颜色挡配
        • 原色
        • 提醒色
        • 多研究颜色搭配好服的设计品
      • 间距与对齐
    • 4. 案例
      • 随手记：阴影形成参差感，上半部分用插画，平衡左右。返回按键跟个小折委点一样
      • NoPingWestAl：统一大块中不用多种颜色，不足点：9 candy用黑色
      • 小程序官方组件展示；色里白灰，对卉致
      • 反例
        • 活动设计：时间地点人物的icon找不到对齐的依据
        • 名片：上下风格不一致，没对齐
    • 5. 设计推荐
      • 工具
        • Mac电脑
        • Zeplin：提高开发效率，sketch-健到 Zeplin
        • sketch
      • 灵感网站
        • Dribble
        • Behance：平面、Ul
        • UI中国
        • 站酷
        • 花瓣
    • 6. 小程序跟服务号三个最主要的不同点
      • 体验不同：加载时间短，反应流畅
      • 入口不同：服务号在讨论入口，小程序入口较深
      • 传播方式不同：小程序不能分享到朋友圈，只能分享到群组
  • 小程序4
    • 小程序运营推广初探
      • 拉新
      • 促活
      • 变现
      • 现阶段：产品力>营销
    • 推广渠道—拉新
      • 线下二维码：最活跃的小程序-摩拜单车
      • 绑定服务号/订阅号
        • 在文章里介绍小程序，二维码是服务号，扫码进入服务号页面，这个服务号绑定了几个小程序
      • 搜索优化
        • 小程序模糊搜索存在优化空间，但小程序搜索排列规则不断变化
      • 小程序商店/榜单
        • 例：爱范儿、在文章介绍小程序榜单，但用户暂时还没有习惯去搜索小程序
      • 朋友分享
        • 分享到群组
    • 运营小程序—促活
      • 线下二维码
        • 第一次拉新，二次以后促活
      • 公众号推送
        • 点击服务号的temb跳转到小程序（暂时还没实现）
        • 文章内容跟小程序相关
      • 模板消息
        • 在小程序里提交form表单，微信提供一个formID，7天内根据ID微信给一个模板消息，将模板消息发送给用户，模板消息会出现在微信首页消息，点击会跳转到小程序（微信方限制严格，效果有限）
      • 优质内容
        • 在用户印象里塑造形象：嘿店（打插边球）
        • 杂志类：跟服务号、订阅号类似，但不会发送给用户，需要用户主动打开
    • 案例分析
      • 朝夕万年历：群发渠道，做优化去适合场景
      • 群应用：名片功能，产品定位清晰
      • 小睡眠：榜单、微信文章曝光率高
      • xxx易？？？？：刷好评
    • 产品力在运营中的作用
      • 场景化
      • 有分享
      • 有交易
      • 运营参与产品设计，将运营规则融入到产品踏踏实实做好产品，引导用户转发，拉新和促活就能同步