微信小程序开发基础知识总结 .pdfVIP

微信⼩程序开发基础知识总结

微信⼩程序在⽆论在功能、⽂档及相关⽀持⽅⾯，都是优于前⾯⼏种微信账号类型，它提供了很多原⽣程序才有的接⼝，使得我们的⼩程序在很多⽅⾯突破H5页⾯应⽤的限制，

更加接近原⽣程序的功能，因此微信⼩程序具有很⼤的前景想象⼒。它提供了⾃⼰的视图层描述语⾔WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑

层间提供了数据传输和事件系统，可以让开发者可以⽅便的聚焦于数据与逻辑上。

1、⼩程序的⽬录结构

⼩程序的⽬录结构如下所⽰。

其中项⽬级别的的⽂件包括app.js、app.json、app.wxss这三个。其中后缀的是脚本⽂件，后缀的⽂件是配置⽂件，后缀的是样式表⽂件。

.js.json.wxss

页⾯级别可以包含很多个页⾯，如index，detail等页⾯，每个页⾯都包含.js，.json，.wxml，.wxss这些⽂件，其中.wxml为页⾯视图⽂件，是⾃定义标签的HTML页⾯。

app.js是⼩程序的脚本代码。我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量，可以调⽤框架提供的丰富的API。

app.json是对整个⼩程序的全局配置。我们可以在这个⽂件中配置⼩程序是由哪些页⾯组成，配置⼩程序的窗⼝背景⾊，配置导航条样式，配置默认标题。

app.wxss是整个⼩程序的公共样式表。我们可以在页⾯组件的class属性上直接使⽤app.wxss中声明的样式规则。

⼀个⼩程序主体部分由三个⽂件组成，必须放在项⽬的根⽬录。

微信⼩程序中的每⼀个页⾯的【路径+页⾯名】都需要写在app.json的pages中，且pages中的第⼀个页⾯是⼩程序的⾸页。

每⼀个是由同路径下同名的四个不同后缀⽂件的组成，如：index.js、index.wxml、index.wxss、index.json。后缀的⽂件是脚本⽂件，后缀的⽂件是配置⽂件，后缀

.js.json.wxss

的是样式表⽂件，.wxml后缀的⽂件是页⾯结构⽂件。

index.json是页⾯的配置⽂件：页⾯的配置⽂件是⾮必要的。当有页⾯的配置⽂件时，配置项在该页⾯会覆盖app.json的window中相同的配置项。如果没有指定的页⾯配置⽂

件，则在该页⾯直接使⽤app.json中的默认配置。

逻辑层(AppService)

⼩程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反馈。在JavaScript的基础上，我们做了⼀些修改，以⽅便地开发⼩程序。

增加和⽅法，进⾏程序和页⾯的注册。

增加getApp和getCurrentPages⽅法，分别⽤来获取App实例和当前页⾯栈。

提供丰富的，如微信⽤户数据，扫⼀扫，⽀付等微信特有能⼒。

每个页⾯有独⽴的，并提供能⼒。

由于框架并⾮运⾏在浏览器中，所以JavaScript在web中⼀些能⼒都⽆法使⽤，如document，window等。

开发者写的所有代码最终将会打包成⼀份JavaScript，并在⼩程序启动的时候运⾏，直到⼩程序销毁。类似ServiceWorker，所以逻辑层也称之为AppService。

视图层

框架的视图层由WXML与WXSS编写，由组件来进⾏展⽰。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXinMarkuplanguage)⽤于描述页⾯的结构。

WXSS(WeiXinStyleSheet)⽤于描述页⾯的样式。

组件(Component)是视图的基本组成单元。

基础组件

框架为开发者提供了⼀系列基础组件，开发者可以通过组合这些基础组件进⾏快速开发。

什么是组件：

组件是视图层的基本组成单元。

组件⾃带⼀些功能与微信风格的样式。

⼀个组件通常包括和，⽤来修饰这个组件，