第二章总结

2301_76596115

已于 2024-03-08 12:42:39 修改

阅读量1.4k

点赞数 53

文章标签：微信小程序微信开放平台

于 2024-03-06 10:21:16 首次发布

本文链接：https://blog.csdn.net/2301_76596115/article/details/136445294

版权

本文介绍了微信小程序的基础知识，包括项目目录结构、MINA框架的视图层和逻辑层分工、数据管理（临时缓存、文件存储和网络请求）、页面配置、事件处理和页面样式（WXML和WXSS）。

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

微信小程序开发基础

1.小程序的基本目录结构

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

project.config.json文件是项目配置文件。

2.小程序的开发框架

小程序的开发提供了MINA框架，MINA框架通过微信客户端提供文件系统、网络通信等基础功能，对上层提供了一整套JavaScript API，让开发者能够快速搭建应用。

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

视图层

MINA视图层由WXML和WXSS编写，由组件来进行展示。微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。

逻辑层

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

数据层

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

1.页面临时数据或缓存

在 Page（）中，使用 setData 函数将数据从逻辑层发送到视图层，同时改变对应this. data 的值。
setData（）函数的参数接收一个对象，以（key,value）的形式表示将 key 在this. da对应的值改变成 value。

2.文件储存（本地储存）

使用使用数据 API 接口，如下：
wx. getStorage 获取本地数据缓存。
wx. setStorage 设置本地数据缓存。
wx. clearStorage 清理本地数据缓存。

3.网络储存和调用

上传或下载文件 API接口，如下：
wx. request 发起网络请求。
wx.uploadFile 上传文件。
wx.downloadFile 下载文件。
调用 URL 的API 接口，如下：
wx.navigateTo 新窗口打开页面。
wx. redirectTo 原窗口打开页面。

创建小程序页面

创建第一个页面文件

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

打开app.json，输入如下代码：

{
"pages":[
"pages/news/news"
]
}

接下来在news.json文件，输入如下代码：

{
}

打开news.js文件，输入如下代码：

page({
})

最后在news.wxml文件，输入"欢迎学习小程序"即可：

欢迎学习小程序

运行结果：

配置文件

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

全局配置项

window配置项及其描述

tabBar配置项及其描述

tabBar中list选项

networkTimeout配置项

页面配置文件

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

逻辑层文件

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

项目逻辑文件配置项

app.js

onLaunch(){
    console.log("初始化")
  }, 
onShow(){
    console.log("启动")
  },
  onHide(){
    console.log("隐藏")
  }

页面逻辑文件配置项

index.js 数据初始

Page({
  data:{
    name:'lwk',
    age:30,
    birthday:[{year:1998},{month:11},{data: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>

运行效果

在app.json文件中设置如下taBar配置：

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

运行效果：

欢迎学习小程序
<view>{{name}}</view>
  <image src="{{img}}"/>
  <view wx:if="{{sex}}">=男</view>

页面结构文件

数据绑定

将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。

index.wxml代码如下：

欢迎学习小程序
<view>{{name}}</view>
  <image src="{{img}}"/>
  <view wx:if="{{sex}}">=男</view>

index.js代码如下：

Page({
  data:{
    name:'/wk',
    img:'/images/news.jpg',
    sex:true
  },
})

运算：

news.wxml

 </view>        
  <view>爱好：{{object.hobby}}</view>
  <view>算术运算：{{age+num}}</view>
  <view>{{num1}}+{{num2}}={{num1+num2}}</view>
  <view>{{num1+num2 == num1+num2}}</view>
  <view>{{num >num2?'num1>num2':'num1<num2'}}</view>

news.js

Page({
  data:{
    num:100,
    num1:2,
    num2:3,
    num3:10
  }
  
})

运算结果：

条件数据绑定

<view wx:if="{{X>0}}">1 </view >
<view wx:elif="{{x==0}}">0</view>
<view wx: else> -1 </view>

运行结果：

列表数据绑定

index.wxml

<view wx:for ="{{student}}" >
<text > {{index}} --{{litem.name}} -- {{litem. age}} --
{{item.hobby}} </text >
</view>

index.js

Page({
  data: {
student: [
 {name:'Tom',age:15, hobby: 'game'},
 {name: 'Helen', age: 14,hobby: 'music'},
 {name: 'Bob', age:16, hobby: 'basketball'}
]
}
})

运行结果：

模板

定义模板:

<template name="模板名">

调用模板：

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

引用页面文件：

import方式

在a.wxml文件中定义一个item模板：

<template name="item">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</template>

include方式

在aa.wxml文件定义如下代码：

<text>{{item.name}}</text>
<text>{{item.age}}</text>

bb.wxml文件中定义如下代码：

<include src="aa.wxml"/>
<text>{{item.hobby}}<text/>

bb.wxml文件通过include把aa.wxml文件代码加载，其结果为如下结构：

<text>{{item.name}}</text>
<text>{{item.age}}</text>
<text>{{item.hobby}}</text>

页面事件

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

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。

冒泡事件：冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素在向其父级元素传递，一直到页面的顶级元素
级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事代吗的发果与下到代码的在WXML中，冒泡事件有6个

冒泡事件

页面样式文件

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

WXSS常用属性

2301_76596115

关注

53
点赞
踩
37

收藏

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

在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils)和4个文件（app.js、app.json、app.wxss、和project.config.json)。project.config.json文件是项目配置文件。
复制链接

扫一扫