第二章总结

伍叁的小恐龙

已于 2024-03-08 13:25:08 修改

阅读量558

点赞数 16

文章标签：前端

于 2024-03-06 17:03:17 首次发布

本文链接：https://blog.csdn.net/weixin_74842051/article/details/136445347

版权

2.1小程序的基本目录结构

项目里面分为两个子项目为（pages）（utils）

pages

pages：pages是一个非常重要的文件夹，用于存放小程序的所有页面文件。

在pages目录下，每个页面通常会包含以下几种文件：

js文件：页面的脚本文件，用于处理页面的逻辑。

json文件：页面的配置文件，用于配置页面的一些参数和表现。

wxml文件：页面的结构文件，类似于HTML，用于描述页面的结构和内容。

wxss文件：页面的样式文件，类似于CSS，用于定义页面的样式和布局。

utils

utils：用来存放一些公共.JS文件

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

app.json：小程序公共设置文件，配置小程序全局设置。文件不能丢失，缺少。

app.wxss：小程序主样式表文件，类似THML的.css文件。这个文件不是必需的。

logs：存放日志的地方

2.2 小程序的开发框架

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

小程序MINA框架将整个系统划分为视图层和逻辑层，还有一个数据层。

视图层

在微信开发者工具中，视图层是微信小程序的核心部分之一，主要负责显示和渲染用户界面。视图层主要由WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheet）构成，分别用于描述页面结构和样式、WXML是类似于HTML的标记语言，用于定义页面的结构和内容、除了WXML和WXSS之外，视图层还包括了组件系统。

逻辑层

微信开发者工具的逻辑层是微信小程序的核心部分之一，主要负责处理小程序的业务逻辑、数据管理和与视图层的交互。逻辑层使用JavaScript编写，运行在微信提供的JavaScript引擎上。

在逻辑层中，开发者可以编写各种函数和逻辑来处理用户的行为、调用微信API、处理数据等。例如，当用户点击一个按钮时，逻辑层可以监听到这个事件，并执行相应的函数来处理这个事件。同时，逻辑层也可以与微信API进行交互，获取用户信息、发起网络请求、调用微信原生功能等。

数据层

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

2.3创建小程序页面

在项目主页里的pages目录下面创建一个英文的目录名字如wusan

第一步

第二步

创建成功如下图

点击你创建的文件，上面会出现一定加号点击创建四个文件。.js、.wxml、.wxss、.json文件

2.4 配置文件

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

1.pages配置项

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

设置pages配置项时，注意3个点:

（1）：数组的第一项用于设定小程序的初始页面。

（2）：在小程序在新增或减少页面时，都需要对数组进行修改。

（3）：文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

2.window配置项

window配置项负责设置小程序的状态栏、导航条、标题、窗口颜色等系统样式。

3.tabBar配置项

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

tabBar中的list选项

4.networkTimeout配置项

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

5.debug配置项

dubug配置项用于开启开发者工具的调试模式，默认为false。

2.4.2页面配置文件

页面配置文件（.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。

页面在的window配置只需书写配置项，不必书写window，代码如下：

{
  "navigationBarBackgrcoundColor":"#ffffff",
  "navigationBarTextStyle": "black",
"navigationBarTitleTe ext":"页面 window 配置演示","backgroundColor": "# eeeeee",
"backgroundTextStyle":"light"
}

2.5 逻辑层文件

2.5.1 项目逻辑文件

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

App（）函数用于注册一个小程序，参数为Object，用于指定小程序的生命周期函数、用户定义属性和方法。

app.js文件代码

App({		
onLaunch:function (){	
console.log("小程序初始化完成...),
onShow: function (options){ 
console.log("小程序显示");
console.log( this.data); 
console.log(this.fun())
onHide: function (){
console.log("小程序进入后台")
onError: function (msg){
fun:function (){
console.log("在app.js中定义的方法");
data:'在app.js中定义的属性'})

2.5.2 页面逻辑文件

页面逻辑文件的主要功能有:设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。

1.设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JSON（Javascript Object No-tation,JS对象简谱）的形式由逻辑层传至视图层。

视图层可以通过WXML对数据进行绑定。

数据初始、数据绑定及运行效果如图：

wusan.js文件代码

Page({
//页面的初始数据
data:{
  name:'1wk',//字符串
  age:30,//数字
  birthday:[{ year: 1988 }, { month: 11 },{ date: 18 }],//数组
  object:{hobby:'computer'} //对象

}
})

wusan.wxml文件代码

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

结果：

2.定义当前页面的生命周期函数

在Page() 函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有 onLoad、onShow、onReady、onHide、onUnload。
■onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取 wx. navigateTo 和wx. redirectTo及<navigator/>中的 query。
■ onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
■onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
■ onHide 页面隐藏函数。当页面隐藏时及当 navigateTo或小程序底部进行tab切换时,调用该函数。
■ onUnload 页面卸载函数。当页面卸载、进行 navigateBack 或redirectTo 操作时,调用该函数。

例如，在wusan.js和news.js文件中加入如图2-13所示的代码

wusan.js的代码

Page({
//页面的初始数据
data:{
  name:'1wk',//字符串
  age:30,//数字
  birthday:[{ year: 1988 }, { month: 11 },{ date: 18 }],//数组
  object:{hobby:'computer'} //对象
},
    //生命周期函数--监听页面加载
  onLoad:function(options){
    console.log("wusan onLoad.....")
  },
   //生命周期函数--监听页面初次渲染完成
   onReady:function(){
     console.log("wusan  onReady......")
   },
    //生命周期函数--监听页面显示
    onShow:function(){
      console.log("wusan  onShow.....")
    },
    //生命周期函数--监听页面隐藏
    onHide:function(){
      console.log("wusan  onHide.....")
    },
    //生命周期函数--监听页面卸载
    onUnload:function(){
      console.log("wusan  onUnload.....")
    },
})

news.js的代码

//pages/new/news.js
Page({
  //生命周期函数--监听页面加载
  onLoad:function(options){
    console.log("news onLoad.....")
  },
   //生命周期函数--监听页面初次渲染完成
   onReady:function(){
     console.log("news onReady......")
   },
    //生命周期函数--监听页面显示
    onShow:function(){
      console.log("news onShow.....")
    },
    //生命周期函数--监听页面隐藏
    onHide:function(){
      console.log("news onHide.....")
    },
    //生命周期函数--监听页面卸载
    onUnload:function(){
      console.log("news onUnload.....")
    },
})

保存编译成功出现首页和新闻

单击新闻出现

3.定义事件处理函数

//index1.wxml
<view bind:tap="myclick">单击执行逻辑层事件</view>
 
//index1.ls
myclick:function(){
    console.log("你点击了view")
  }

4.使用setData更新数据

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

代码：

wuyi.js文件代码

Page({
  //页面的初始数据
  data:{
    name:'los', //字符串
    age:3,      //数字
    birthday:[{year:2021},{month:1},{date:12}], //数组
    object:{hobby:'下棋，听歌，打羽毛球'} //对象
  },
  chtext:function() {
    this.setData({
      name:'李火旺'
    });
  },
  chage:function() {
    this.setData({
      age:-1
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2030},{month:6},{date:23}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'下棋，听歌，打羽毛球'
    });
  },
  adddata:function() {
    this.setData({
      'address':'睡觉觉'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
});

wuyi.wxml文件代码

<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>
<view bind:tap="myclick">单击执行逻辑层事件</view>

结果如下

2.6 页面结构文件

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

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

2.6.1 数据绑定

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

【注意】

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

实例代码如下

2.运算

主要有算术运算、逻辑运算、三元运算、字符串运算等，这些运算均应符合JavaScript运算规则。

2.6.2 条件数据绑定

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

1.wx：if条件数据绑定

wx：if条件数据绑定是指使用wx：if这个属性来判断是否数据绑定当前组件。例如：

2.block wx：if条件数据绑定

例如：

< block wx:if = "{{ true}}">

</block>

2.6.3 列表数据绑定

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

1.wx:for的代码格式

{{index}}:{{item}}

</view>

student:[{name:'张三',age:15,hobby:'game'},
           {name:'李四',age:14,hobby:'game'},
           {name:'王五',age:14,hobby:'game'},
]

2.block wx：for与block wx：if类似。

2.6.5 引用页面文件

1.import 方式

如果在要引用的文件中定义了模板代码，则需要用import方式引用。

2.include 方式

include方式可以将源文件的其他代码全部引用。

2.6.6 页面事件

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

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。

调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以"key =value" 形式出现，key (属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。

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

2.7 页面样式文件

1.尺寸单位

由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx。

2.样式导入

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

3.选择器

目前，WXSS仅支持CSS中常用的选择器，如 class、#id、element、等。

4.WXSS常用属性

伍叁的小恐龙

关注

16
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
第二章总结

视图层主要由WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheet）构成，分别用于描述页面结构和样式、WXML是类似于HTML的标记语言，用于定义页面的结构和内容、除了WXML和WXSS之外，视图层还包括了组件系统。小程序的全局配置保存在全局配置文件（app.json）中，使用全局配置文件来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值（networkTimeout）以及配置多个切换页（tabBar）等。
复制链接

扫一扫