第二章总结

BAKA猫

已于 2024-03-08 15:35:20 修改

阅读量664

点赞数 31

文章标签：微信小程序

于 2024-03-08 15:32:57 首次发布

本文链接：https://blog.csdn.net/BAKAv/article/details/136496467

版权

小程序的基本目录结构介绍

一.主体文件

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

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。
app. wxss 小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

二.页面文件

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

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

小程序的开发框架

介绍

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

小程序MINA框架示意

组成

逻辑层：
微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

视图层：
框架的视图层由WXML（WeiXin Markup language）与WXSS（WeiXin Style Sheet）编写，由组件来进行展示。于微信小程序而言，视图层就是所有．wxml文件与．wxss文件的集合。

数据层：
数据层包括临时数据或缓存、文件存储、网络存储与调用。

数据层的三个作用

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

创建小程序页面

1.先新建一个项目，在pages目录下新建一个index目录，并在index目录下新建index.js、index.json、index.wxml和index.wxss空文件。

2.app.json，代码如下：

{
  "pages": [
    "pages/index/index"
  ],

3.在index.json文件，输入如下代码：

{
}

4.在index.js文件，输入如下代码：

page({
})

5.最后在index.wxml文件中输入要显示的内容：“欢迎学习微信小程序开发！”

欢迎学习微信小程序开发！

运行效果：

配置文件

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

全局配置项

window配置项

tabBar配置项

tabBar中list选项

networkTimeout配置项

页面配置文件

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

示例：

"navigationBarBackgroundColor": "#ffffff"，
"navigationBarTextStyle": "black"
"navigationBarTitleText":"页面window配置演示"，
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"

逻辑层文件

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

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

App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命户自定义属性和方法，其参数如下表所示。

项目逻辑文件配置项

页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaSeript 引擎中。因此、在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面，只能采用数据绑定和事件响应来实现。

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如下表：

1.设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object Notation，Js 对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、组)。
视图层可以通过 WXML, 对数据进行绑定。

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

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad 页面加载函数。当页面加载完成后调用该函数一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。

onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行tab 切换时调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo 操作时，调用该函数。

示例：

index.js（页面的初始数据）

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

index.wxml(用于数据绑定）

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

运行效果图

示例2：

在示例1的index.js中加入：

({
onLoad:function () {
  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 ......")
},
})

index.wxml：

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

app.json:

{
  "pages": [
    "pages/index/index",
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/news/news",
      "text": "首页",
      "iconPath": "images/index1.jpg",
      "selectedIconPath": "images/index1.jpg"
    },{
      "pagePath": "pages/index/index",
      "text": "新闻",
      "iconPath": "images/index1.jpg",
      "selectedIconPath": "images/index1.jpg"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

运行效果图

页面结构文件

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

数据绑定

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

2.运算绑定：做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等), 这些运算均应符合JavaScript 运算规则。

index:wxml:

<!--pages/news/news.wxml-->
<!-- 数据简单绑定 -->
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>
<!-- 条件数据绑定 -->
<view wx:if="age>40">1</view>
<view wx:elif="age==40">2</view>
<view wx:else>3</view>
<!-- 列表数据绑定 -->
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
<!-- 运算 -->
<view>算数运算：{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算：{{age==1?3:num}}</view>
<!-- 模板 -->
<template name="cy">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="cy" data="{{students}}"></template>

index.js

// pages/news/news.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    name:'lwk',//字符串
    age:30,//数字
    num:110,
    birthday:[{year:1988},{month:11},{date:18}],//数组
    object:{hobby:'computer'},//对象
    students:[
      {
        nickname:"Tom",height:180,weight:150
      },
      {nickname:"Jack",height:190,weight:155}
    ]
    
  }
})

运行效果图

页面样式文件

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

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

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

//a. wxss
.cont{border:lpx solid #f00;}
//b.wxss
@ import"a.wxss;"
.cont{padding:5rpx; margin;5px;}
//以上代码的效果与下列代码的效果相同:
//b. wxss
.cont{border:lpx solid #f00 ;
Padding:5px;marwgin:5px;}

3.选择器

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

4.WXSS常用属性

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

WXSS常用属性

BAKA猫

关注

31
点赞
踩
12

收藏

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

微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统网络通信、任务管理数据安全等基础功能，对上层提供了一整套，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。小程序MINA框架示意在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。onLoad页面加载函数。当页面加载完成后调用该函数一个页面只会调用一次。
复制链接

扫一扫