【微信小程序】第二章总结

夏太热小小夏

已于 2024-03-08 13:05:38 修改

阅读量1.6k

点赞数 41

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

于 2024-03-06 13:15:12 首次发布

本文链接：https://blog.csdn.net/m0_73027263/article/details/136445055

版权

1.1 小程序的基本目录结构

pages文件夹存放所有的页面文件

utils文件夹存放一些公共的.js文件，工具包

app.js 小程序逻辑文件，主要用来注册小程序全局实例

app.json 小程序公共设置文件，配置小程序全局设置

app.wxss 小程序主样式表文件

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

1.2 页面文件

页面文件主要有四个文件组成：

.js文件页面的逻辑文件

.wxml文件页面的结构文件

.wxss文件页面样式表文件

.json文件页面配置文件

（如下图1.2的index.js文件）

2.1 小程序的开发框架

微信团队为小程序提供了MINA框架

视图层：用来展示页面内容

逻辑层：用来处理事务逻辑，实现一些功能

数据层：用来页面临时数据或缓存、文件存储（本地存储）、网络存储与调用

2.2 创建小程序页面

选中pages文件先将文件夹中名为index文件删除，再新建一个文件（在pages文件中）。在你新建的文件夹中新建四个页面文件

在app.json文件中修改第一句代码，改为你新建的文件名字

在index1.js中输入：

Page({

  

})

在index1.json中输入：

{

  

}

在index1.wxml中输入：

欢迎大家学习小程序

代码部分就完成了，编译后运行结果：

2.3 配置文件

小程序的配置文件可以按其作用范围分为全局配置文件（app.json）和页面配置文件（.json）。全局配置文件作用于整个小程序，而页面配置文件作用于当前页面。由于页面配置文件的优先级要高于全局配置文件，因此，当全局配置文件与页面配置文件有配置相同的情况，页面配置文件会覆盖全局配置文件的相同配置内容。

全局配置文件

全局配置文件是来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值（networTimeout）以及配置多个切换页（tabBar）等。

{
//设置页面路径
"pages":[],
//设置默认页面的窗口表现
"window":{},
//设置底部tap的表现
"tabBar":{},
//设置网络请求API的超时时间值
"networkTimeout":{},
//设置是否开启debug模式
"debug":false
}

pages配置项

pages配置项接受一个数组，用来指定小程序由哪些页面组成，pages是必填项。

例，app.json文件：

{
"pages": [
    "pages/index/index1",
    "pages/news/news",
    "pages/logs/logs"
  ]
}

window配置项

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

例，app.json文件：

{
"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  }
}

tabBar配置项

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

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

例，app.json文件：

{
"tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index1",
        "iconPath": "images/fuwu.png",
        "selectedIconPath": "images/fuwu.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/news/news",
        "iconPath": "images/shoucang.png",
        "selectedIconPath": "images/shoucang.png",
        "text": "新闻"
      }
    ]
  }
}

networTimeout配置项

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

{
"networkTimeout": {
    "request": 200000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  }
}

全部代码：

{
  "pages": [
    "pages/index/index1",
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index1",
        "iconPath": "images/fuwu.png",
        "selectedIconPath": "images/fuwu.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/news/news",
        "iconPath": "images/shoucang.png",
        "selectedIconPath": "images/shoucang.png",
        "text": "新闻"
      }
    ]
  },
  "networkTimeout": {
    "request": 200000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug": false,
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

运行效果：

2.4 逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、用户自定义属性和方法。

小程序启动后首先触发onLaunch方法，然后触发onShow方法，在onShow方法中通过this参数获取自定义属性和自定义方法并显示。

app.js文件：

// app.js
App({
  onLaunch(){
    console.log("小程序初始化  >>>")
  },
  onShow(){
    console.log("小程序启动")
  },
  onHide(){
    console.log("小程序进入后台")
  },
  onError(){
  }
})

运行效果：

页面逻辑文件

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

设置初始数据

例，在index1.js和index1.wxml中输入代码：

index1.js

//index1.js
Page({
  //页面的初始数据
  data:{
    name:'los', //字符串
    age:3,      //数字
    birthday:[{year:2021},{month:11},{date:18}], //数组
    object:{hobby:'唱歌，跳舞，打篮球'} //对象
  }
})

index1.wxml

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

运行效果：

例，在index1.js和news.js加入代码：

index1.js

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

news.js

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

编译结果：

单击新闻选择卡出现效果：

再次单击首页选择卡效果：

定义事件处理函数

示例代码：

//index1.wxml
<view bind:tap="myclick">单击执行逻辑层事件</view>

//index1.ls
myclick:function(){
    console.log("你点击了view")
  }

使用 setData 更新数据

在index1.js和index1.wxml添加代码：

index1.js

Page({
  //页面的初始数据
  data:{
    name:'los', //字符串
    age:3,      //数字
    birthday:[{year:2021},{month:11},{date:18}], //数组
    object:{hobby:'唱歌，跳舞，打篮球'} //对象
  },
  chtext:function() {
    this.setData({
      name:'iKun'
    });
  },
  chage:function() {
    this.setData({
      age:-1
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2025},{month:12},{date:14}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'唱歌，跳舞，打篮球, rep'
    });
  },
  adddata:function() {
    this.setData({
      'address':'沙发'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
});

index1.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.5 页面结构文件

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

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

2.5.1 数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。

1.简单绑定

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

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

代码：

<view>算术运算：{{age+nen}}</view>

<view>逻辑运算：{{age==4}}</view>

<view>三元计算：{{age==3 ? age+nen :100 }}</view>

2.5.2 条件数据绑定

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

1. wx:if条件数据绑定

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

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

当添加更多模块时：

<view w×:if="{{x>0}}">1</view>

<view wx:elif="{{×==0}}">0</view >

<view wx:else>-1</view>

在以上代码中，当x的值大于0时，输出1；当x的值等于0时，输出0；否则，输出-1。

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

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

2.5.3 列表数据绑定

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

1. wx:for

在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式如下:

<view wx:for =”{{items}}”>
{{index}}:{{item }}
</view>

2. block wx:for

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

2.5.4 模板

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

1.定义模板

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

<template name="模板名">

2.调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为:

<template is="模板名称"data=="{{传入的数据}}"/>

其中，<template>为模板标签；is属性用于指定要调用的模板名称；data属性定义要传
人的数据，如果模板中不需要传入数据，data属性可以省略。

例：

<template name="stu">
  <view wx:for="{{student}}">
<text>{{index1}}</text>
<text>姓名：{{item.name}}</text>
<text> 身高：{{item.height}}</text>
<text> 体重：{{item.weight}}</text>
  </view>
</template>
<template is="stu" data="{{student}}"></template>

运行效果：

2.5.5 引用页面文件

在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。

1. import方式

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

2. include方式

include方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码
复制到include 所在位置。

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

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

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

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

在WXML中，冒泡事件有6个，如图所示：

2.6 页面样式文件

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

1.尺寸单位

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

2.样式导入

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

3.选择器

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

4.WXSS常用属性

WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如下表：

夏太热小小夏

关注

41
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
【微信小程序】第二章总结

由于页面配置文件的优先级要高于全局配置文件，因此，当全局配置文件与页面配置文件有配置相同的情况，页面配置文件会覆盖全局配置文件的相同配置内容。全局配置文件是来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值（networTimeout）以及配置多个切换页（tabBar）等。app.js、app.json、app.wxss是组成微信小程序的主体部分文件，这三个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。定义当前页面的生命周期函数；
复制链接

扫一扫