微信开发小程序平台介绍及组成介绍
2021年5月5日,在图书馆学习微信小程序开发,记录入门的几项内容,组成成分及各组成成分的具体作用,希望对读者可以有所帮助,同进步,共勉之!
微信小程序开发平台由json(配置文件)、WXML(模板文件)、WXSS(样式文件)及JS(逻辑文件)4部分组成,现对以上4种文件介绍如下:
一、组成
1、json 配置文件
1)app.json:
①pages 当前小程序页面所有的路径。
②window 所有页面的顶部背景颜色,文字颜色等。
2)project config.json:工具上任何配置都写入这个文件,编辑器颜色 代码上传时自动压缩等。
3)page.json:覆盖app.json 的属性及下拉刷新。
4)json的语法:
①文件包裹在{{ }} 中,key-value 的形式表达,key在双引号中。
②数据格式:
⑴数字: 浮点 、整数
⑵数组 : 在[ ]中
⑶Bool: true、flase
⑷对象 { }
⑸ Null
2、WXML 模板文件
1)标签: ①view ②button ③text
2){{表达式}} eg:① <text>{{msg}}<text>
3)wx:if
3、WXSS 样式文件
1)尺寸单位: rpx (respone pixel) 1rpx=0.5px=1物理像素
2)引入样式: import "*.wxss"; 分号结束
3)选择器:① 类 .class ② id # ③ element view组件
4)::after 在view 后插入内容 ::before 在view前插入内容
4、js 逻辑交互文件
eg:
WXML层:
<view>{{msg}}</view>
<button bindtap="clickMe">点击我</button>
JS层:
page({
clickMe: function(){
this.setData({msg: "点击我出发点击事件"})
}
})