前端_微信小程序
微信小程序
小程序
小程序包含描述整体程序的app和多个描述各自页面的page,根目录包含app.js(必需),project.config,json(必需),app.json(必需).app.wxss(非必需).
每个页面包含四个文件:index.js(页面逻辑,必需),index.wxml(页面结构,必需),index.json(页面配置,非必需).index.wxss(页面样式表,非必需)
WXML:一种标签语言,结合组件,事件,构建出页面结构.所有的wxml标签都支持的属性有id,class,style,hidden,data,bind/catch
WXSS:rpx作为尺寸单位，@import url('.//.a.wxss')实现样式引用。支持.class #id element ：after ：before
JSON:一种数据格式,静态配置.语法: { "pages": [], "window": {}},注意在JSON中无法使用注释
app.json(小程序公共配置)当前小程序的全局配置,包括小程序所有页面路径,界面表现,网络超时时间,底部tab等。
JavaScript：ECMAScriptScript（语法+类型+语句+关键字+操作符+对象）+小程序框架+小程序API小程序的宿主环境：分为逻辑层（JS）与渲染层（WXML+WXSS），页面由组件，API，事件，兼容性构成。
小程序的API：宿主环境提供丰富的API，所有的API都挂在wx对象下（除了Page/APP等特殊的处理器）。
wx.set*开头的API是写入数据到宿主环境的接口。 wx.get*开头的API是获取数据到宿主环境的接口。 小程序要求开发者服务器提供HTTPS服务的接口。 接口回调说明：success 成功 fail 失败 complete 接口调用结束的回调函数 小程序的场景应用：Flex布局 界面的交互反馈 微信登录 本地数据缓存 设备能力
微信登录: wx.login生成一个带有时效性的凭证,发送code到服务器,到微信服务器获取微信用户身份id,绑定微信用户身份和业务用户身份,业务登录凭证返回SessionId
分包加载
在小程序分包大小有限制,整个小程序所有的分包不超过8M,单个分包/主包不能超过2M.项目有一个主包,放置默认启动页面/TabBar页面,以及一些基础配置.
前端Hybrid解决方案,渲染线程与脚本线程(逻辑层)是分开,环境包括IOS和Android的微信客户端,以及开发者工具.
缺点:不能订阅,不能转发朋友圈,不能主动推送消息.检索具有局限性,不能模糊搜索.
逻辑层(App Service)
--小程序框架的逻辑层,采用JavaScript引擎为开发者提供JavaScriptd代码的运行环境以及微信小程序的特有功能(如:增加APPh和Page方法),逻辑层将数据处理后发送给视图层且接受视图层的反馈.
--API
--模块化
--路由
--注册页面
--场景值 注册程序视图层: 由于WXML和WXSS和WXS和组件展示,由组件来进行展示,主要作用是将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层.
事件:touchstart touchmove touchcancel touchend tap longpress longtap
宿主环境:小程序的运行环境分成渲染层(WXML和WXSS)和逻辑层(JavaScript)分别由两个线程管理,渲染层的界面使用WebView继续渲染,逻辑层使用JSCore线程运行脚本.小程序会有多个页面,也就有多个WebVIew线程.所有线程的通信经由微信客户端做中转.
所有页面的脚本逻辑都跑同一个JsCore线程,页面使用setTimeout或者setInterval的定时器,跳转其他页面时,这些定时器并没有被消除.
分享小程序
相关页面的js,添加onShareAppMessage
onShareAppMessage() {
return {
title: 'titlename',
path: '/pages/index'
}
}WebPy
初始化项目:
$npm install wepy-cli -g $npm install -g wepy-cli $wepy init standard my-project
切换到目录,安装依赖,开启实时编译
$cd myproject $npm install $wepy build --watch
WebPY项目的目录结构:
├── dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件） ├── node_modules ├── src 代码编写的目录（该目录为使用WePY后的开发目录） | ├── components WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用） | | ├── com_a.wpy 可复用的WePY组件a | | └── com_b.wpy 可复用的WePY组件b | ├── pages WePY页面目录（属于完整页面） | | ├── index.wpy index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和 index.wxss文件） | | └── other.wpy other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件） | └── app.wpy 小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件） └── package.json 项目的package配置
分包加载
分包加载的小程序,进行按需加载,必含一个主包(放置默认启动页面/TabBar页面,以及一些所有分包都需要使用的公共资源/Js脚本),分包则是根据开发者的配置进行划分.分包有以下限制:整个小程序所有分包不超过8M,单个分包/主包大小不能超过2M.
视图层
框架的视图是由WXML和WXSS编写,由组件来进行编写,将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层