“小程序框架及文件介绍”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
 
(未显示同一用户的13个中间版本)
第2行: 第2行:
  
 
小程序框架的核心是一个响应的数据绑定系统。整个系统分为两块,视图层和逻辑层
 
小程序框架的核心是一个响应的数据绑定系统。整个系统分为两块,视图层和逻辑层
 +
 +
[[文件:wx1-51.png]]
  
 
===视图层 (view)===
 
===视图层 (view)===
第13行: 第15行:
 
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
 
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
  
WXML(WeiXin Markup language)用于描述页面的结构。
+
WXML(WeiXin Markup language)用于描述页面的结构,类似于网页设计中的HTML
  
WXSS(WeiXin Style Sheet)用于描述页面的样式。
+
WXSS(WeiXin Style Sheet)用于描述页面的样式, 类似于网页设计中的CSS
  
 
组件(Component)是视图的基本组成单元。
 
组件(Component)是视图的基本组成单元。
第30行: 第32行:
  
 
每个页面有独立的作用域,并提供模块化能力。
 
每个页面有独立的作用域,并提供模块化能力。
 
[[文件:wx1-51.png]]
 
  
  
第37行: 第37行:
  
 
小程序文件包含一个描述整体程序的app和多个描述各自页面的page.
 
小程序文件包含一个描述整体程序的app和多个描述各自页面的page.
 
===页面===
 
 
一个页面由四个文件组成,如下所示:
 
 
*index(默认),也称为首页面
 
 
[[文件:wx1-52.png]]
 
  
 
===小程序注册及配置===
 
===小程序注册及配置===
第65行: 第57行:
  
 
sitemap.json用于控制小程序是否能够被搜索到。
 
sitemap.json用于控制小程序是否能够被搜索到。
 +
===页面===
 +
 +
一个页面由四个文件组成,如下所示:
 +
 +
*index(默认),也称为首页面
 +
 +
[[文件:wx1-52.png]]
 +
 +
utils/ 存放公共脚本文件的目录
 +
 +
utils/utils.js 公共脚本文件,保存一些工具代码
 +
 +
 +
  
 
==小程序的执行流程==
 
==小程序的执行流程==
 
===小程序注册及配置===
 
===小程序注册及配置===
  
*注册应用 app.js
+
*1.系统注册应用 app.js
  
*全局配置 app.json
+
*2.进行全局配置 app.json
  
*设置样式 app.wxss
+
*3.设置全局样式 app.wxss
  
*工具配置 project.config.json
+
*4. 进行工具配置 project.config.json
  
页面渲染执行 - app.json
+
===页面渲染执行===
 +
小程序运行时,就按照app.json这个全局配置文件里的顺序来渲染执行:
  
*主页面(index)
+
例:
  
*从页面(index2)
+
  <nowiki>
 +
"pages":[
 +
    "pages/index/index",
 +
    "pages/test/test",
 +
    "pages/threee/threee",
 +
    "pages/logs/logs"
 +
  ],</nowiki>
  
*日志信息(logs)
+
运行时 ,首先执行pages/index/index页面,其他页面根据需要切换和使用。
  
 
==json文件介绍==
 
==json文件介绍==
 +
全局配置文件,局部配置文件
 
===特点===
 
===特点===
  
第99行: 第113行:
  
 
*通过键值对(key-value)的方式来表达数据
 
*通过键值对(key-value)的方式来表达数据
 +
 +
*键要用双引号括起来,
 +
 +
例1:
 +
 +
<nowiki>
 +
{
 +
  "firstName": "Brett",
 +
  "lastName": "McLaughlin"
 +
}  </nowiki>
 +
 +
例2:
 +
 +
<nowiki>
 +
"conversation": {
 +
"current": -1,
 +
"list": []
 +
},</nowiki>
 +
 +
例3:
 +
 +
<nowiki>{
 +
    "name": "中国",
 +
    "province": [{
 +
        "name": "黑龙江",
 +
        "cities": {
 +
            "city": ["哈尔滨", "大庆"]
 +
        }
 +
    }, {
 +
        "name": "广东",
 +
        "cities": {
 +
            "city": ["广州", "深圳", "珠海"]
 +
        }
 +
    }, {
 +
        "name": "台湾",
 +
        "cities": {
 +
            "city": ["台北", "高雄"]
 +
        }
 +
    }, {
 +
        "name": "新疆",
 +
        "cities": {
 +
            "city": ["乌鲁木齐"]
 +
        }
 +
    }]
 +
}</nowiki>

2022年5月15日 (日) 07:00的最新版本

小程序框架介绍

小程序框架的核心是一个响应的数据绑定系统。整个系统分为两块,视图层和逻辑层

Wx1-51.png

视图层 (view)

  • 内容展示
  • 文本样式

视图层由WXML与WXSS编写。

将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构,类似于网页设计中的HTML

WXSS(WeiXin Style Sheet)用于描述页面的样式, 类似于网页设计中的CSS

组件(Component)是视图的基本组成单元。

逻辑层(app service)

  • 业务逻辑
  • 数据处理

小程序开发框架的逻辑层是由JavaScript编写。

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

每个页面有独立的作用域,并提供模块化能力。


小程序文件介绍

小程序文件包含一个描述整体程序的app和多个描述各自页面的page.

小程序注册及配置

  • 入口文件
  • 配置文件
  • 全局样式

Wx1-53.png

app.js文件,入口注册文件,用来定义小程序的全局数据和函数,控制、监听小程序的全生命周期。在这里可以见到的全局函数有onlaunch(监听小程序初始化),onshow(监听小程序显示),onhide(监听小程序隐藏)等。app.js中还可以定义一些全局变量,其他页面引用app.js文件后就可以直接使用这个文件中的函数和变量。

app.json是配置文件,可以配置以下信息:页面路径,窗口信息,标签导航,网络超时等。

app.wxss,类似于css,用于配置各种样式

project.config.json用于保存配置信息。

sitemap.json用于控制小程序是否能够被搜索到。

页面

一个页面由四个文件组成,如下所示:

  • index(默认),也称为首页面

Wx1-52.png

utils/ 存放公共脚本文件的目录

utils/utils.js 公共脚本文件,保存一些工具代码



小程序的执行流程

小程序注册及配置

  • 1.系统注册应用 app.js
  • 2.进行全局配置 app.json
  • 3.设置全局样式 app.wxss
  • 4. 进行工具配置 project.config.json

页面渲染执行

小程序运行时,就按照app.json这个全局配置文件里的顺序来渲染执行:

例:

 
 "pages":[
    "pages/index/index", 
    "pages/test/test",
    "pages/threee/threee",
    "pages/logs/logs"
  ],

运行时 ,首先执行pages/index/index页面,其他页面根据需要切换和使用。

json文件介绍

全局配置文件,局部配置文件

特点

  • 轻量级的数据交换格式
  • 直观理解
  • 便于修改

结构

  • 文件数据被包裹在一个大括号中 {}
  • 通过键值对(key-value)的方式来表达数据
  • 键要用双引号括起来,

例1:

{
  "firstName": "Brett", 
  "lastName": "McLaughlin"
}   

例2:

"conversation": {
	"current": -1,
	"list": []
},

例3:

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}