怎样编辑小程序页面内容
编辑小程序页面内容的方法:首先在编辑处右击pages选择新建目录创建个文件夹;然后再右击该文件夹选择新建Component,并输入文件名字;最后打开【app.json】文件,并操作导航栏的编辑即可。
编辑小程序页面内容的方法:
1.首先呢,你要考虑好自己的首页是几个大页面,在此呢,以我的小小的Demo做样板参照吧,我的首页是三大块,所以呢我要再创建两个页面,包含项目成功之后就有index界面,共三个界面
(PS(操作过程):右击pages选择新建目录创建个文件夹,然后呢再右击该文件夹选择新建Component,输入文件名字即可,当然这里的新建Component里面有四个文件---js、json、wxml、wxss,除了这种直接创建呢你也可以一个一个手动创建文件不过在js文件里的有const app = getApp();和page({}),否则会提示报错或者调用不了app.js中的一些方法。)
2.到此呢,就要编辑首页了,我这里的首页呢是有底部导航栏的的,所以往下看吧:
打开app.json文件(PS:建议像我这样的小白呢还是看一下官方的小程序代码构成介绍比较好):
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-配置
打开之后就开始操作导航栏的编辑了,看代码:
(注意:用的时候记得把下面的注释全都删了,在app.json中不能有注释,否则会报错,我的注释只是为了大家方便理解而已,报错原因还挺让你出乎意料,我也是试了几次才发现。)
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/asset/asset",
"pages/personal/personal"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black", "navigationStyle": "custom" // 自定义头部导航时添加
},
"sitemapLocation": "sitemap.json",
"tabBar": { //这里的tabBar就是导航栏的编辑了
"color": "red", //tab 上的文字默认颜色
"selectedColor": "#1469bc", //tab 上的文字被选中时的颜色
"backgroundColor": "#fff", //背景颜色(背景颜色的值用#的写法来写即16进制,普通rgb、rgba写法不会生效,)
"positon": "bottom", //导航栏放在的位置,可以不写但默认会显示在底部,我这里是方便大家了解。放在上遍就改成top,至于左右么,我就没试过了,就交给各位大哥大了。
"list": [
{
"pagePath": "pages/index/index", //页面路径
"text": "首页", //导航栏显示的文字
"iconPath": "images/home1.png", //默认展示的图片
"selectedIconPath": "images/home2.png" //被选中时展示的图片(我这里是为了有一个颜色差)
},
{
"pagePath": "pages/asset/asset",
"text": "资产",
"iconPath": "images/asset1.png",
"selectedIconPath": "images/asset2.png"
},
{
"pagePath": "pages/personal/personal",
"text": "我的",
"iconPath": "images/my1.png",
"selectedIconPath": "images/my2.png"
}
]
}
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbjikk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24