第二章总结

最新推荐文章于 2024-09-27 20:15:00 发布

摸鱼哥～(￣▽￣～)~

最新推荐文章于 2024-09-27 20:15:00 发布

阅读量796

点赞数 17

文章标签： apache

本文链接：https://blog.csdn.net/LRH213244/article/details/136461694

版权

本文详细介绍了微信小程序的基础架构，包括app.js、app.json、app.wxss等关键文件的作用，页面文件的构成（.js、.wxml、.wxss、.json），以及开发框架、页面创建、配置文件（全局和页面）、数据绑定、逻辑处理、页面结构、模板和事件的使用，还有页面样式文件(WXSS)的特性和应用。

摘要由CSDN通过智能技术生成

2.1小程序基本目录结构

主题文件

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

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

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

页面文件

.js文件：页面逻辑文件，在该文件中编写JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxml文件：页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件，该文件在页面中不可缺少。
.wxss文件：页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss 中指定的样式规则，该文件在页面中不可缺少。
.json文件：页面配置文件，该文件在页面中不可缺少

2.2小程序开发框架

2.3创建小程序页面

在Pages文件夹中新建一个文件夹用来插件页面，如图所示

以下是部分页面代码展示

Page({
  data:{
    name:'中午吃撒子？',
    age:18,
    num:1000,
    birthday:[{year:2003},{month:5},{date:13}],
    students:[
      {nickname:"tom",height:45,weight:110},
      {nickname:"jerry",height:10,weight:40},
    ]
  }

})

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日
</view>
<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{sge==40}}</view>
<view>三元运算正确判断语句：{{1==1 ? 4 : 8}}</view>
<view>三元运算错误判断语句：{{1==8 ? 4 : 8}}</view>

<view wx:if="{{age>30}}">输出大于30</view>
<view wx:elif="{{age==30}}">输出等于30</view>
<view wx:else>输出小于30</view>
<template name="xm">
  <view wx:for="{{students}}">
    <text>姓名：{{item.nickname}}</text>，
    <text>身高：{{item.height}}厘米</text>，
    <text>身长：{{item.weight}}厘米</text>，
  </view>  
</template>
<template is="xm" data="{{students}}"/>

2.4配置文件

        小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。
         全局配置文件
        小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求AP的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等。

pages配置项

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

设置pages配置项时，应注意以下3点：

1.数组的第一项用于设定小程序的初始页面。
2.在小程序中新增或减少页面时，都需要对数组进行修改。
3.文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

window配置项

tabBar配置项

network Timeout配置项

页面配置文件
页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window 配置项的内容。在配置页面配置文件后，页面中的 window配置值将覆盖全局配置文件(app.json)中的配置值。

2.5逻辑层文件

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

2.6页面结构文件

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

WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

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

简单绑定

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

注意：简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。


<view>{{name}}</view>
<imagesrc="{{img}}"></image>
<view wx:if="{{sex}}">男</view>
Page({
data:{
name:'/wk',
img:'/images/news2.png',
sex:true
},
})

运算

在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript运算规则。

<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{sge==40}}</view>
<view>三元运算正确判断语句：{{1==1 ? 4 : 8}}</view>
<view>三元运算错误判断语句：{{1==8 ? 4 : 8}}</view>

wx.if条件数据绑定

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

<view wx:if="{{age>30}}">输出大于30</view>
<view wx:elif="{{age==30}}">输出等于30</view>
<view wx:else>输出小于30</view>

模板

在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板

定义模板
模板代码由 wxml组成，因此其定义也是在 wxml 文件中，定义模板的格式为:

<template name="模版名"></template>

<text>姓名：{{item.nickname}}</text>，

<text>身高：{{item.height}}厘米</text>，

<text>身长：{{item.weight}}厘米</text>，

</view>

</template>

页面事件

小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。

要实现这种机制，需要定义事件函数和调用事件。

定义事件函数：在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件:调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind 或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
在小程序中、事件分为冒泡事件和非冒泡事件两大类型。

冒泡事件:冒泡事件是指某个组件上的事件被触发后级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

2.7页面样式文件

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

尺寸单位

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

样式导入

为了便于管理 WXSS 文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。例如：

//list.WXSS
.cont{border:1px solid #F00;}
//index. wxss
@ import"list.wxsS;"
.cont{padding:5rpx;margin:5px;}
选择器

目前，WXSS 仅支持CSS 中常用的选择器，如.class、#id、element、::before、:：aftert 等.

WXSS常用属性