前端_微信小程序

发布时间:2019-06-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端_微信小程序脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序

小程序
小程序包含描述整体程序的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编写,由组件来进行编写,将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层

脚本宝典总结

以上是脚本宝典为你收集整理的前端_微信小程序全部内容,希望文章能够帮你解决前端_微信小程序所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。