黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

怎样编辑小程序页面内容?

来源:黔优媒体网   时间:2024-09-19

编辑小程序页面内容的方法:首先在编辑处右击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 
}

相关学习推荐:微信小程序开发教程

以上就是怎样编辑小程序页面内容?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:怎样编辑小程序页面内容?;欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)