小程序结构技术及相互约束：

1. 提供了JavsScript运行环境，由JavaScript编写的业务代码完成逻辑层的处理
2. 通过数据传输接口（注册Page时的data属性及后续的setData方法调用）将逻辑层的数据传输给视图层
3. 视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现4. 视图的样式控制由WXSS语言编写的样式规则进行配置

微信小程序无法直接连接后台服务器的数据库，如果想要跟后台服务器进行数据库的交互，只需要遵循微信官方抛出的接口API就好，然后就是类似于web交互方式了，在这里微信小程序扮演的角色就像是web当中的展示层一样

api接口.PNG

详细api信息访问以下网址：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

其中向后台发起数据请求的示例代码如下：

var app = getApp()
Page({
  onLoad: function () {
    wx.request({
      url: 'http://localhost', //服务器地址
      data: {
        name: 'bob'//请求参数   
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  }
})

从小程序到服务端交互编码示例可参考以下网址理解：

http://www.100txy.com/article/102.html

小程序开发硬性要求：

小程序要加载网站数据库里面的真实数据，有一个硬性的要求，就是你的网站域名必须是https协议才行

微信小程序开发当中的一些特定格式的文件：

• .json后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

WXML 充当的就是类似HTML的角色--基于xml
wxml≈xml+事件系统+模板引擎
WXML的标签： view, button, text 等等
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定

WXSS样式：支持新的尺寸单位 rpx--基于xml

• 建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
• 支持CSS大部分特性
• 使用@import语句可以导入外联样式表

微信当中的配置文件有两种：

• 全局配置文件，根目录下的app.json
• 页面配置文件，每个页面下的【pagename】.json

App函数是一个全局函数，用于创建应用程序对象
生命周期：

• onLaunch
• onShow
• onHide

page也是一个全局函数，用于创建页面对象
生命周期：

• onLoad
• onReady
• onShow
• onHide
• onUnload
• onPullDownRefreash --下拉刷新

微信小程序的一些特性：

1：小程序没有入口，这和公众号一样。
2：小程序没有官方商店
3：小程序不会有订阅的关系
4：很有限的通知能力，限制的非常严格
5：小程序不能分享到朋友圈，但是可以分享到聊天和群聊之中。
6：小程序不能做游戏
7：用户能搜索到小程序，但我们会极力限制搜索能力，避免被滥用。
8：目前有提供的关联是可以在公众号中看到该企业还有哪些小程序，反之亦然。
9：会轻量提醒用户附近有哪些小程序存在，比如附近哪一家店提供小程序。

一个邮箱只能注册一个类型的微信账号（订阅号、服务号、小程序）。

微信当中，如果最开始你指定的项目目录为空，那么微信会为你创建一个quick start工程，这个工程有助于我们理解小程序开发的工程目录结构：

└─ empty-folder/ ·································· 项目所在目录
├─ pages/ ······································ 页面目录
│ ├─ index/ ··································· index页面
│ │ ├─ index.js ······························ index页面逻辑
│ │ ├─ index.wxml ···························· index页面结构
│ │ └─ index.wxss ···························· index页面样式
│ └─ logs/ ···································· logs页面
│ ├─ logs.js ······························· logs页面逻辑
│ ├─ logs.wxml ····························· logs页面结构
│ └─ logs.wxss ····························· logs页面样式
├─ utils/ ······································ 公共脚本目录
│ └─ util.js ·································· 工具脚本
├─ app.js ······································ 应用程序逻辑
├─ app.json ···································· 应用程序配置
└─ app.wxss ···································· 应用程序公共样式

一个典型的豆瓣电影小程序架构示例：

structure.png

微信小程序页面中的层级结构：

config.jpg