微信小程序简介

发布于 2019-04-08  215 次阅读


什么是小程序?

1、小程序是一种不需要下载安装即可使用的应用,它实现了了应用“触手可及”的梦想;
2、用户扫一扫或者搜一下即可打开应⽤用,也体现了“用完即走”的理念;
3、用户不用关心是否安装太多应⽤用的问题。应用将无处不在,随时可用,但又无需安装卸载;

小程序代码结构

框架全局文件

框架全局文件必须放在项目的根目录中。框架全局文件包括4个文件:
1、app.js(必要)小程序逻辑文件(定义全局数据以及定义函数文件)
2、app.json(必要)小程序公共设置文件
3、app.wxss小程序公共样式表
4、project.config.json(必要)小程序项目个性化配置文件。
它们对所有页面都有效

1、app.js

app.js文件用来定义全局数据和函数的使用,它可以指定微信小程序的生命周期函数。
生命周期函数可以理解为微信小程序自己定义的函数。此外,app.js中还可以定义一些全局的函数和数据,其他页面引用app.js文件后就可以直接使用。
app.js文件不仅可以定义全局函数和数据,还可以注册小程序。
在App()函数里可以完成小程序的注册,并指定其生命周期函数。
生命周期函数
(1)onLaunch生命周期函数,用来监听小程序初始化,一旦初始化完成,就会触发该函数,这个生命周期函数只会触发一次。
(2)onShow生命周期函数,用来监听小程序显示,只要程序启动或者从后台进入前台都会触发该函数。
(3)onHide生命周期函数,用来监听小程序隐藏,一旦微信小程序从前台进入后台,就会触发该函数。
(4)onError生命周期函数,用来监听小程序脚本或者API是否发生错误,发生错误时返回错误信息。
(5)onPageNotFound生命周期函数,当要打开的页面不存在时,会回调这个监听函数。

2、app.json

app.json文件可以对5个功能进行设置:
1、配置页面路径
2、配置窗口表现
3、配置标签导航
4、配置网络超时
5、配置debug模式

3、app.wxss

app.wxss文件对CSS样式进行了扩展,和CSS的使用方式一样,类选择器和行内样式的写法兼容大部分CSS样式,有一些CSS样式在这里是不起作用的。
app.wxss还形成了自己的风格,是对所有页面定义的一个全局样式。
只要页面有全局样式里的class,就可以渲染全局样式里的效果;但如果页面又重新定义了这个class样式,则会把全局的覆盖掉,使用自己的样式。

工具类文件

在微信小程序框架目录里有一个utils文件夹,它用来存放工具栏的js函数,例如可以放置一些日期格式化的函数、时间格式化的函数等一些常用的函数。
定义完这些函数后,要通过module.exports将定义的函数名称注册进来,在其他的页面才可以使用。

框架页面文件

微信小程序的框架页面文件,都放置在pages文件夹下面。

页面的js文件:

在每个页面文件夹里,都有一个页面对应的js文件,比如日志logs文件夹,对应的就是logs.js文件,这个文件里的Page()函数用来注册页面。
接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑处理都放在这个文件里。

WXML

1、数据绑定
2、列表渲染
3、条件渲染
4、模块应用

WXS

WXS是小程序的一套脚本语言,结合WXML页面文件,可以构建出页面的结构。它是把原来放在js文件里进行处理的逻辑,直接放在WXML页面文件里进行处理。
它有两种使用方式:一种是将WXS脚本语言嵌入到WXML页面文件里,在wxml文件中的标签内来处理相关逻辑;另一种是以.wxs后缀结尾的文件独立存在,然后再引入到WXML页面文件里使用。


不以物喜,不以己悲。