微信小程序页面的过长时间的等待会引起用户的不良情绪
发表时间：2023-10-29 21:09:59
文章来源：炫佑科技
浏览次数：123
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序页面的过长时间的等待会引起用户的不良情绪
3、异常可控，有出路
在设计任何任务和流程时，异常状态和流程往往很容易被忽视，而这些异常场景往往是用户*沮丧、*需要帮助的时候。 因此，需要特别关注异常状态的设计，并在异常发生时给予用户必要的支持。 提供状态提示和解决方案，以便有出路。
要防止出现用户异常状态卡在某个页面而无处可去的情况。 上述模态对话框和结果页面可以作为异常情况的提醒。 另外，在表单页面，尤其是表单项较多的页面微信小程序页面的过长时间的等待会引起用户的不良情绪，应明确指出错误项，以便用户修改。
4、方便、优雅
从PC时代的物理键盘和鼠标，到移动时代的手指，虽然输入设备已经大大简化，但手指操作的准确性却远不如键盘和鼠标精确。 为了适应这种变化，开发需要在设计过程中充分利用手机功能，为用户提供方便、优雅的控制界面。
1、减少投入
由于手机键盘面积小且密集，输入困难，容易导致输入错误。 因此，在设计小程序页面时，尽量减少用户输入，并利用现有的界面或其他易于操作的选择控件来改善用户的输入体验。
2、避免误操作
因为在手机上我们是通过手指触摸屏幕来控制界面的，所以手指的点击精度远不如鼠标。 因此，我们在设计页面上需要点击的控件时，需要充分考虑它们的热区面积，避免可点击区域过小或过小。 过密易造成误动作。 当原本在电脑屏幕上使用的界面未经任何适配而简单地直接移植到手机上时，往往很容易出现这样的问题。 由于手机屏幕分辨率不同，*佳点击像素尺寸并不完全一致，但换算成物理尺寸后，大致在7mm-9mm之间。 微信提供的标准组件库中，各种控件元素已经考虑到了页面点击效果以及对不同屏幕的适配，因此再次建议使用或模仿标准控件尺寸进行设计。
3.使用接口来提高性能
微信设计中心推出了一套Web标准控件库，包括设计控件库和设计控件库。 未来我们也会完善小程序组件。 这些控件充分考虑了移动页面的特点，可以保证可以在移动页面上使用。 可用性和操作性能； 同时，微信开发团队正在不断完善和扩展微信小程序接口，提供微信公共库。 使用这些资源不仅可以为用户提供更快的服务，还可以大大提高页面性能。 功能，无形中提升了用户体验。
5、统一稳定
除了上述原则外，建议接入微信的小程序要时刻注意不同页面之间的统一性和连续性，尽量在不同页面上使用一致的控件和交互方式。
统一的页面体验和一致的界面元素将有助于以*小的学习成本实现使用目标，并减少页面跳转带来的不适感。 正因为如此，小程序可以根据需要使用微信提供的标准控件，达到统一稳定的目的。
6. 外观规格
1. 字体规格
微信中字体的使用与运行系统字体一致。 常见的字体大小为 20、18、17、16,14、13、11 (pt)。 使用场景如下：
字体颜色：
主要内容为黑色，次要内容为灰色； 时间戳和表单默认值为浅灰色； 作为主要内容的大描述内容是半黑色。
蓝色是链接的颜色，绿色是完成的颜色，红色是错误的颜色。 将新闻和状态的透明度分别降低至 20% 和 10%。
2.列出视觉规格：
3.表单输入的视觉规范：
4、按钮使用原则：
5、图标使用原则：
开发
1. 框架
小程序开发框架的目标是让开发以*简单、*高效的方式在微信中开发具有原生APP体验的服务。
框架提供了自己的视图层描述语言WXML和WXSS，以及基础的逻辑层框架，并提供了视图层和逻辑层之间的数据传输和事件系统，让开发可以轻松地专注于数据和逻辑。
2. 基本组成
框架为开发提供了一系列基础组件，开发可以通过组合这些基础组件来快速开发。
3、接口
框架提供了丰富的微信原生API，可以轻松激活微信提供的能力，如获取用户信息、本地存储、支付功能等。
4. 简单教程
1.获取微信小程序的AppID
登录微信公众平台后，您可以在网站“设置”-“开发设置”中查看微信小程序的AppID。 请注意，服务帐号或订阅帐号的AppID不能直接使用。
注意：如果您想在非管理员微信号的手机上体验小程序，那么我们还需要操作“绑定开发”。 即在“用户身份”-“开发”模块中，绑定体验小程序所需的微信ID。 本教程默认使用管理员微信号注册账号和体验。
2.创建项目
我们需要使用开发工具来完成小程序创建和代码编辑。
开发工具安装完成后，打开并使用微信扫描二维码登录。选择创建“项目”，填写上面获取到的AppID，设置一个本地项目名称（不是小程序名称），如“我的” First ”，选择本地文件夹作为代码存放目录，点击“New ”即可。
为了方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹为空文件夹，开发会提示是否需要创建快速启动项目。 选择“是”，开发工具会帮我们在开发目录下生成一个简单的demo。
项目创建成功后，我们可以点击项目进入，看到完整的开发工具界面。 点击左侧导航在“编辑”中查看并编辑我们的代码，在“调试”中测试代码在微信客户端模拟小程序的效果，在“项目”中可以发送到手机上预览实际效果。
3. 编写代码
创建小程序实例：
点击开发工具左侧导航栏的“编辑”，我们可以看到这个项目已经初始化完毕，并且包含了一些简单的代码文件。 *关键、*本质的是app.js、app.json和app.wxss。 其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序会读取这些文件并生成小程序实例。
下面我们简单了解一下这三个文件的作用，方便从头开始修改和开发自己的微信小程序。
app.js是小程序的脚本代码。 我们可以监控和处理小程序的生命周期函数，并在这个文件中声明全局变量。 调用框架提供的丰富API，例如本例中的同步存储、同步读取本地数据。
//app.jsApp({
: () { //调用API从本地缓存获取数据
var log = wx.('logs') || []
日志。(Date.now())
wx.('日志', 日志)
},
:(cb){ var that = this; if(这个..){ cb == “” && cb(这个..)
}else{ //调用登录接口
wx.登录({
：（）{
wx.({
：（资源）{
那..=资源； cb == “” && cb(那个..)
})
});
},
:{
：无效的
})
app.json 是整个小程序的全局配置。 在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式怎样使用微信开发者工具制作小程序，配置默认标题。 请注意，不能向该文件添加任何注释。
{“页面”：[“页面/索引/索引”，“页面/日志/日志”
], "":{ "":"光", "": "#fff", "xt": "", "le":"黑色"
app.wxss是整个小程序的通用样式表。
/**app.wxss**/。 {：100%； ： 柔性; 柔性-： ; 对齐项目：; -： 空间-; : 0; 盒子-：-盒子；
创建页面
在本教程中，我们有两个页面，索引页面和日志页面，分别是欢迎页面和小程序启动日志显示页面。 它们都在页面目录中。 app.json的pages中需要写入微信小程序中每个页面的【路径+页面名称】，pages中的**个页面就是小程序的首页。
每个小程序页面由同一路径下四个不同的同名后缀文件组成，如：index.js、index.wxml、index.wxss、index.json。 .js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的文件是样式表文件，.wxml 后缀的文件是页面结构文件。
index.wxml是页面的结构文件：
{{.}}
{{座右铭}}
在本例中， 、 和 用于构建页面结构、绑定数据和交互处理功能。
index.js是页面的脚本文件。 在这个文件中，我们可以监控和处理页面的生命周期函数、获取小程序实例、声明和处理数据、响应页面交互事件等。
//index.js//获取应用实例 var app = ()
页（{
数据： {
座右铭：“你好世界”，
：{}
}, //事件处理函数
：（）{
wx.({
网址：'../日志/日志'
})
},
: () { .log('') var that = this
//调用应用实例方法获取全局数据
app.((){ //更新数据
那。（{
:
})
})
})
index.wxss 是页面的样式表：
/**index.wxss**/. { ： 柔性; 柔性-： ; 对齐项目：;
}。- { 宽度： ; : ; ：20rpx； -：50%；
}.- { 颜色：#aaa;
}.{ -顶部：200px；
页面的样式表是可选的。 当存在页面样式表时，页面样式表中的样式规则会级联到app.wxss中的样式规则。 如果不指定页面的样式表，也可以直接使用页面结构文件中app.wxss中指定的样式规则。
index.json是页面的配置文件：
页面配置文件是可选的。 当存在页面配置文件时，页面中的配置项会覆盖app.json中相同的配置项。 如果没有指定页面配置文件，页面会直接使用app.json中的默认配置。
日志的页面结构：
{{索引+1}}。 {{日志}}
日志页面使用控制标签来组织代码，使用wx:for绑定日志数据，并将日志数据循环到节点中。
//logs.jsvar util = ('../../utils/util.js')
页（{
数据： {
日志：[]
},
： （） { 这。（{
日志： (wx.('logs') || []).map( (log) { util.(new Date(log))
})
})
})
4. 手机预览
开发工具左侧菜单栏选择“项目”，点击“预览”，扫描二维码即可在微信客户端体验。
运营
具体操作规范：
使用微信小程序平台服务，您必须阅读并遵守《微信小程序平台服务条款》及腾讯为此制定的特别规则。
能力
小程序七大能力解读：
离线二维码扫描：用户可以在小程序中使用二维码扫描。
对话分享：用户可以将小程序或其中的任意页面分享给好友或群聊。
消息通知：商家可以向接受服务的用户发送模板消息，用户可以在小程序内联系客服，支持文字和图片。
小程序切换：用户在使用小程序时可以快速返回聊天。
历史列表：用户使用过的小程序会放入列表中，方便下次使用。
公众号关联：微信小程序可以与公众号关联。
搜索查找：用户可以根据名称或品牌直接搜索小程序。
问答
1.小程序的入口在哪里？
小程序在微信中没有入口。 微信希望小程序的启动来自于扫描二维码。
2. 有没有可以下载小程序应用商店？
小程序没有下载过程，因此不存在小程序应用商店。
3、小程序可以推送消息吗？
小程序不能推送消息，但会提供相对有限的服务访问能力。
