第二章总结

最新推荐文章于 2024-08-29 08:45:39 发布

鱼仔仔仔

最新推荐文章于 2024-08-29 08:45:39 发布

阅读量1k

点赞数 24

文章标签：微信小程序

本文链接：https://blog.csdn.net/2203_75538174/article/details/136495286

版权

本文详细介绍了微信小程序的基本目录结构、页面组成部分（.js,.json,.wxml,.wxss）、视图层与逻辑层的工作原理，以及数据层、配置文件、生命周期函数、数据绑定和页面样式等内容，为初学者提供了全面的开发指南。

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

小程序的基本目录结构

pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块
app.js 小程序的项目入口地址
app.json 小程序项目的全局配置文件，“包括小程序中的所有页面路径，窗口外观，界面表现，底部tab等”。
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件，用来记录对小程序开发工具的个性化配置
sitemap.json 用来配置小程序及其页面是否允许被微信索引

2.小程序的页面组成部分

然后每个页面又包括四个组成部分，.js,.json,.wxml,.wxss

1..js 文件，（页面的脚本文件，存放页面的数据，事件处理函数等）
2..json文件（当前页面的配置文件，配置窗口的外观，表现等）
3..wxml文件（页面的模板结构文件）其实就是web开发中的HTML文件
4..wxss文件（当前页面的样式表文件）也就是传统的css，基本差不多

2.1什么是视图层

小程序的开发框架

框架的视图层由WXMKL（WeiXin Markup language）与WXSS（WeiXin Style Sheet）编写，由组件进行展示。

　　对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合。

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

　　.wxml文件用于描述页面的结构。

　　.wxss文件用于描述页面的样式。

　　视图层以给定的样式展现数据并将时间反馈给逻辑层，而数据展现是以组件来进行的。组件（Component）是视图的基本单元，是构建.wxml文件必不可少的。

　　对于小程序的WXML编码开发，我们基本上可以认为就是使用组件、结合时间系统，构建页面结构的过程。.wxml文件中所绑定的数据，均来自于对应页的.js文件中Page方法的data对象。

WXML

　　WXML是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。

(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS

WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比，WXSS 扩展的特性有：单位尺寸和样式导入

2.2 什么是逻辑层

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

1.增加 App 和 Page 方法，进行程序注册和页面注册。
2.增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
3.提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
4.提供模块化能力，每个页面有独立的作用域。

2.2.1什么是数据层

微信小程序的数据层是指用于管理和处理小程序中的数据的一层。它主要包括数据的获取、存储、更新和同步等功能。微信小程序提供了一些内置的API和框架，帮助开发者更方便地进行数据层的操作。

在微信小程序中，可以通过以下几种方式来实现数据层的功能：

数据缓存：小程序提供了本地数据缓存的功能，可以将数据存储在本地，以便下次使用。开发者可以使用wx.setStorageSync和wx.getStorageSync等API来进行数据的存储和获取。
数据请求：小程序可以通过网络请求获取远程服务器上的数据。开发者可以使用wx.request等API发送HTTP请求，并在回调函数中处理返回的数据。
数据更新：小程序中的数据可以通过事件驱动的方式进行更新。开发者可以通过监听用户的交互事件或者其他触发条件，来更新数据并更新UI。
数据同步：小程序中的数据可以进行实时同步。开发者可以使用WebSocket等技术实现数据的实时传输和同步。
数据管理框架：微信小程序还提供了一些数据管理框架，如WXML和WXSS，用于管理和展示数据。开发者可以使用这些框架来实现数据的绑定、渲染和样式控制等功能。

2.3如何创建微信小程序页面

在新建微信小程序后会自动生成一个DEMO实例，我们可以在实例中修改自己所需的内容，当内容过多时，实例中的页面不足以满足我们的需求，因此需要新建微信小程序页面。

本文内容简单，分成两个部分进行介绍：

一、创建小程序
二、页面介绍
三、新建页面

一、创建小程序

二、页面介绍

在新建一个微信小程序项目时，得到如下界面，此开发界面为微信官方提供的Demo实例。

new.js

page（{

}）

new.josn

{

}

new.wxml

欢迎学习小程序开发

如新增一个new页面作为初始页面，则只需要在pages数组中添加"pages/new/new"，开发者工具会自动将.json .js .wxml .wxss 四个文件整合在路径下。
Pages数组的最后一项不需要逗号。
从事过网页编程的人知道,html是用来描述当前这个页面的结构，css用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。wxml、wxss、js具有其大部分特性。
开发人员可以对new页面进行自定义操作。

三、新建页面

2.4配置文件

1. pages 配置项

pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。
文件
设置pages 配置项时，应注意以下3点:
页面
(1)数组的第一项用于设定小程序的初始页面。
有相
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml 和 wxss文件进行整合数据绑定。

例如，app.json 文件的配置如下:

{

"pages":[
"pages/news/news",

"pages/index"]

}

2.window配置项

在app.json中设置如下window配置项

window":{
"navigationBarBackgroundColor":"#fff","
navigationBarTextStyle": "black"
"navigationBarTitleText":"小程序window 功能演示"，
"backgroundColor": "#ccc",
"backgroundTextStyle": "light"

3. tabBar 配置项

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

在app.json 文件中设置如下tabBar配置:

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

4. networkTimeout 配置项

例如，为提高网络效应效率，开发者可以啊app.json中使用下列超时设置：


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

5. debug 配置项

页面中的window 配置只需书写配置项，不必书写window，代码示例如下:

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

2.5逻辑层文件

我们在Demo2的app.js加入代码

app.js

App({
//当小程序初始化完成时，会触发onLaunch(全局只触发一次)
onLaunch: function(){
console.log("小程序初始化完成..)),
//当小程序启动(或从后台进入前台显示),时会触发onshow onShow: 
function (options){ console.log("小程序显示");
 console.log( this.data);
 console.log(this.fun())
},
//当小程序从前台进入后台，会触发onHide
 onHide: function (){
console.log("小程序进入后台”)
},
//当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息
 onError: function(msg){},
//自定义方法
fun:function(){
console.log("在app,js中定义的方法");},
//自定义属性
data:'在app.js中定义的属性'
})

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个。

1.设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object No- tation，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:'yz',
  age:21,
  birthday: [{ year: 1920 },{ month: 11 },{date: 19 }],
  object:{hobby:'rap'}
  },
onLoad:function(options){
  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>

在index.js和new.js添加下图代码

Page({
  data:{
  name:'wk',
  age:30,
  birthday: [{ year: 1988 },{ month: 11 },{date: 18 }],
  object:{hobby:'computer'}
  },
onLoad:function(options){
  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 ......")
},
})

效果图

3.定义事件处理函数

开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数。

//index.wxm1
<view bindtap ="myclick">单击执行逻辑层事件<~iew>
//index.js 
Page({
myclick:function(){
console.log("点击了 view" >
}
})；

4.使用setData 更新数据

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

index.js

Page({
  //页面的初始数据
  data:{
    name:'yz', //字符串
    age:19,      //数字
    birthday:[{year:1920},{month:11},{date:19}], //数组
    object:{hobby:'rap'} //对象
  },
  chtext:function() {
    this.setData({
      name:'wb'
    });
  },
  chage:function() {
    this.setData({
      age:20
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2015},{month:12},{date:14}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'街舞，乒乓球，足球'
    });
  },
  adddata:function() {
    this.setData({
      'address':'完成'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
});

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

1.数据绑定

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

示例代码

index.mxml

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算数运算; {{app+aum}}</view>
<view>逻辑运算; {{app==40}}</view>
<view>三元运算：{{age==1 ?3:4}}</view>

index.js

Page({
  //页面的初始数据
  data:{
  name:'yz',//字符串
  age:21,//数字
  birthday:[{year:1920},{month:11},{ date:19 }],//数组object:{hobby:'computer'}//对象
  }
})

效果图

2.7页面样式文件

wxss常用属性

鱼仔仔仔

关注

24
点赞
踩
20

收藏

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

小程序的开发框架框架的视图层由WXMKL（WeiXin Markup language）与WXSS（WeiXin Style Sheet）编写，由组件进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接受视图层的事件反馈。.wxml文件用于描述页面的结构。.wxss文件用于描述页面的样式。视图层以给定的样式展现数据并将时间反馈给逻辑层，而数据展现是以组件来进行的。
复制链接

扫一扫