微信小程序笔记1

微信小程序笔记1

1.设计模式

1.1SPA（页面设计思想）

• 单页web应用（single page web application），即用户通过浏览器访问一个网站的时候，网站中的内容切换不会产生新的页面（例如Angular中文文档页面 https://www.angular.cn/，切换不同的页面响应的是数据和图片而不是浏览器请求的新页面。）。
• 在开发时，用户可以访问的页面只有一个（主体页面）。开发时为了适应开发者习惯，引入了一种新的开发模式——页面模板（例如主体页面是空的，但可以通过某种请求方式去装载某个模板将它移到主体页面中）。后台请求模板文件，模板通过JavaScript的DOM渲染在主体页面中显示出来（DOM渲染即通过JavaScript的一些方法如.html写入进页面）。

　　单页面应用即为保证页面不刷新的情况下动态地改变页面内容。

1.2MVVM框架

　　模型视图视图模型（modal view view-modal），实际上是省略开发时对于页面DOM的操作，但是可以实现页面数据与内存数据均变化的功能。

　　小程序中不同的页面其实都是模板，用户开发即在进行模板的调用。

2.微信小程序构成

2.1文件构成

• .js文件  ： 为微信小程序添加页面功能。（必须）
• .json文件  ： 为微信小程序添加初始设置项。（app页面中必须）

function SetData(){

    //设置参数，将参数打包成对象传入，传入配置
    var option = {
          url : "xxx",
          ...
    };

     //实际上就是方法，为ajax请求进行请求前的参数设置
     $.ajax(option);
    
}
以上阐述了微信小程序中json文件的作用

• .wxml文件  ：  微信标记语言（符合微信规范的标记语言）。（必须）

　　　html ：超文本标记语言（符合W3C规范的标签）

• .wxss文件  ： 微信样式表（可以被微信识别的css样式）

　　　css ：层叠样式表

　　在微信中有些样式不一定是html和css的默认显示效果。

2.2程序结构构成

　　  → 项目主体文件，用于启动项目。

　　   pages → 模板页面的存放路径（名称可以修改但需要定义）

　　　　　　　　    utils → 工具包文件夹（不必须）

　　   pages下的整个文件夹 → 整体的模板页面，其子文件称为模板构成项，文件的名称和模板名称一样。

2.3小程序的技术块

• 框架  ： 用于解释说明小程序运行时的一些基础构成。
• 组件  ： 对应wxml，是微信定义的在程序中可以使用的内置标签。

1. view ：相当于html布局标签的div，块级。
2. text ：相当于html布局标签span，行级（行级标签内部只能放行级标签）。

• API  ： 对应微信提供的一些功能 。