微信小程序有什么界面例子?如何进行微信小程序的页面搭建?
微信小程序最近推出了新功能,各界人士都开始研究。对于微信小程序的使用,很多公司企业都喜欢。那么关于微信小程序页面的例子,下面小编就给大家分享一些微信小程序页面。我们来看一个小程序创建的页面示例,学习一下吧!
本文通过一个实际例子来讲解如何搭建微信小程序页面。首先我们看一下本文要实现的页面效果:
开发工具下载
微信官方有集成开发调试、代码编辑、程序发布等功能的开发者工具。
微信小程序架构
这是程序的基本结构。最关键最本质的是app.js、app.json、app.wxss
这三个。其中.js后缀是脚本文件,json后缀是配置文件,wxss后缀是样式表文件。
底部标签
底部标签是tabBar。实现比较简单,只需要简单的配置。应用程序.json
{
“页面”:[
'页面/功能/功能',
'页数/付费/付费',
'页面/帐户/帐户',
'页面/索引/索引',
'页面/日志/日志'
],
'标签栏':{
'颜色''#464a56',
'选定的颜色''#6595e9',
'背景颜色''#FFFFFF',
'borderStyle''白色',
'列表': [{
'pagePath''页面/功能/功能',
'文本':'功能',
'iconPath''images/tab_function_default.png',
'selectedIconPath''images/tab_function_sel.png'
},{
'pagePath''页面/支付/支付',
'文本''付款',
'iconPath''images/tab_consume_default.png',
'selectedIconPath''images/tab_consume_sel.png'
},{
'pagePath''页面/帐户/帐户',
'文本':'帐户',
'iconPath''images/tab_account_default.png',
'selectedIconPath''images/tab_account_sel.png'
}]
},
'窗户':{
'navigationBarBackgroundColor''#6595e9',
'navigationBarTextStyle':'白色',
'navigationBarTitleText''V50',
'背景颜色''#eeeeee',
'backgroundTextStyle':'浅色'
}
}
值得注意的是,页面
接受一个数组,每一项是一个字符串,用于指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组中的第一项代表小程序的初始页面。小程序增减页面需要正确
要修改的页面数组。
文件名中不需要写文件后缀,因为框架会自动寻找路径中的.json、js、wxml、wxss这四个文件进行集成。
页面标题
如何实现这个标题?我们看一下官方文档。
看到这个就应该知道需要在指定页面的json文件中配置该页面了。继续查看官方文档
就是这样!我们只需要将所有页面通用的配置放在page.json中,然后在每个页面中
只需在.json 文件中配置每个页面的唯一属性即可。因为它在上面
普通页面的window属性已经在app.json中配置好了。我们只需要在function.json中配置页面标题即可:
{
'navigationBarTitleText''功能'
以上就是今天微信小程序制作的页面示例的全部内容了!你明白吗?看完这篇文章,大家应该对微信小程序制作的页面示例有了清晰的认识了!希望冯薇薇的文章能给大家带来一些帮助。