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

阅读 15527  ·  发布日期 2020-08-24 17:26  ·  温州雄霸网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】 编辑小程序页面内容的方法:首先在编辑处右击pages选择新建目录创建个文件夹;然后再右击该文件夹选择新建Component,并输入文件名字;最后打开【app.json】文件,并操作导航栏的编辑即可。编辑小程序页面内容的方法:1.首先呢,你要考虑好自己的首页是几个大页面,在此呢,以我的小小的Demo做样板参照吧,我的首页... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...

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

编辑小程序页面内容的方法:
首先在编辑处右击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中文网其它相关文章!
微信
分享相关标签:
小程序 页面内容本文原创发布php中文网,转载请注明出处,感谢您的尊重!
上一篇:
小程序接口是什么意思?
下一篇:
分享微信小程序签到考勤后端代码相关文章相关视频微信小程序 页面跳转传递值几种方法详解微信小程序 页面跳转传参的介绍微信小程序特有页面间传参方式微信小程序页面开发怎样编辑小程序页面内容?登录小程序中心认识小程序的目录结构小程序的rpx长度单位详解 [温州做小程序]