微信小程序

微信小程序

Native App由安卓和ios开发,可以通过苹果的App store或者安卓的应用商店直接下载安装

优点:直接底层开发,客户端安装,性能好,效果流畅

缺点:不能跨平台,开发需要ios和安卓两拨人,成本较高,发布的时间审核时间太长

Web App由HTML5开发,基于浏览器运行

优点:跨平台,开发一套代码可以在多设备上运行,节约成本,支持热发布,应用直接传到服务器,一刷新页面直接更新

缺点:做的应用功能受限(不能直接读取本地资源).性能稍差

Hybird混合开发模式,通过Native开发的js brige,那么js通过这个桥可以挂起Native的功能

目前企业或者公司的Hybird开发方式:

一:公司有自己的安卓和ios开发人员,完成将H5页面嵌入

二:通过第三方工具把自己打包cordova或者phonegap直接打包成apk安装包

三:微信(订阅号和服务号的开发)

问题:H5的性能稍差的缺点也会带入到Hybirdf里面

react的出现就是为了解决性能问题的

react核心就是虚拟dom(virtual Dom)

因为H5耗性能的是dom渲染而非js运行

React Native技术:可以不使用浏览器,直接利用js代码或者程序编一个映射接口直接调用底层的安卓.ios的一些东西,那么不使用浏览器,则一些问题就迎刃而解了

React Native的优点:①运行效率上接近Native App

                                ②具备混合开发的两个优点:热更新和跨平台

什么是微信小程序?

（1）不需要下载安装即可使用    从技术角度分析：小程序一开始时代码包限制为 1MB现在增加到2MB，不需要下载安装实际上是因为小程序体积非常小，当用户在点击该应用的时候下载安装的过程已经执行完成了。

（2）用户“用完即走”，应用将无处不在，随时可用

微信的发展历程？

第一阶段：IM阶段           （语音通信和摇一摇）

第二阶段：浏览器阶段（webview内嵌H5）            （订阅号）

第三阶段：OS阶段             （小程序） 注解：①IM: InstantMessaging(即时通讯,实时传讯)          

                                                                         ②OS：Operating System（操作系统）

小程序开发

注册小程序账号--->激活邮箱--->信息登记--->登录小程序管理后台--->完善小程序信息--->绑定开发者

环境搭建以及开发工具介绍    

微信公众平台—>小程序开发文档—>安装开发工具

文件结构介绍

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

1、一个小程序主体部分由三个文件组成，必须放在项目的根目录

文件	作用
app.js	小程序逻辑
app.json	小程序公共设置
app.wxss	小程序公共样式表

2、一个小程序页面由四个文件组成

文件	作用
js	页面逻辑
wxml	页面结构
wxss	页面样式表
json	页面配置

就近关系：如果一个样式既在app里面配置，又在页面里面配置了，则以距离这个页面最近的文件为准

说明：

（1）应用程序级别的文件名字必须是app.xxx

（2）为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名,文件夹的名字不做规定            xxx.wxml/xxx.wxss/xxx.json/xxx.js

（3）QuickStart 项目里边的 app.json 配置说明        

 pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。          window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

（4）每个页面的.json文件          

只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，直接配置选项即可

（5）工具配置 project.config.json    

说明：小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置

小程序是完全的组件化开发。

思考：什么叫组件？        

  官方解释：组件是对数据和方法简单的封装，组件拥有自    己的属性和方法。属性是组件数据的简单访问，方法是组件简单可见的功能。          

前端组件：组成页面内容的零件，封装起来的具有独立功能的UI部件 并且小的组件通过组合或者嵌套的方式可以构成大的组件

组件化开发思路

对于论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。 通过这种方式，每个组件的UI和逻辑都定义在组件内部，和外部完全通过API来交互，通过组合的方式来实现复杂的功能。

组件的特征：

（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件

组件化开发思路

（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景

（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

（4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多

搭建小程序入场页面

  

步骤：

 ①新建应用程序文件  app.js/app.json/app.wxss

②新建页面文件夹，如：pages

③新建页面文件（.js/.wxml/.wxss/.json）

④配置启动页面（参考文档框架--配置部分） 注意：不可以在配置文件里面写注释语句     并且需要在该页面对应的js文件注册页面，调用Page()方法，该方法接收一个Object参数

⑤搭建页面骨架（编写.wxml文件）      组件使用参考文档（组件）

⑥样式设置      可以直接设置style属性也可以在.wxss文件中设置 一般来说静态的样式设置在.wxss文件里面，需要动态改变的样式可以设置在style属性里面。

注意：     在.wxss文件里面编写样式无需在.wxml页面引入。因为app.json文件中注册页面的时候不只是注册一个.wxml文件，而是注册了以该文件名有关的所有文件，它自动可以将这些文件关联在一起；     通用样式可以在app.wxss设置。

⑦页面整体背景设置

小程序默认在最外边包了一个page容器，给该容器设置高度100%，在设置背景色。 如果设置头部导航栏的颜色则需要在app.json文件配置window属性

导航栏、标题配置

实现方法：    

在.json文件里面配置window选项 （参见文档—>框架—>配置—>window）

navigationBarBackgroundColor    HexColor  配置导航栏背景颜色

navigationBarTextStyle    String    white    配置导航栏标题颜色 （仅支持 black/white）

navigationBarTitleText    String    导航栏标题文字内容    

navigationStyle    String    default    导航栏样式 （仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮）该属性只在app.json配置有效

移动设备的分辨率和rpx

就iphone6而言：为什么在模拟器下的分辨率是375儿设计图一般给750呢？

 pt:逻辑分辨率（css像素），它的大小只与屏幕尺寸有关，可以简单的理解为是一个长度和视觉单位

px:物理分辨率（设备像素），跟屏幕尺寸没有关系，简单的理解为物理像素点，点是没有大小的，它不是一个长度单位 pt与px的关系reader（dpr）：1pt的长度里面可以包含几个px像素点 ppi(dpi):描述的是每英寸包含几个物理像素点

如何做不同分辨率设备的自适应？

iPhone6的物理像素750 X 1334的视觉稿进行设计，小程序采用rpx单位 iPhone6下：1px = 1rpx = 0.5pt 那么,使用rpx，小程序会自动在不同的分辨率下进行转换，实现自适应

希望能帮助到你!