axure做微信小程序 - axure教程

 

       涉及到得axure主要知识点：

 

1. axure做微信小程序

   开发前，最好先做个原型，把自己的需求理顺（我用的工具为Axure， 下载的是一个免费版，功能不全，但自己梳理想法足够了）。

2. 2

   注册一个开发工具账号

3. 现在微信小程序开发工具大多都是纯线上版本，无需下载；并且，axure做微信小程序打开注册页后一般都可以用微信扫码即可完成注册，非常简便。

   需要补充说明下：想开发微信小程序，微信官方的开发工具肯定是要用的axure做微信小程序，但是对于没有编程基础的人来说，这个官方工具只能做做最后的发布。最复杂的开发制作环节axure做微信小程序，咱这种初级人员玩不转。所以像我这样的菜鸟群体，制作时得依靠市面上第三方工具。有很多，各有特色；当然，工具固然重要，但背后思路方法更为本质。

4. 这个微信高保真原型，初衷是尽己所能最大限度的模仿真实的axure做微信小程序iPhone端微信功能，主要从以下几点着手：

   将所有的子页面全都堆放在axure的一个页面中(如下图)，再在iPhone事先放置的框架中打开这个页面，通过相关的动态面板移动或隐藏等功能使各子页面在框架中组织有序。如：点按“返回”，axure做微信小程序当前页面向右推出，目标页面从左边进入。界面中几乎所有的icon都与iPhone端微信一致。采用axure做微信小程序iPhone5c外壳感官体验更柔和一些，iPhone内框架长宽比例为320px*568px，所有的页面也是基于这个比例设置。

5. 在 axure 原型制作的过程中，很多时候我们需要触发一个又一个事件， 以交互设计效果展示的需求。 在这些事件里我们经常需要在满足某一条件时 完成指定的动作。比如：axure做微信小程序文本框文字为空的时候点击按钮无效。或者拖动动 态面板没到达指定位置退回原位等。本次解析的主要是针对微信聊天页面，主要功能包括：

6. 聊天列表上下拖动
7. 删除聊天列表，消息标记为未读、已读
8. 动态面板瞬时拖动、移动、隐藏及显示（动态面板展开）
9. 中继器axure做微信小程序
10. 字符截取
11. 键盘输入
    • 聊天信息回复

    • 拖动释放后：

      向下拖动释放后axure做微信小程序需要让面板回到拖动前的位置；向上拖动时如果聊天列表底部边界小于导航栏顶部边界的则将聊天列表移动到底边界与导航菜单定边界对齐的位置。

      向下拖动释放后设置“移动动态面板结束后”将动态面板移动到绝对axure做微信小程序位置，也就是回到A点处（0，78）。
      向上拖动释放后设置“移动动态面板结束后”，如果动态面板底边界小于导航栏的顶边界，那么将动态面板移动到和导航栏顶边界相同的位置，也就是说移动到绝对位置[[516-chatList.height]]。
      拖动结束后动态面板回到之前的位置是有一个延迟的axure做微信小程序效果，所以需添加一个线性移动动画耗时250ms即可。