首页 > 课堂 > 小程序 > 正文

微信小程序测试注意点 微信小程序测试要注意的地方有哪些?

2020-03-21 16:31:10
字体:
来源:转载
供稿:网友

微信小程序测试注意点,微信小程序测试要注意的地方有哪些?微信小程序测试已经进入最后阶段,同时也宣布1月9日正式上线,那么对于新手来说微信小程序测试需要注意点什么呢?下面一起来看看吧。

微信小程序测试注意点 微信小程序测试要注意的地方有哪些?

微信小程序,微信小程序测试

一、小程序开发并非随心所欲,你需要看懂以下规则才能不走弯路:

1、小程序的功能定义与实际提供的服务必须一致;小程序所提供的类目,必须放置在首页,最深也只能放置在二级页面;

2、小程序所提供的服务目前暂时不能涉及游戏、直播等服务(涉黄涉赌就不用多说了)内容也不能涉及测试类内容;比如:算命,抽签,星座运势等;

3、小程序所提供的服务可以允许设置付费可见及隐藏可见(这点对于开发者来说可以发挥地方很多,具体在后面文章做详细论述);

4、小程序不能提供与微信现有功能相似的服务,如含朋友圈、漂流瓶等,也不能提供导航、排行榜、互推的服务;

5、小程序一如既往的不支持诱导分享、诱导关注,虚假欺诈等内容,也不支持广告展示比例超过50%的页面内容;

6、小程序不得诱导、泄露、转让用户的任何数据。所有行为都必须经过用户授权或有明显提示;

二、微信团队对小程序设计也有严格定义,前端工程师们需要看懂以下规则:

1、页面设计需要考虑除微信导航以外其它导航页面的设计,遵循“导航明确,来去自如”,也就是能让客户知道,当前在哪,可以去哪,如何回去等问题。

2、页面设计需要遵循重点突出,并且不能出现与业务无关的业务入口,正反举例:

错误示例

以上页面主题是查询,但查询按钮下面却出现“今日热点|头条新闻”的无关内容

正确示例

以上页面查询按钮下面显示的是新搜索过的关键词,与页面主题匹配

3、页面设计无需考虑微信一级菜单的导航,微信系统内的所有小程序均会自带有微信提供的导航栏

标准导航图

4、微信导航栏自定义颜色规则,开发者如果需要自设导航需要与官方定义的颜色和谐搭配

官方定义导航颜色

5、小程序首页可选择微信提供的原生底部标签分页样式,该样式仅供小程序首页使用。初期的页面内导航设计尽可能利用微信自带导航Tab,添加自有导航可以添加标签分页(Tab)导航,标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。

小程序标准导航样式

6、小程序已经明确定义了标准的启动页面和页面下拉刷新加载样式,无需开发者设计,启动页面只能上传品牌LOGO且不能更改。

小程序启动页标准样式

下拉加载页标准样式

7、小程序页面的加载反馈和结果反馈应提供载入进度和结果提示,并且每个页面都要有明确的指引操作和退出提示。

加载页必须有加载提示如右边图

结果反馈必须有明确提示如:已发送

8、小程序页面设计需要遵循“减少输入,巧用接口,多用选择”的原则,比较大限度的优化用户体验,减少或避免不必要的键盘输入。

搜索内容建议设计成按钮选择而不是让用户手工输入

持卡人和卡号不建议让用户直接输入而是调用接口让用户选择

9、小程序页面的字体尽量与用户所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 10(pt),字体颜色主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑;蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%

字体规范

字体颜色

主内容 Black 黑色,次内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段说明内容用 Semi 黑;

蓝色为链接用色,绿色为完成字样色,红色为出错用色

10、小程序页面同样明确定义了列表视觉规范、表单输入视觉规范、按钮使用原则、图标使用原则等详细的规范。

三、小程序对开发规则也进行了相应的解释和定义,基本定义如下:

1、开发者需要在公众号小程序的后台“设置”-“开发者设置”中获取AppID ,通过开发者工具,来完成小程序创建和代码编辑。

2、开发者在小程序后后台绑定身份之后,可以在开发者工具内实现编辑、预览、提交等所有工作流程。

3、小程序开发的基本文件包括app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

4、每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表