第2章 微信小程序开发基础总结

一·小程序基本目录结构

 

主体文件有3个

app.js 逻辑文件

app.json 公共设置文件

app.wxss 主样式表文件

 

页面文件有4个

.js 逻辑文件

.wxml 结构文件

.wxss 样式表文件

.json 配置文件

 

二.小程序开发框架

 

小程序 MINA 框架示意

 

小程序 MINA 框架系统分为视图层（View）和逻辑层（App Service)

View 由框架设计的标签语言 WXML 和用于描述组件样式 WXSS 组成，它们的关系就像 HTML 和 CSS的关系。

App Service是 MINA 框架服务中心，由微信客户端启用异步线程单独加载运行。

 

三.如何存储数据文件

 

使用API接口，如下：

wx. getStorage      获取本地数据缓存

wx. setStorage      设置本地数据缓存

wx. clearStorage   清理本地数据缓存

 

网络存储与调用

wx. request            发起网络请求

wx.uploadFile        上传文件

wx.downloadFile    下载文件

wx.navigateTo        新窗口打开页面

wx.redirectTo          原窗口打开页面

 

四.如何创建小程序页面

 

1. 启动微信开发工具，点击新建文件夹，创建新的项目news

 

2. 如图logs，除了后缀 .ts 不要，其它都照抄

点击 + ，新建文件（顺序可变换）

news.js                 代码内容：空

news.json             代码内容：{ "pages" :[ "pages/index/index" ] }

news.wxml           代码内容：欢迎学习小程序，实现大梦想！

news.wxss           代码内容：空

 

3. 点击app.json，加入 "pages/news/news",

 

4. Ctrl+s保存并编译，如图

 

五.如何配置文件 

 

配置文件分为全局配置文件（app.json) 和页面配置文件（*.json)

 

1. 全局配置项

 

2. window 配置项

 

3. tabBar 配置项

 

3.1 tabBar 中 list 选项

 

4. networkTimeout 配置项

页面效果，如图

 

 六.什么是逻辑层文件

 

小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件

 

 项目逻辑文件配置项

 

 页面逻辑文件配置项

 

6.1 定义页面生命周期函数

onLoad 页面加载函数

onShow 页面显示函数

onReady 页面数据绑定函数

onHide 页面隐藏函数

onUnload 页面卸载函数

 

6.2 条件数据绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件

 

1. wx:if 条件数据绑定；判断是否数据绑定当前组件

例如：< view wx:if ="{{ conditon }}">内容< /view >

 

2. block wx:if 条件数据绑定；当需要通过一个表达式去控制多个组件时，可以通过< block >将多个组件包起来，然后在<block>中添加 wx:if 属性即可

例如：< block wx:if="{{ true }}" >

< view >view1< /view >

< view >view2 < /view >

< /block >

 

6.3 列表数据绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定

 

1. wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件

格式：< view wx:for = "{{ items }}” >
{{ index }} : {{ item }}

< /view >
items为一个数组，数组当前项的下标变量名默认为index，数组当前项的变量名默认为item

 

2. block wx:for 与 block wx:if 类似，在wxml中也可使用< block >包装多个组件进行列表数据绑定

格式：
< block wx:for = "{{ student }}" >
< view >
< text > {{ index }} < /text >
< text >{{ item,name }} < /text >

< text > {{ item.age }} < /text >

< text >{{ item.hobby }} < /text >

< /view >

< /block >

 

6.4 事件

在小程序中，事件分为冒泡事件和非冒泡事件两大类型

冒泡事件：指某个组且件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素

非冒泡事件：指某个组件上的事件被触发后，该事件不会向父节点传递。在WXML中，冒泡事件有6个

 

6.5 页面样式文件（WXSS）

具有Css大部分特性

 

WXSS常用属性，如图

 

本章小结：首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。