当前位置:首页 > 移动开发 >

微信小程序组件化开发框架WePY v1.x 官方文档 PDF 清晰版

大小:2.29 MB已被25人关注

微信小程序组件化开发框架WePY v1.x 官方文档是一个不错的学习资源,大小为2.29 MB,由蓬正德 提供,微信小程序类资源中评分为8.9。

Tags:官方文档 微信小程序 开发框架 

内容介绍

让小程序支持组件化开发的框架。一个最受欢迎的小程序框架.

学习笔记

给大家精选了网上关于《微信小程序组件化开发框架WePY v1.x 官方文档》的学习笔记心得及相关实例内容,值得大家学习参考。

详解 微信小程序开发框架(MINA)

小程序MINA框架,及优点

MINA框架:

小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。   

MINA的核心是一个响应的数据绑定系统。

 整个系统分为两块:视图层(view,描述语言wxml和wxss)和逻辑层(App Serice,基于 JavaScript)。这可以让数据与视图非常简单的保持同步。当做数据修改时,只需要在逻辑层改数据,视图层就会做响应的更新。开发者只需要将页面路由、方法、生命周期函数注册进框架,其他的一切复杂的操作都将由框架处理。

小程序优点:

• 方便使用:无需下载,打开即用,用完即走。不占用手机内存,省流量,省安装时间
• 开发简单:开发的本质是MVVM风格的Javascript框架上开发的,有前端经验的程序员可以无缝衔接,无经验的“小白”也可以快速入门。
• 跨平台运行:不用再分别开发IOS和Andriod版本,只需要发布微信小程序平台,所有平台都可以使用。开发成本低
• 快速分发与迭代:无需关心各种发布渠道,也无须担心旧版本升级的兼容问题。 

 打开速度比H5快,体验接近原生APP

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

微信团队为小程序提供的框架命名为MINA。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供一整套JavaScript API,让开发者方便的使用微信客户端提供的各种基础功能与能力,快速构建应用。

MINA框架

微信小程序的框架示意图如下所示:

详解 微信小程序开发框架(MINA)

MINA框架主要分为两大部分:

第一部分页面视图层,开发者使用WXML文件来搭建页面的基本视图结构(WXML是类似于HTML标签的语言和一系列基础组件),使用WXSS文件来控制页面的表现样式。

第二部分AppService应用逻辑层,是MINA框架的服务中心,通过微信客户端启动异步线程单独加载运行,页面渲染所需的数据、页面交互处理逻辑都在其中实现。MINA框架中的AppService使用JavaScript来编写交互逻辑、网络请求、数据处理,但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过AppService实现数据管理、网络通信、生命周期管理和页面路由。

MINA框架为页面组件提供了一系列事件监听相关的属性(比如bindtap、bindtouchstart等),来与AppService中的事件处理函数绑定在一起,来实现页面向AppService层同步用户交互数据。MINA框架同时提供了很多方法将AppService中的数据与页面进行单向绑定(注意数据的绑定方向是单向的),当AppService中的数据变更时,会主动触发对应页面组件的重新渲染。

框架的核心是一个响应式的数据绑定系统,它能让数据与视图很简单的保持同步。只需要在逻辑层修改数据,视图层就会做相应的更新。示例如下:

<!--页面视图层代码--> 
<view class="apptitle">
 <text class="app-avatar">欢迎使用{{appname}}</text>
 <button bindtap="changeAppname">更换名称 </button>
</view>
//AppService应用逻辑层代码
//初始数据
page({
 data:{
  appname:'易投票'
 },
 changeAppname:function(e){
  this.setData({
  appname:'我的小程序'
 })
 }
})

详解 微信小程序开发框架(MINA) 详解 微信小程序开发框架(MINA)

图1:初始名称

图2:点击按钮“更换名称”以后

示例中数据是如何更新的呢?首先,开发者通过框架将AppService应用逻辑层数据中的appname与页面视图层名为appname的变更进行了绑定,页面在刚打开的时候会显示“欢迎使用 易投票。然后,当点击按钮“更换名称”之后,视图层会发送changeAppname的tap事件给逻辑层,逻辑层找到事件函数changeAppname。最后,逻辑层changeAppname函数执行了setData操作,将对象appname的值改变为“我的小程序”,因为该对象已经在视图层绑定,所以视图层会显示为图2的名称了。

小程序的MINA框架有着接近原生App的运行速度,在框架层面做了大量的优化,在重功能上(page或tab切换、多媒体、网络连接等)上使用接近于native的组件继承,对安卓和ios端做出了高度一致的呈现,还有近乎完备的开发、调试工具。

目录结构

典型的小程序目录结构非常简洁,一般一个项目包含两个目录(pages和utils)三个文件(app.js、app.json、app.wxss)。pages目录下包括程序所需的各个页面,一个页面对应一个目录,包含2至4个文件(.js、.wxml、.json及.wxss)。utils目录则包含一些公共的js代码文件。当然,我们还可以添加其他的公共目录,如用来存放本地图片资源的images目录。

详解 微信小程序开发框架(MINA)

逻辑层

小程序的逻辑层就是所有.js脚本文件的集合。小程序在逻辑层处理数据并发送至视图层,同时接受视图层发回的事件请求。

MINA框架的逻辑层是由JavaScript编写,在此基础上,微信团队做出了一些优化,以便更高效的开发小程序,这些优化包括:

1、增加app方法用来注册程序,增加page方法用来注册页面;

2、提供丰富的API接口;

3、页面的作用域相对独立,并拥有了模块化的能力;

简单概括,逻辑层就是各个页面的.js脚本文件。

需要注意的是,小程序的逻辑层由js编写,但并不是在浏览器中运行的,所以JavaScript在Web中的一些能力都不能使用,比如 dom、window等,这也是我们开发过程中要克服的阻碍。

视图层

对于微信小程序而言,视图层就是所有的.wxml(WeiXin Markup language)文件与.wxss(WeiXin Style Sheet)文件的集合:.wxml用于描述页面结构而.wxss用于描述页面样式。

视图层以给定的样式来展现数据并反馈事件给逻辑层,而数据展现是以组件来进行的。组件(Component)是视图的基本组成单元。

数据层

数据层包括临时数据或缓存、文件存储、网络存储与调用。

1、页面临时数据或缓存

在页面page()中,我们要使用setData函数来将数据从逻辑层发送到视图层,同时改变对应的this.data的值。this在小程序中一般指调用页面,广泛情况下指的是包含它的函数作为方法被调用时所属的对象。直接修改this.data是无效的,无法改变页面的状态,还会造成数据的不一致。单次设置的数据有一个大小限制,不能超过1024KB,避免一次性设置过多的数据。

setData()函数的参数接受一个对象。以key,value的形式表示,将this.data中的key对应的值改变为value。key可以非常灵活,包括以数据路径的形式表示,如array[0].title,并且无需在this.data中预定义。

2、文件存储(本地存储)

使用微信提供的现成数据API接口,如:

wx.getStorage:获取本地数据缓存

wx.setStorage:设置本地数据缓存

wx.clearStorage:清理本地数据缓存

3、网络存储与调用

上传或下载文件的API接口,如:

wx.request:发起网络请求

wx.uploadFile:上传文件

wx.downloadFile:下载文件

调用URL的API接口如下:

wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。可返回原页面。

wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。不可返回原页面。

以上就是微信小程序框架的相关描述,微信团队一直在不断的优化框架能力,及时的关注官方提供的小程序开发者文档,了解小程序的最新能力及优化点。

总结

以上所述是小编给大家介绍的微信小程序开发框架(MINA),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

展开 +

收起 -

相关资源

微信小程序开发零基础入门
微信小程序开发零基础入门 影印完整版

★从易到难、由浅入深,更轻轻松松地把握小程序开发设计的各种各样专业知识。 ★普遍涉及到、重中之重凸出,更全方位系统化学习培训小程序定制开发的各种各样方式 。 ★基础理论相结

立即下载
从零开始学微信小程序开发
从零开始学微信小程序开发 高清版

《从零开始学微信小程序开发》 共分3篇12章,第1篇介绍微信小程序的基础知识,包括微信小程序开发工具、微信小程序架构分析;第2篇介绍微信小程序的常用模块,通过一些小案例详细介绍

立即下载
微信公众平台与小程序开发:从零搭建整套系统
微信公众平台与小程序开发:从零搭建整套系统 扫描版

本书从逻辑上可以分为三大部分. 第1部分为第1章至第5章,主要介绍微信公众平台开发相关的基础理论知识,包括开发环境和开发框架搭建,常用调试工具使用详解等。这几章可以帮助读者了解公众号开发的背景知识,为后续的章节阅读打下基础。

立即下载
微信小程序开发:入门与实践
微信小程序开发:入门与实践 高清扫描版

微信小程序开发:入门与实践 主要围绕Orange Can项目展开一系列编码工作,用几近真实的项目介绍小程序的各个API、组件用法,并附带一些小程序开发的经验、技巧以及常见的误区说明。整个

立即下载
微信小程序使用:vant Dialog组件的正确方式 影印版 立即下载
小程序 巧应用:微信小程序开发实战
小程序 巧应用:微信小程序开发实战 高清版

《小程序,巧应用:微信小程序开发实战》 系统全面地讲解微信小程序的开发技术。开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具、界

立即下载
21天精通微信小程序开发
21天精通微信小程序开发 高清版

这是一本帮助编程爱好者和从业人员从零开始学习微信小程序设计的书。 21天精通微信小程序开发 紧跟微信小程序的技术发展,是目前在该领域率先进行系统的技术探讨和培训的著作。本书站

立即下载
下载地址:百度网盘下载
读者心得
69小时43分钟前回答

详解使用uni-app开发微信小程序之登录模块

从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 button open-type="getUserInfo"/button 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对buttonopen-type="getUserInfo"/button的包裹+用户是否是第一次授权判断来显示该页面),代码如下: 1.页面结构 template view !-- #ifdef MP-WEIXIN -- view v-if="isCanUse" view view class='header' image src='../../static/img/wx_login.png'/image /view view class='cont……

109小时21分钟前回答

python获取微信小程序手机号并绑定遇到的坑

最近在做小程序开发,在其中也遇到了很多的坑,获取小程序的手机号并绑定就遇到了一个很傻的坑。 流程介绍 官方流程图 小程序使用方法 需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。 button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" /button 返回参数说明 参数 类型 说明 encryptedData String 包括敏感数据在内的完整用户信息的加密数据,详细见加密数据解密算法 iv String 加密算法的初始向量,详细见加密数据解密算法 接受到这些参数……

码小辫

屠秀英 提供上传

资源
15
粉丝
25
喜欢
76
评论
1

Copyright 2018-2021 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com