微信小程序第二章总结

1，微信小程序目录结构

1   pages：存放全部的页面文件，有两子目录index与logs
2   utils：存放一些公共的.js文件（例如：格式化时间的自定义模块）
3   app.json：小程序公共设置文件，配置小程序全局设置
4   app.js：小程序逻辑文件，用来小程序全局实例
5   app.wxss：小程序主样式表文件
6    project.config.json：项目配置文件

2.主体文件：
app.js ：小程序逻辑文件。

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

app.wxss ：小程序主样式表文件。

3.页面文件：
js文件 ：页面逻辑文件

wxml文件 ：页面结构文件

wxss文件 ：页面样式表文件

json文件 ：页面配置文件

2，小程序开发框架

1.视图层：

由WXML与WXSS编写，由组件来进行展示。视图层所有 .wxml文件与 .wxss文件的集合：.wxml文件用于描述页面结构；.wxss文件用于描述页面样式。组件是视图的基本组成单元。

2.逻辑层：

用于处理事务逻辑。是所有.js脚本文件的集合。微信小程序在逻辑层将数据处理后发送给视图层，同时接受视图层的事件反馈。

逻辑层是采用Javascrpt编写的。在JavaSeript 的基础上，对应的值做了适当修改，以便提高开发小程序的效率。

(1)增加app()和Page()方法，进行程序和页面的注册
使用数据
(2)提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的.is脚本文件来实现的。

3.数据层

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

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 原窗口打开页面。

3，创建小程序

选中pages文件先将文件夹中名为index文件删除，再新建一个文件（在pages文件中）。在你新建的文件夹中新建四个页面文件

在app.json文件中修改第一句代码，改为你新建的文件名字

在new.js中输入：

Page({
 
  
 
})

在new.json中输入：

{}

在new.wxml中输入：

你好

运行结果

3，配置文件

小程序的全局配置保存在全局配置文件(app,jon)中，使用全局配置文件来配置文件(pmges)的路径、设置窗口(window)表现、设定网络请求API的超时时间(netwokTimeout)以及配置多个切换页(IabBar)等。

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

1.pages配置项

pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项设置 pages 配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。

(2)在小程序中新增或减少页面时，都需要对数组进行修改

(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对js、json、wxml和.wxss 文件进行整合数据绑定。

       

2.window配置项

负责设置小程序状态栏，导航条，标题，窗口背景色等系统样式。

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
 
  }

3.tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现

其中，list(列表)接受数组值，数组中的每一项也都是一个对象。

{
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/news/news",
      "text": "text",
      "iconPath": "img/R-C.jpg",
      "selectedIconPath": "img/R-C.jpg"
    },
     {
      "pagePath": "pages/logs/logs",
      "text": "text",
      "iconPath": "img/R-C.jpg",
      "selectedIconPath": "img/R-C.jpg"
     }
  ]
  },

4..networkTimeout配置项
小程序中各种网络请求 API的超时时间值只能通过networkTimeout 配置项进行统一设置不能在API中单独设置。

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

5.debug配置项

debug配置项用于开启开发者工具的调试模式，默认为alse。开启后，页面的注册路数据更新、事件触发等调试信息将以imnfo的形式输出到Console(控制台)面板上。

页面配置文件

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

逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过App()数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取
App()丽数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、用户自定义属性和方法

// app.js
App({
  onLaunch(){
    console.log("小程序初始化  >>>")
  },
  onShow(){
    console.log("小程序启动")
  },
  onHide(){
    console.log("小程序进入后台")
  },
  onError(){
  }
})

页面逻辑文件

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

设置初始数据

例，在new.js和new.wxml中输入代码：

new.wxml

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

new.js

 
Page({
  //页面的初始数据
  data:{
    name:'牢大', //字符串
    age:22,      //数字
    birthday:[{year:1997},{month:8},{date:18}], //数组
    object:{hobby:'唱歌，跳舞，rapper'} //对象
  }
})
 
 

运行结果界面

例，在logs.js和news.js加入代码：

  //生命周期函数--监听页面加载
  onLoad(){
    console.log("index1 onLoad.....")
  },
  //生周期函数--监听页面初次渲染完成
  onReady(){
    console.log("index1 onReady....")
  },
  //生命周期函数--监听页面显示
  onShow(){
    console.log("index1 onShow....")
  },
  //生命周期函数--监听页面隐藏
  onHide(){
    console.log("index1 onHide....")
  },
  //生命周期函数--监听页面卸载
  onUnload(){
    console.log("index1 onUnload....")
  },

定义事件处理函数

示例代码：

<button bind:tap="my">单击执行逻辑层事件</button>
 
 my:function(){
    console.log("你点击了view")
  },

使用 setData 更新数据

在new.js和new.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>
<button bind:tap="myclick">单击专属动作</button>

new.js

Page({
  //页面的初始数据
  data:{
    name:'突然', //字符串
    age:13,      //数字
    birthday:[{year:2004},{month:13},{date:38}], //数组
    object:{hobby:'虽然，肘击，打克拉克'} //对象
  },
  chtext:function() {
    this.setData({
      name:'谢谢'
    });
  },
  chage:function() {
    this.setData({
      age:+12
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2025},{month:12},{date:90}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'唱歌，发广告rappe，打篮球, 开该方法机，分隔符'
    });
  },
  adddata:function() {
    this.setData({
      'address':'尼克杨-传哈哈，冰红沟通'
    });
  },
  myclick:function(){
    console.log("你使用了肘击")
  },
});

2.5 页面结构文件 

WXML(WeiXin Markup Language)是框架设计的一套标准语言，用于渲染界面，WXML的渲染原理和React Native思路一致，通过一套标记语言，在不同平台被解析为不用端的渲染文件，如图：

使用微信开发者工具时，在WXML中编写一些HTML标签或自定义标签仍然会被正常解析，这会给开发者造成一种小程序能直接支持HTML标签的误解。这是因为微信开发者工具内核是浏览器内核，同时小程序框架并没对WXML中的标签和WXSS中的内容进行强验证，所以HTML和CSS能直接被解析，但这种不合法的WXML在手机端微信中是不能正常显示的。开发过程中我们异地杠幺拿真机进行测试，保证程序能正常运行。WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。

1.数据绑定

小程序中页面渲染时，框架会将WXML文件同时对应Page的data进行绑定，在页面中我们可以直接使用data中的属性。小程序的数据绑定使用Mustache语法（双大括号{{}}）将变量或简单的运算规则抱起来，主要由以下几种渲染方式：

1）简单绑定

简单绑定是指我们使用Mustache语法（双大括号{{}}）将变量包起来，在模板中直接作为字符串输出使用，可作用于内容、组件属性、控制属性、关键字等输出，其中关键字输出是将JavaScript中的关键字按其真值输出。