前端框架选型是企业提升开发效率与用户体验的关键因素
1699
2022-10-01
怎样编辑小程序页面内容?(微信小程序内容编辑在哪里编辑)
编辑小程序页面内容的方法:首先在编辑处右击pages选择新建目录创建个文件夹;然后再右击该文件夹选择新建Component,并输入文件名字;最后打开【app.json】文件,并操作导航栏的编辑即可。
程序员必备接口测试调试工具:立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试,同时在线协作,内容实时同步
编辑小程序页面内容的方法:
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" } ] }}-
相关学习推荐:微信小程序开发教程
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~