微信小程序产品怎么设计

微信小程序产品怎么设计？微信小程序怎么设计？想知道微信小程序产品怎么设计？下面是如何设计小编编译的微信小程序产品。以下内容供你参考。

摘要

基于微信小程序的轻量级特性，我们制定了小程序界面的设计指南和建议。设计准则基于充分尊重用户的知情权和操作权。目的是在微信生态系统内建立友好、高效、一致的用户体验，同时在很大程度上适应和支持不同的需求，实现用户和小程序服务商的双赢。

友好的礼貌

在微信上使用小程序服务时，为了避免复杂环境对用户注意力的干扰，小程序的设计应减少无关设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，引导用户友好地操作。

高光

每个页面都应该有一个清晰的焦点，这样用户在进入新页面时就可以快速理解页面内容。在确定关键点的前提下，尽量避免其他与用户决策和操作无关的干扰因素。

反例指示

这个页面的主题是查询，但是增加了很多与查询无关的业务门户，与用户的目标无关，容易造成用户迷失

纠正指示

删除与用户目标无关的内容，明确页面主题，在技术和页面控制的前提下，提供有助于用户决策和操作的帮助内容，如近期搜索词等。#formatimgid_1#

反例指示

没有主次之分的操作，让用户别无选择。

纠正指示

首先要避免并列太多操作让用户选择。当我们要并列多个操作时，要区分主次操作，降低用户选择的难度。

#formatimgid_3#

清除过程

为了使用户能够流畅地使用页面，当用户进行某个操作过程时，应该避免因用户目标过程之外的内容而打断用户。

反例指示

用户打算搜索，但在进入页面时被突然出现的模态抽奖框打断；对彩票不感兴趣的用户是非常不友好的干扰；即使有些用户真的被“吸引人”的彩票所吸引，他们也可能在离开主流程去抽奖后忘记了比较初的目标，进而失去对产品真正价值的使用和理解。

清晰明确

一旦用户进入我们的小程序页面，我们就有责任和义务明确告诉用户他在哪里，可以去哪里，以保证用户可以轻松穿梭页面而不迷路，从而为用户提供安全愉快的体验。

导航清晰，来去自由

导航是保证用户在浏览和跳转网页时不迷路的比较关键因素。导航需要告诉用户在哪里，可以去哪里，怎么回去。首先，微信系统中所有小程序的所有页面都会有微信提供的导航条，解决去哪里，怎么回的问题。在微信级导航中保持一致的体验，有助于用户在微信内部形成统一的体验和互动认知，而不会在小程序与其他微信页面的切换中增加学习成本或改变使用习惯。

微信导航栏

微信导航条直接从客户端继承。除了导航栏的颜色，开发者不需要定制它的内容。但是开发者需要指定小程序各页面的跳转关系，这样导航系统才能合理工作。

微信导航栏分为导航区、标题区和操作区。其中导航区域控制节目页面进度。目前导航栏分为两种基本配色方案。

导航区(ios)

微信进入小程序第一页时，导航区通常只有一个操作——“返回”，即在进入小程序前返回微信页面。小程序后进入二级页面，导航区操作为“返回”、“关闭”。“返回”，即返回到之前的小程序界面或微信界面。“关闭”，即在当前界面直接退出小程序，返回微信页面后再进入小程序。

微信小程序产品怎么设计？看了以上内容，你知道微信小程序产品怎么设计吗？更精彩相关的内容在微乔。想了解更多相关内容，请多关注源社网的小节目频道。

下面是题目的开头。如何开发和使用微信小程序的聊天功能？标题到此结束

估计很多人都用过微信的聊天功能。其实这个功能是通过开发微信小程序实现的。微信小程序的聊天功能怎么开发？我们来看看具体的步骤。

1、总体框架

很简单，两页。两个标签，并修改窗口标题栏和标签条颜色等属性。这些都是在app.json中完成的。

2.图像组件的使用

镜像组件介绍：https://mp . weixin . qq.com/debug/wxa doc/dev/component/image . html？t=20211122

图像组件的使用类似于网络开发的图像标签的使用。本文重点研究图像的模式属性，它规定了图像的缩放和裁剪模式，提供了三种缩放和九种裁剪模式。

3.表格的使用

在组件中提交用户输入的表单。

属性名称类型描述

将报告-提交用于发送模板消息的布尔返回格式

bindsubmiteventhandle携带表单中的数据来触发提交事件。detail={ value : {' name ' : ' value ' }，formid: "}

重置事件在bindreseteventhandle窗体重置时触发

当您在表单中单击表单类型为submit的组件时，表单组件中的值将被提交，您需要在表单组件中添加名称作为关键字。

表单提交的要点：

表单中的表单组件必须具有名称属性。

表单内按钮的formtype属性是submit。

表单的bindsubmit属性是数据提交事件绑定的响应函数。

4.wx.request接口的使用

wx.request启动https请求。一个微信小程序只能有5个网络请求连接。

在开发调试模式下，开发工具不做安全检查，所以可以请求http。

wx.request({

url: 'test.php '，//只是一个例子，不是真正的接口地址

数据： {

x: ' '，“y:”

},

header: {

内容类型' : '应用程序/json '

},

method: 'get '，成功：功能(res) {

console.log(res.data)

}

})12345678910111213141234567891011121314

理解http应该熟悉这个开发接口参数。首先，url是接口地址，数据是请求参数，header是请求头，不能在header中设置referer。方法是请求的方法，包括选项、获取、头、发布、放置、删除、跟踪和连接

5.滚动视图组件的使用

滚动视图是一个可滚动的视图容器。这个主要用于聊天的界面需要在有新消息时自动滚动到比较新的聊天位置。属性很多，请参考文档：https://mp . weixin . qq.com/debug/wxa doc/dev/component/scroll-view . html？t=20211122

属性名称类型默认值的描述

scroll-x booleanfalse

scroll-yboole false允许垂直滚动

当上阈值数字50远离顶部/左侧(单位px)时，触发滚动顶部事件

当下限数字50远离底部/右侧(在px中)时，触发scrolltolower事件

滚动顶部数字设置垂直滚动条的位置

向左滚动数字设置水平滚动条的位置

滚动到视图字符串值应该是一个子元素id，然后滚动到这个元素，元素的顶部与滚动区域的顶部对齐

bindscrolltouppereventhandle滚动到顶部/左侧将触发scrolltoupper事件

滚动到bindscrolltolowereventhandle的底部/右侧将触发scrolltolower事件

bindscrolleventhandle滚动时触发，event.detail={scrollleft，scrolltop，scrollheight，scrollwidth，deltax，deltay}

这里主要利用scroll-y(允许垂直滚动)和scroll-top(设置垂直滚动条的位置)的属性来完成聊天内容的自动关闭。

6.两个坑

一、同时更新数据和滚动，达不到效果

您需要先更新数据，然后更新scrolltop

只有这样，您才能更新聊天页面的内容，并将滚动条放在正确的位置

this . setdata({ content : newcontent })；

this . setdata({ scroll top : newscroll top })；

不能写成这样

this.setdata({

content:newcontent，scrolltop:newscrolltop

});1234567812345678

b.textarea的value属性绑定逻辑层的数据数据段

在逻辑层调用setdata ({text: ""})时，textarea中的数据不会被清空。这个问题我们还没有找到解决方法，等找到方法再更新。