微信小程序
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,小程序会自动在不同的分辨率下进行转换,实现自适应
希望能帮助到你!