小程序代码构成

一. .json后缀的JSON配置文件

JSON配置

JSON是一种数据格式, 并不是编程语言, 在小程序中, JSON扮演的静态配置的角色。一个小程序应用程序中会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json。

注意：配置文件中不能出现注释。

1.所有的页面 pages

所有的页面都放在pages这个文件夹中。

1.1页面index

pages文件夹中的子文件夹index为首页代码。

1.2页面logs

pages文件夹中的子文件夹logs为日志。

2.小程序全局配置 app.json

app.json是当前小程序的全局配置, 包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。项目里边的app.json配置内容如下:

//公共设置
{"pages":[//谁在前面先显示谁"pages/index/index","pages/logs/logs""pages/index2/index2",//新增一个index2的页面],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/logs","text": "日志"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true,"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

配置中每一项的含义:

1. pages字段–用于描述当前小程序所有页面路径, 这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.

2. window字段–定义小程序所有页面的顶部背景颜色, 文字颜色定义等。

3. tabBar: 底部tab栏的表现。类型为Object。

4. networkTiemout：网络超时时间。类型为Object。

5. debug：是否开启 debug 模式, 默认关闭.

6. functionalPages: 是否启用插件功能页, 默认关闭

7. navigateToMiniProgramAppIdList: 需要跳转的小程序列表.

window的属性:

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000	导航栏背景颜色
navigationBarTextStyle	string	white	导航栏标题颜色,仅支持black/white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式, 仅支持以下值: default默认样式custom自定义导航栏,只保留右上角胶囊按钮.
backgroundColor	HexColor	#fff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式, 仅支持 dark/light
backgroundColorTop	string	#fff	顶部窗口的背景色,仅IOS支持
backgroundColorBottom	string	#fff	底部窗口的背景颜色,仅IOS支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新.
onReachBottomDistance	number	50	页面上拉触底事件触发时据页面底部距离,单位为px.
pageOrientation	string	portrait	屏幕旋转设置

tabBar的属性

属性	类型	必填	默认值	描述
color	HexColor	是		tab上的文字颜色,仅支持十六进制颜色
selectedColor	HexColor	是		tab上的文字选中时的颜色, 仅支持十六进制颜色
backgroundColor	HexColor	是		tab的背景色,仅支持十六进制颜色
borderStyle	string	否	black	tabbar上边框的颜色,仅支持black/white
list	Array	是		tab的列表,最少两个, 最多五个tab
position	string	否	bottom	tabBar的位置, 仅支持bottom/top
custom	boolean	否	false	自定义tabBar

其中list接受一个数组,只能配置最少2个, 最多5个tab. tab按数组的顺序排序, 每一项都是一个对象, 其属性值如下:

属性	类型	必填	说明
pagePath	string	是	页面路径,必须在pages中先定义
text	string	是	tab上按钮文字
iconPath	string	否	图片路径, icon大小限制为40kb, 建议尺寸为81px*81px,不支持网络图片.当position为top时, 不显示icon
selectedlconPath	string	否	选中时的图片路径, icon大小限制为40kb,建议

2.工具配置 project.config.json

小程序开发者工具在每个项目的根目录都会生成一个project.config.json, 你在工具上做的任何配置都会写入到这个文件, 其中会包括编辑器的颜色、代码上传时自动压缩等一系列选项. 对应着详情里边的内容。

3.页面配置 page.json

这里的page.json其实用来表示pages/logs目录下的logs.json这类和小程序页面相关的配置. 可以让开发者独立定义每个页面上的一些属性

4.JSON语法

JSON文件都是被包裹在一个大括号中{}, 通过key-value的方式来表达数据. JSON的Key必须包裹在一个双引号中, 在实践中, 编写JSON的时候, 忘了给key值加双引号或者是把双引号写成单引号是常见的错误.

JSON的值只能是以下几种数据格式, 其他任何格式都会触发报错, 例如JavaScript中的undefined

1. 数字, 包括浮点数和整数
2. 字符串, 需要包裹在双引号中
3. Bool值, true或者false
4. 数组, 需要包裹在方括号中[]
5. 对象, 需要包裹在大括号中{}

二. .wxml后缀的WXML模板文件

WXML充当的就是类似HTML的角色. 和HTML非常相似, 都是由标签、属性等构成. 但是也有很多不一样的地方:

1. 标签名字不同

   写HTML的时候, 经常用到的标签是div, p, span, 开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件. 微信开发者工具将这些组件包装起来, 大大提高了开发效率.

2. 多了一些wx:if这样的属性以及{{}}这样的表达式

   通常我们会通过JS操作DOM, 以引起界面的一些变化相应用户的行为. 但是当项目比较大时, 代码的会非常的庞大. 因此我们有了MVVM的开发模式(例如React, Vue), 提倡把渲染和逻辑分离. 然后再通过一种模板语法来描述状态和界面结构的关系即可.

三. .wxss后缀的WXSS样式文件

wxss具有css大部分的特性, 小程序在wxss也做了一些扩充和修改.

1. 新增了尺寸单位(rpx).
2. 提供了全局的样式和局部样式. 可以写一个app.wxss作为全局样式, 会作用于当前小程序的所有页面, 局部页面样式page.wxss仅对当前页面生效.
3. wxss仅支持部分css选择器

四. .js后缀的JS脚本逻辑文件

我们通过编写JS脚本文件来处理用户的操作

<view>{{msg}}</view>
<button bindtop="clickMe">点击我
</button>

点击button按钮的时候, 我们希望把界面上的msg显示成Hello World, 于是我们在button上声明一个属性: bindtap, 在JS文件里边声明了clickMe方法来相应这次点击操作:

Page({clickMe: function(){this.setData({msg:"Hello World"})}
})

二.微信小程序代码的构成相关推荐

1. 【小程序】微信小程序代码如何转uniapp代码？

   众所周知,微信小程序的语法和uniapp的语法接近,一个是Vue的近亲,一个完全兼容Vue,所以他们相互之间转换应该也是不难的. 微信小程序的语法,其实是vue.js语法的裁剪定制版,在数据绑定.自定 ...

2. 微信小程序开发教程：项目二微信小程序开发基础 课后习题

   <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单描述页面样式的单位rpx与px的关系. 2.简 ...

3. HbuilderX导入项目运行到微信小程序代码杂乱问题

   前几日,在HbuilderX导入项目后,运行到微信小程序后发现项目代码是乱的,不好分析,具体如图: 在各方查阅后,发现只需使用快捷键: shift + Alt + F 即可让代码变为标准格式 具体如图 ...

4. 微信小程序代码大于2M的一种解决方法

   今天,上传小程序代码到另一个微信号,提示代码尺寸过大,卧槽,我上传另一个微信h号都成功了呀!死活找不到原因,就大了270K左右,真是郁闷.偶然把灰级度调小,上传就可以了.估计是文件没压缩就上传,不明白 ...

5. [小工具] 微信小程序代码压缩器

   这是一个很短时间开发的小工具,没有什么技术含量,就是为了使用方便而已,有需要的可以直接拿走:https://github.com/nbagonet/w... 当你的微信小程序编译包大小超过 1024k ...

6. 微信开发者工具代码仓的管理以及错误：Push failed Error: invalid authentication scheme 的解决办法，微信小程序代码仓项目删除

   文章目录 1.新建代码仓 2.报错:Push failed Error: invalid authentication scheme 的解决办法 3.代码仓项目的删除 1.新建代码仓 如果你的代码已经 ...

7. 微信小程序代码怎么用工具打开看

   1.首先要下载微信官方的微信Web开发者工具.打开微信公众平台,找到右下方的小程序模块,点击「开发」按钮;2.点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」.可以看到,开发工具提供 Wi ...

8. 微信小程序--代码包压缩策略

   微信小程序自推出以来,逐渐发展,目前正受到越来越多的青睐.其中很重要的一点得益于小程序的轻量级特性,每个小程序最多不超过2MB,招之即来挥之即去,相比于几十上百兆的APP,用户进入小程序,或者说,小程 ...

9. 头像生成器微信小程序代码

   微信小程序需要wxml,wxss,js三种类型代码 1,wxml <view class="container"><view class="title& ...

10. 将网页代码转换成微信小程序代码

    如果你想要把你的网页代码转换成小程序代码,你有以下几种方法: 使用一种叫做 H5 to 小程序 的在线工具,可以将 H5 网页转换为微信小程序项目.你只需要在网站上传你的 H5 网页文件,或者将 H5 ...

最新文章

1. ?:在正则表达式中什么意思
2. LeetCode-字符串-反转字符串中的单词 II
3. kerberos安装配置、配置kerberos server、client、日常操作与常见问题、卸载kerberos、hive整合kerberos
4. 为什么C语言函数不能返回数组，却可以返回结构体？
5. 学java需要什么基础_学java需要什么基础？
6. 程序员如何学习更好的知识_如何保持学习并成为更好的程序员
7. 前端学习（1671）：前端系列实战课程之透明度运动效果实现思路
8. Zookeeper 如何选举master 主节点？
9. 常用傅里叶变换公式大全_高二数学常用导数公式大全
10. linux下安装mysql5.7.11全纪录_简单几步在Linux环境下安装MySQL5.7(附踩坑记录)
11. C/C++算法竞赛代码框架
12. tensorflow学习笔记（4）softmax分类和简单神经网络比较
13. 【混凝土强度预测】基于matlab BP神经网络混凝土强度预测【含Matlab源码 695期】
14. Visio绘制时间轴、日程安排图、时间进度图的方法
15. linux下安装asio4ks,FL Studio 第一步 初始化 2020-10-01
16. HTML期末大作业~海贼王大学生HTML网页制作10个页面作品(HTML+CSS+JavaScript)
17. 三维重建| iPad Pro2020 专业3D扫描应用程序 3D Scanner App(App Store可免费下载）
18. 思维模型 吸引力法则/定律
19. Kong 开源的的服务网格Kuma爬过了K8S这座大山
20. android代码禁用软键盘,Android 禁用软键盘

热门文章

1. surface surfaceTexture
2. 360插件化方案RePlugin学习笔记-插件与宿主间的通信方式
3. 肥猫学习日记------查找与排序(一)
4. 90后迎来30岁，比升职更重要的是这8件事
5. 调色板的原理和调色板显示模式
6. CSS基础--美化视觉效果
7. 小鸟云服务器linux版本的登陆
8. 数字化模型是工业PaaS平台的核心
9. 黄金分割法，你会了吗？
10. pandas从excel导入数据，写入数据库