第二章 微信小程序开发基础_mina框架微信小程序

一、小程序的基本目录结构

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

    在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

1.主体文件

■appjs小程序逻辑文件

■app.json 小程序公共设置文件

■app.json 小程序公共设置文件

2.页面文件

 ■.js文件 页面逻辑文件

■.wxml文件 页面结构文件

■.wxss文件 页面样式表文件

■.json文件 页面配置文件

二、小程序的开发框架

小程序MINA框架示意图

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言 WXML(WeiXin Markup Language)和用于描述 WXML组件样式的 wXSS(WeixinStyle Sheets)组成，它们的关系就像HTML和CSS的关系。

2.1视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构mxss文件用于描述页面的样式。

2.2逻辑层

(1)增加app()和Page()方法，进行程序和页面的注册。
(2)提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。

2.3数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用

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

wx.redirectTo 原窗口打开页面

三、创建小程序页面

在pages目录下新建一个 index 目录，并在index 目录下新建 imndex js、inde. jom、dex wxml和 imdex. wxss 空文件。新建 index 页面后的项目目录结构如图

假设，我们的目的是页面能显示“欢迎学习小程序，实现大梦想”。首先，打开 index.wxml文件，输入“欢迎学习小程序，实现大梦想”。然后告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app.json，输人如下代码:

//app.json
 
{
 
"pages ":[
"pages /index/index"
 
       ]
 
}

这段代码将index 页面注册到小程序中，这个对象的第一属性 pages 接受了一个数组该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名.

pages属性用来指定这个项目由哪些页面组成，多个页面之间用“,”分隔。接下来，打开 index json 文件，输人如下代码:

//index.json
{
}

在 indes json 文件中，只需加人一对空“{}”即可。打开 index. js 文件，输人如下代码:

//index.js
Page({
 
 
})

只需引人 Page()方法，保证 indexjs 文件不为空即可。将这4个文件保存后进行编译，在模拟器中即可得到所需的结果。各文件的代码内容如表所示。

创建另一个页面文件

我们采用逐步创建目录及4个文件的方式成功创建了一个页面文件。
在本节中，我们采用另一种方式来创建另一个页面文件news。
打开 app.json 文件，输入以下代码:

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

将文件保存后，我们发现系统在目录结构中自动添加了相应的目录和文件，系统补全了每个页面文件中必需的基本代码，而且没有出现错误提示，如图所示

四、配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置(*.json)。

全局配置文件

全局配置文件内容的整体结构如下:

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

1.pages配置项

{
 "pages":[
    "pages/news/news",
    "pages/index/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/logs/logs",
      "iconPath": "images/news1.png",
      "selectedIconPath": "images/news2.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
 }
}

五、逻辑层文件

项目逻辑文件

app.js配置文件

// app.js
App({
  onLaunch:function(){
    console.log("小程序初始化完成.......")
  },
  onShow:function (options){
    console.log("小程序显示");
    console.log(this.data);
    console.log(this.fun())
  },
  onHide:function(){
    console.log("小程序进入后台")
  },
onError:function(msg){
},
fun:function(){
  console.log("在app.js中定义的方法");
},
data:'在app.js中定义属性'
})

 保存编译后控制面板显示效果：

页面逻辑文件 配置项

1.设置初始数据代码以及数据绑定效果运行图

Page({
  data:{
    name:'wuyu',
    age:30,
    birthday: [{year:1992},{month: 11 },{date: 18 }],
    object:{hobby:'computer'}
 }
})

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

六、页面结构文件

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

条件数据绑定实例代码：

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">0</view>
<view wx:eles>-1</view>

Page({
  data:{
    name:'wuyu',
    age:30,
    birthday: [{year:1992},{month: 11 },{date: 18 }],
    object:{hobby:'computer'}
}
})

 运行图：

冒泡事件

七、页面样式文件 

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

wxss常用属性

八、本章总结

本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。