第二章微信小程序开发基础

最新推荐文章于 2024-03-08 14:01:41 发布

荔枝员

最新推荐文章于 2024-03-08 14:01:41 发布

阅读量915

点赞数 19

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2201_75556240/article/details/136445398

版权

框架图

小程序的基本目录结构

在微信小程序的基本目录结构中，项目主目录下有2个子目录(pages 和utils)和4 个文件 (app.js、app.json,app.wxss 和 project.config.json)。

在主目录中，3 个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这 3个文件不属于任何页面。project.configjson 文件是项目配置文件，包含项目名称AppID等相关信息。

pages 目录中有2个子目录，分别是 index 和 logs，每个子日录中保存着一个页面的相关文件。通常，一个页面包含4 个不同扩展名 (.wxml(页面结构文件)、.wxss（页面样式文件）、·js（页面逻辑文件）和.son（页面配置文件）)的文件，按照规定，同一个页面的4个文件必须具有相同的路径与文件名。

utils 目录用来存放一些公共的.js 文件，当某个页面需要用到 utils.js 函数时，可以将其引入后直接使用。在微信小程序中，可以单独创建一个子目录来单独存放一些图片，音频等资源文件。

1.主体文件

微信小程序的主体部分由3 个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.is 文件会
和其他页面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少。（不能失去）

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。（不能失去）

app.wxss 小程序主样式表文件，类似 HTML 的css 文件。在主式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。（可以有，但不是必须）

2.页面文件

小程序通常是由多个页面组成的，每个页面包含4 个文件，同一页面的这4 个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json 设置的路径找到相对应的资源进行数据绑定。

js文件页面逻辑文件，在该文件中编写 JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。

.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。

.json 文件页面配置文件。该文件在页面中不可缺少。（图片如下，怕你们看不懂）

小程序的开发框架

微信团队为小程序的开发提供了 MINA框架。MINA框架通过微信客户端提供文件系统网络通信、任务管理、数据安全等基础功能，对上层提供了一整套 JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

小程序MINA框架示意如图所示。

小程序 MINA 框架将整个系统划分为视图层和逻辑层。

视图层 ( View) 由框架设计的标签语言 WXML ( WeiXin Markup Language) 和用于描述 WXML 组件样式的WXSS (WeiXinStyle Sheets)组成，它们的关系就像HTML和CSS 的关系。

逻辑层(App Service) 是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。

MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaScript 中的 DOM 操作。

小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。MINA框架为页面组件提供了 bindtap、bindtouchstart 等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。

MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。

微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能 (如 page 切换、tab 切换、多媒体、网络连接等) 上使用接近于系统层 (Native) 的组件承载。

所以小程序 MINA 框架有着接近原生 App 的运行速度，对Andrid 端和ios 端能现得高度一致并为开发者准备了完备的开发和调试工具。

1.视图层

MINA框架的视图层由 WXML 与 WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml 文件与wxss 文件的集合:wxm 文件用于描述页面的结构:.wxss 文件用于描述页面的样式。
微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元。

2.逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js 脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。微信小程序开发框架的逻辑层是采用JavaScript 编写的。在 JavaScript 的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
(1)增加 app()和 Page() 方法，进行程序和页面的注册
(2) 提供丰富的 API，如扫一扫、支付等微信特有的能力
(3) 每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的.js 脚本文件来实现的。由于小程序并非运行在浏览器中所以JavaScript 在 Web 中的一些功能在小程序中无法使用，如 document、 window 等
开发者开发编写的所有代码最终会被打包成独立的 JavaScript 文件，并在小程序启动的时候运行，直到小程序被销毁。

3.数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储和网络存储与调用。

1.页面临时数据或缓存
在 Page()中，使用 setData 函数将数据从逻辑层发送到视图层，同时this.data 的值。
setData()函数的参数接收一个对象，以 (key,value) 的形式表示将 key对应的值改变成 value。
2.文件存储(本地存储)
使用数据 API接口，如下
获取本地数据缓存wx. getStorage
设置本地数据缓存wx.setStorage
清理本地数据缓存wx.clearStorage
3.网络存储与调用
上传或下载文件 API接口，如下:
wxrequest 发起网络请求
wx.uploadFile 上传文件。
wxdownloadFile下载文件
调用 URL的API接口，如下:
wx.navigateTo 新窗口打开页面

wx.redirectTo 原窗口打开页面

创建小程序页面

启动微信小程序开发页面，创建新的项目“张久传媒”

进入编辑页面第一步创建文件夹（liangs）（点第二个＋）

创建（liangs.js,liangs.json,liangs.wxml,liangs.wxss)

第二步点击app.json,添加pages“pages/liangs/liangs”,

第三步编辑liangs.js

第四步编辑liangs.json

第五步编辑liangs.wxml(文本)

如果报错就把除liangs文件的其余文件全删。

配置文件

简介

小程序的配置文件按其作用范围可以分为全局配置文件 (app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

小程序的全局配置保存在全局配置文件 (app.json) 中，使用全局配置文件来配置页面文件 (pages)的路径、设置窗口 (window) 表现、设定网络请求 API 的超时时间值(networkTimeout) 以及配置多个切换页 (tabBar) 等。如下图

1.pages配置项

pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项设置 pages 配置项时

应注意以下3 点:
(1)数组的第一项用于设定小程序的初始页面
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.jsjson.wxml和.wxss 文件进行整合数据绑定。例如上面编辑了app.json<pages>

2.window配置项

window配置项负责设置小程序状态栏，导航条，标题，窗口背景色等系统样式。window配置项可以参考下表

3.tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置来实现，请看VCR

其中list接受数组值，数组中的每一项也都是一个对象。如下表

4.networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过 networkTimeout 配置项进行统一设置不能在 API中单独设置。请看VCR

5.debug配置项

debug 配置项用于开启开发者工具的调试模式，默认为 false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到 Console (控制台)面板上。

逻辑层文件

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

1.项目逻辑文件：

项目逻辑文件 app.js 中可以通过 App() 函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过 getApp() 获取。

App() 函数用于注册一个小程序，参数为 Object，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如图所示

当启动小程序时，首先会依次触发生命周期函数 onLanuch 和 onShow 方法，然后通过app.json 的 pages 属性注册相应的页面，最后根据默认路径加载首页，当用户单击左上角的“关闭”按钮或单击设备的 Home 键离开微信时，小程序没有被直接销毁，而是进入后台这两种情况都会触发 onHide 方法;当用户再次进人微信或再次打开小程序时，小程序会》后台进入前台，这时会触发 onShow 方法。只有当小程序进入后台一段时间 (或者系统资源占用过高)时，小程序才会被销毁。

2.页面逻辑文件：

页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数，定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaSerpt引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象 (dcument、window)及通过操作DOM 改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page() 方法用来注册一个页面，并且每个页面有且仅有一个，其参数如图

定义事件处理函数
开发者在 Page()中自定义的函数称为事件处理函数。视图层可以在组件中加人事件练当达到触发事件时，小程序就会执行 Page()中定义的事件处理函数。

使用 setData 更新数据
小程序在 Page 对象中封装了一个名为 setData() 的函数，用来更新 data 中的数据。函数参数为Object，以“key:value”对的形式表示将 this.data 中的 key 对应的值修改为 value。

代码

liangs.js

Page({
  data:{
  name:'wk',
  age:30,
  birthday: [{ year: 1988 },{ month: 11 },{date: 18 }],
  object:{hobby:'computer'}
  }
  })

liangs.wxml

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>

运行结果如图

在原本的代码中，添加生命周期函数（liangs.js)

Page({
  data:{
  name:'wk',
  age:30,
  birthday: [{ year: 1988 },{ month: 11 },{date: 18 }],
  object:{hobby:'computer'}
  },
onLoad:function(options){
  console.log("index onLoad......")
},
onReady:function(){
console.log("index onReady.......")
},
onShow: function(){
console.log("index onShow ......")
},
onHide:function(){
console.log("index onHide......")
},
onUnload:function(){
console.log("index onUnload ......")
},
})

运行结果如下图

加入图片（app.json）

"tabBar": {
    "list": [{
      "pagePath": "pages/liangs/liangs",
      "text": "首页",
      "iconPath": "miniprogrogram/img/1.jpg",
      "selectedIconPath": "miniprogrogram/img/2.jpg"
    },
   {
      "pagePath": "pages/news/news",
      "text": "新闻",
      "iconPath": "miniprogrogram/img/1.jpg",
      "selectedIconPath": "miniprogrogram/img/2.jpg"
    }]
  }

运行结果下面出现两张图片

页面结构文件

简介

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxm文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class 等)，组件还可以嵌套。WXML,还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的 data 进行动态绑定，在页面中显示 data 中的数据。小程序的数据绑定使用Mustache语法(1{})将变量或运算规则包起来。

1.简单绑定
简单绑定是指使用双大括号(())将变量包起来，在页面中直接作为字符串输出使用简单绑定可以作用于内容、组件属性、控制属性等的输出。

2。运算

在{{}}内可以做一些简单的运算（主要有算术，逻辑，三元，字符等）代码如下

<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{age ==1 ? 3 : 4}}</view>

条件数据绑定

简介

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

请看代码

wx:if条件语句数据绑定

<view wx:if="age>40">1</view>
<view wx:elif="age==40">2</view>
<view wx:else>3</view>

引用页面文件

代码如下

liangs.js

students:[
    {nickname:"TOM",height:180,weight:150},
    {nickname:"Anne",height:160,weight:100}
  ]

liangs.wxml

<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>

运行结果

页面事件

简介

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件。
■定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
■调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind 或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch 开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。

冒泡事件

在小程序中，事件分为冒泡事件和非冒泡事件两大类型
冒泡事件：冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

页面样式文件

简介

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩和修改。

1. 尺寸单位
由于CSS 原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx(respnesive pixel)。WXSS规定屏幕宽度为750px，在系统数据绑定过程中rpx会按比例转化为px。例如，iPhone6的屏幕宽度为375px，即750rpx需按比例转化为375 px，所以，在iPhone 6 中,1 rpx =0.5 px。

2.选择器

目前，WXSS 仅支持 CSS 中常用的选择器，如.class、#id、element、:before、:aftert 等。4. WXSS 常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如表

荔枝员

关注

19
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
第二章微信小程序开发基础

通常，一个页面包含4 个不同扩展名 (.wxml(页面结构文件)、.wxss（页面样式文件）、·js（页面逻辑文件）和.son（页面配置文件）)的文件，按照规定，同一个页面的4个文件必须具有相同的路径与文件名。小程序的全局配置保存在全局配置文件 (app.json) 中，使用全局配置文件来配置页面文件 (pages)的路径、设置窗口 (window) 表现、设定网络请求 API 的超时时间值(networkTimeout) 以及配置多个切换页 (tabBar) 等。该文件在页面中不可缺少。
复制链接

扫一扫