软件创新实验室:微信小程序开发——配置文件代码编写
文章目录
- 声明
- App.json 文件代码编写
- Windows 代码编写
- Page 代码编写
- 底部触摸栏代码编写
声明
1)该文章部分内容整理自网上的资料,如不小心侵犯了大家的权益,还望海涵,并联系博主删除。
2)博主是萌新上路,文中如有不当之处,请各位大佬指出,共同进步,谢谢。
App.json 文件代码编写
新建一个小程序,打开app.json
,如下图所示 ,
不难发现,[]
表示数组,{}
表示对象,""
表示键值对,
键值对之间都是用,
隔开而不是 ;
,
在.json
模型中间是不可以使用注释的,
其他具体的参考百度等搜索引擎,
Windows 代码编写
在初始化的app.json
代码中,
有着一段Windon
对象的代码描述,
"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"}
其中,
backgroundTextStyle
:下拉背景字体、loading 图的样式,仅支持 dark/light
,
navigationBarBackgroundColor
:导航栏背景颜色,如#000000
,
navigationBarTitleText
:导航栏标题文字内容,
navigationBarTextStyle
:导航栏标题颜色,仅支持 black/white,
实例如下图,
当我们在编写代码时,开发者工具都附带了注解,还是十分便捷的,
Page 代码编写
初始化的Page
对象中会有两行代码,代表了两个路径,
"pages":["pages/index/index","pages/logs/logs"
]
微信小程序所有页面的路径都将呈现在这里,目前小程序只有两个页面,即index
和logs
,
在最下方,我们可以看见当前页面是index
页面,
点击头像,就会跳转到logs
页面,
可以发现,这个页面的导航栏标题叫查看启动日志,而不是像第一个页面的Weixin,
这里说明一下,我们在app.json
的window
对象中定义的属性是全部页面通用的,如果想对某些页面进行特定的修改,可以在该页面所属的.json
文件中加入语句,比如上图的logs.json
代码,
{"navigationBarTitleText": "查看启动日志","usingComponents": {}
}
底部触摸栏代码编写
找到小程序所在的文件夹,创建一个images
文件夹,
往里面塞入几张图片,这使在发开者工具中就会更新出这个文件夹及里面的图片,
然后在app.json
中定义一个新对象tabBar
,加入如下代码,
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/1.jpg","selectedIconPath": "images/2.jpg"},{"pagePath": "pages/logs/logs","text": "日志","iconPath": "images/3.png","selectedIconPath": "images/4.jpg"}]
}
其中,
pagePath
就是用户点击之后要跳转的页面的路径,
iconPath
就是底部图标的路径,
selectedIconPath
就是选中之后更换图标样式的该图标的路径,
最后的预览如下图,
显而易见,相较之前,底部多了一个触摸栏,而且点击不同的页面,显示的图标也是不一样的…
软件创新实验室:微信小程序开发——配置文件代码编写相关推荐
- 微信小程序开发记录一,开发工具的使用
工欲善其事,必先利其器. 开发工具的下载> 1.微信开发者工具的下载: 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/downl ...
- 软件创新实验室:微信小程序开发——账号注册和APPID申请
文章目录 声明 账号注册 APPID申请 声明 1)该文章部分内容整理自网上的资料,如不小心侵犯了大家的权益,还望海涵,并联系博主删除. 2)博主是萌新上路,文中如有不当之处,请各位大佬指出,共同进步 ...
- 微信小程序开发推进表_推进软件测试程序的最佳实践
微信小程序开发推进表 Software testing process is used to assess evaluate a product to see if it really meets t ...
- 在微信小程序开发软件中设置字体大小问题
我一开始接触微信小程序开发的时候,只是知道代码区的字体大小怎么调节(因为字体太小了,看得很累),于是我在网上查找方法想调节调试器那里的字体(字体太小看得很累).但是网上面都没有具体的方法,然后我就这样 ...
- api 定位 微信小程序 精度_微信小程序开发知识点集锦
一 小程序的生命周期 代码生命周期就是一个对象的生老病死,通常指程序从创建.开始.暂停.唤起.停止.卸载的过程.小程序的生命周期又可分为应用生命周期和页面的生命周期,先单独分析,在结合两者分析 应用生 ...
- 微信小程序开发与应用 第一章 微信小程序的基本知识1
1-1 第一章 第一节 微信小程序的基本知识1 文章目录 前言 一.注册一个小程序账号 二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
- web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
- 微信小程序开发分析总结
本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法.毕 ...
- 微信小程序开发语言一般有哪些?
微信小程序开发语言有哪些?小程序作为目前流行的编程开发和应用领域之一,受到市场的青睐.新手可能对小程序的开发完全困惑,不知道微信小程序开发语言一般有哪些,要用什么语言开发.下面让我们一起来看看. 一. ...
最新文章
- 第三个Python程序:Python函数
- 区块链的安全软肋是什么?
- win7设置java环境变量_win7下JAVA环境变量配置方法
- SAP MM模块的预留详解
- 转 Windows Mobile 开发工具和资源 黎波
- 基于 ida 的反汇编转换 Obj 的可行性 笔记(1)
- 数据结构与算法一篇帮助你吃下KMP算法
- Cookie的设置获取和删除
- 线性筛法求质数分解、欧拉函数
- vue-resource中文文档
- DHCP详细工作过程(转)
- Redis Cluster集群的搭建与测试
- H.264/AVC的编码格式
- multisim安装后无法连接数据库_如何解决multisim无法安装的问题
- html转excel有的没有边框,excel表格转word表格没有框线了怎么办
- Google开源项目Python 语言规范
- 拼多多通用优惠券漏洞被薅羊毛数千万 你的系统有反作弊防护吗?
- kali安装软件源软件
- python商业数据分析课程设计_商务数据分析实验室
- 【重磅】镭速云传企业版今天上线啦!