小程序 一、简介

小程序与普通网页开发的区别

• 对于网页开发来说，网页开发渲染和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应。网页开发者可以使用各种浏览器暴露出来的DOM API[文档对象模型，是HTML和XML的编程的接口。兵定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析为一个节点和对象组成的结构集合。他会将web页面和程序语言连接起来]，进行DOM选中和操作。
• 小程序中开发渲染线程和脚本线程是分开的，逻辑层运行在JSCore 中，并没有完整浏览器对象，因而缺少相关的DOM API和BOM API,因此jQuary、Zepto这些库是不能在小程序中运行的。

小程序的运行环境 

运行环境	逻辑层	渲染层
ios	JavaScriptCore	WKWebView
安卓	V8	Chromium定制内核
小程序开发工具	NSJS	Chrome WebView

 

 

小程的运行环境分为渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层。 
小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用Webview进行渲染；逻辑层采用JSCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端(Native)做中转，逻辑层发送网络请求也经由Native转发。

小程序框架系统分为两部分:逻辑层(App Service)和视图层(View)。并在视图层和逻辑层之间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图就会做相应的更新。

.wxml

<view> Hello{{name}}!</view>
<button bindtap="changeName"> Click me!</button>

.json

Page({
  data:{
    name:'WeChat'
  },
  changeName:function(e){
    this.setData({
      name:'MINA'
    })
  }
})

• 开发者通过框架将逻辑层数据中的name与视图层的name进行绑定，所以在页面一打开的时候会显示Hello WeChat！;
• 当点击按钮的时候，视图层会发送changeName的时间给逻辑层，逻辑层找到并执行对应的时间处理函数；
• 回调函数触发后，逻辑层执行setData的操作，将data中的name从Wechat变为MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello MINA ！

小程序代码构成

• .json  配置文件
• .wxss 模板文件
• .wxml 样式文件
• .js    脚本逻辑文件

JSON 配置文件
JSON是一种数据格式，在小程序中扮演静态配置的角色。

• app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
• project.config.json,会记录当前工具的配置，当你重新安装工具或者更换电脑时，只要载入同一项目的代码包，开发者工具就会自动帮你恢复到当时你开发项目时的个性化配置，其中包含编辑器的颜色、代码上传是自动压缩等等一系列选项。
• xx.json 主要定义每个页面的Navigation的一些属性。

WXML 模板文件
描述当前页面的结构，

wxss样式 样式文件