如何使用微信小程序ui框架

前面的小系列已经介绍了微信小程序的ui设计工具和ui设计规范的使用。我们来讲解一下微信小程序的ui框架，包括加载ui的一些问题。

开始页面加载

小程序启动页面是小程序在微信中一定程度上展现品牌特色的页面之一。此页面将突出显示小程序的品牌特征和加载状态。除了品牌logo的显示，启动页面上的其他所有元素，比如加载进度说明，都是微信统一提供的，不可更改，无需开发者开发。

页面下拉刷新加载

微信小程序内部，微信提供标准的页面下拉刷新加载能力和小程序风格，开发者无需自行开发。

在页面中加载反馈

开发人员可以在小程序中自定义页面内容的加载样式。建议自定义加载风格尽量简洁，用简单的动画告知用户加载过程。开发者也可以使用微信提供的统一页面加载样式，如图中示例所示。

模态载荷

modal的加载方式会覆盖整个页面。因为不可能讲清楚具体的加载位置或者内容，可能会引起用户的焦虑，所以要谨慎使用。除了一些全局操作，不要使用模式加载。

局部加载反馈

本地加载反馈意味着反馈只在触发加载的页面上本地执行。这种反馈机制更有针对性，页面抖动更少，是微信推荐的反馈方式。例如：

加载反馈注意事项如果加载时间较长，应提供取消操作，并使用进度条显示加载进度。

加载时应保持动画效果。没有动画的加载很容易给人界面卡住的错觉。

不要在同一页面上同时使用多个加载动画。

结果反馈

除了在用户等待过程中给予及时的反馈外，还需要对操作结果给予明确的反馈。根据实际情况，可以选择不同的结果反馈风格。对于页面的本地操作，可以在操作区直接反馈，页面级操作的结果可以使用toast、modal对话框或结果页面显示。

页面本地操作结果反馈

对于页面的本地操作，可以在操作区直接反馈，例如多选控件前后如下图所示。对于常用控件，微信设计中心会提供一个控件库，其中所有控件都提供了完整的操作反馈。

页面全局操作结果-弹出提示(吐司)

toast适合轻量级的成功提示。1.5秒后自动消失，不中断进程，对用户影响不大。toast适合不需要强调的操作提醒，比如成功提示。特别注意这种形式不适合错误提示，因为错误提示要明确告知用户，所以不适合使用闪烁的弹出提示。

？页面全局操作结果-模式对话框

对于用户需要了解清楚的操作结果状态，可以通过模态对话框进行提示，并可以附上下一步操作指南。

？页面全局操作结果-结果页面

当操作结果是当前流程结束时，可以使用操作结果页面进行反馈。这样，比较强烈、比较清晰地告知用户操作已经完成，可以根据实际情况给出下一步操作的指导。

下面是题目的开头。微信小程序如何修改页面标题？标题到此结束

如何通过微信小程序修改页面标题？开发微信小程序页面时，可以修改微信小程序页面标题，修改微信小程序页面标题的目的是为了提高微信小程序用户的体验。

如何通过微信小程序修改页面标题？

为了提高微信小程序的用户体验，原则上在设计页面时，应该根据不同的内容修改页面顶部的标题。

微信小程序的固定架构如下：

页

例子

示例. js

example.json

example.wxml

example.wxss

实用工具

app.js

app.json

app.wxss

微信小程序默认架构中有一个全局设置文件app.json，用于设置跳转页面链接、表单格式、tabbar、网络超时。

对页面标题有两个要求：页面功能是固定的(比如设置功能和个人信息显示功能)，这类页面可以以。applet函数页上的json文件；另一个要求是页面内容与业务有很强的相关性，只有从数据库中获取数据后才能确定页面标题。这种页面需要在加载函数页面时动态设置。

1.页面标题内容是固定的

1.1示例：

//在example.json文件中写入页面标题代码的格式

{

navigationbartitletext': '充值业务'

}

1.2图表：

2.用小程序数据库返回的内容动态更新页面标题

//example.js加载时动态设置页面标题

//获取应用程序实例

var app=getapp

页面({

data: {}，onload:函数(选项){

that=this

that.setdata({

mer名称： options.mername//options是页面路由期间传递的参数

})

wx.setnavigationbartitle({

标题： that.data.mername//页面标题为路由参数

})

},

onready:函数{

//页面渲染完成

},

onshow:函数{

//页面显示

},

onhide:函数{

//隐藏页面

},

onunload:函数{

//页面关闭

}

})