└─ Project-folder/ ·································· 项目所在目录 ├─ pages/ ······································ 页面目录 │ ├─ index/ ··································· index页面 │ │ ├─ index.js ······························ index页面逻辑 │ │ ├─ index.wxml ···························· index页面结构 │ │ └─ index.wxss ···························· index页面样式 │ │ └─ index.json ···························· index页面配置(局部) │ └─ logs/ ···································· logs页面 │ ├─ logs.js ······························· logs页面逻辑 │ ├─ logs.wxml ····························· logs页面结构 │ └─ logs.wxss ····························· logs页面样式 ├─ utils/ ······································ 公共脚本目录 │ └─ util.js ·································· 工具脚本 ├─ app.js ······································ 应用程序逻辑 用于定义整个应用的逻辑 用来监听并处理小程序的生命周期函数、声明全局变量 ├─ app.json ································ 应用程序配置(全局) 对整个小程序的全局配置 配置小程序是由哪些页面组成,配置小程序的窗口背景色等 └─ app.wxss ······························· 应用程序公共样式 用来设置整个应用的公共样式 1.app函数是一个全局函数,用来创建一个应用程序实例,每个应用程序都会有他的生命周期 2.page也是一个全局函数,用来创建页面对象 3.wxml文件是XML语法,不是HTML语法。简单来说:wxml ≈ xml + 事件系统 + 模板引擎 4.json文件是配置文件,按需而建。但app.json必须建 5.页面的所有配置或设置都会优先于全局配置或设置,即局部会覆盖全局的配置 6.WXSS具有CSS大部分特性,同时进行了扩充及修改。尺寸单位(rpx)可以根据屏幕宽度进行自适应。而目前只支持少量选择器(.class/#id/element/element, element/::after/::before) 7.每个文件夹内的文件名次统一,只有后缀名不同,因为json配置文件中最终会将所有的页面整合成一个页面,通过相同的名称,将页面与逻辑js、样式进行关联匹配。 8. 当应用程序启动时会自动执行项目目录下的app.js文件,在app.js中通过调用全局App([option])方法创建一个应用程序实例,其中通过参数指定的一些特定的方法,会在特定的执行时机去执行,也就是说通常所说的生命周期事件方法。其中app.js,app.json是必需的。 小程序的生命周期函数
生命周期函数
页面的初始数据、生命周期函数、事件处理函数
页面的路由 在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式及页面生命周期函数如下:
选择器 目前支持的选择器有:
尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。 建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准
javascript限制与优化 (一)限制:
出于安全考虑,凡是通过传入字符串来执行代码的能力都禁用了。具体被禁掉的原生功能有:new Function、eval、Generator。这是同时也比较有效的避免了类似H5 中xss的问题。 禁掉的这些功能,对我们开发来说影响比较显著的应该是字符串转json,以往我们都是通过new Function、eval来处理后台cgi的返回。(移动端一般封装在zepto之类的框架中),小程序开发需要改变一下具体实现。
在这些BOM中,对开发影响最大的应该是没有cookie。因为其他功能例如storage,小程序有类似的处理方法。而cookie在web开发中是与后台登录相关的。小程序中是没有Cookie的,为了兼容目前大部分web app 的登录管理是使用cookie的。小程序在请求发送时,客户端可以动态的给请求设置Header发送报文的cookie。 注意一下cookie本身不能在客户端进行读写。因为没有cookie,H5中的csrf问题理论上是根本解决了。小程序是否存在其他客户端安全问题,需要技术、时间来检验~ (二) 优化
H5中,通过微信授权一般采用url重定向的方式获取code;在小程序中,通过wx.login获取code,这样避免了之前登录重定向的问题。
小程序用storage替代了H5中的localstorage、sessionstorage。storage对每个小程序的大小是10M,支持同步和异步。
(三) 不便 1)每个页面是需要手动在app.json中进行注册。如果没有注册,是不执行该页面的。 2)打开的页面有5个的限制,在开发时需要主要控制打开页面的数量 wxss:
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
(四)index.js中的data数据只读 页面js中,data数据是需要约定为只读。框架是单向数据绑定,修改data中的数据不会自动更新View;更新view,需要使用setData()方法。setData()更新View时,与data中的数据进行Diff比较,不同才会更新。这样如果直接修改data,很容易造成data中的数据与View不一致。
|
小程序开发基本框架及其限制与优化
发布:2018-02-07 10:21浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序开发工具 常用快捷键2018-06-09
- 微信小程序架构分析《一》调试技巧,模块构成,理念分析2018-02-07
- 微信小程序架构分析《二》:view 模块和 service 模块的构成2018-02-07
- 微信小程序架构分析《三》:实现过程以及实时更新2018-02-07
- 梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
- 微信小程序使用Promise实践2018-02-07
- 微信小程序开发系列分析《一》视图层2018-02-07
- 微信小程序开发系列分析《二》数据层2018-02-07
- 微信小程序官方文档个人分析心得2018-02-07
- 微信小程序的原型设计尝鲜2018-02-07