Flutter开发App的未来及其在各行业的应用潜力分析
852
2022-12-31
本文目录一览:
最近做项目的时候,需要做一个截图功能。用了一个别人写的截图工具,发现截出的 图质量下降了 ,但是我们图片要用来做识别, 需要保证截出的图质量不下降。而且也不支持通过拖动来调整截图框的大小。所以这个截图工具无法满足需求。因为所以,就自己动手写了一个截图组件。
下面介绍一下实现原理和使用方法。
组件 wxml 的层次结构图如下:
最后截图,通过四个点的位置计算出截图框的位置,然后放大对应原图大小的位置,得到在原图中的 (x, y, width, height) ,最后通过官方提供的 canvas 接口截图。
假设我们的应用文件结构如下:
调用组件时,需要传入 cropperData 、 cropperMovableItems 、 cropperChangableData ,因为数据和事件都是绑定在 Page 上的,所以要避免使用组件里面已经被占用的命名。
/pages/index/index.wxml
/pages/index/index.js
最后引入组件的样式
/pages/index/index.wxss
如图所示是接下来需要完成的效果:
页面结构:2个, index (首页)以及 details (详情页),首页是产品列表,点击产品后进入对应的详情页。
首页的wxml结构:
首页的js数据:
对于详情页请求数据,核心在于点击对应产品然后请求对应的产品数据,因此这里的 navigator 组件跳转的url至关重要,这里的 /pages/details/details?goodsId={{index} 是模拟了后台提供的数据接口,后面的 goodsId 作为产品的辨识符,当点击之后可以获取到当前点击的是哪个产品,以供详情页进行请求数据。
详情页wxml结构:
详情页js数据:
详情页请求数据的重点在于生命周期函数, onLoad 函数,它可以在页面加载的时候进行触发,并可以通过参数获取到跳转链接上面的辨识符,也就是通过 onLoad 函数中的 options ,获取到了刚才在 index.wxml 页面url中的辨识符: goodId ;
通过它可以获取到对应的产品数据,再将数据进行修改更新到详情页结构 details.wxml 即可。
本案例中跨页面传递数据主要是利用了URL传值,在另外一个页面中接收,并将数据渲染到页面中,这个过程就需要用到生命周期函数:onLoad函数。
微信小程序的组件和Vue的组件非常相似。
在微信小程序中有很多内置组件,比如button view input image等,有时候我们要自定义组件。和Vue的组件似的。
如何创建自定义组件:
新建一个components目录,在里边创建自定义组件
组件的组成:
使用组件:
一个简单的示例:
创建comp,代表页面;创建components/xxxx,代表组件。
创建组件:
使用组件:
注意:json文件中不能写注释啥的。这里的注释是为了解释清楚,在开发中不能写注释。
组件的注意事项:
组件的样式细节:
如何控制页面和组件的样式相互影响:
组件和页面相互通信
this.triggerEvent(事件名,参数对象,{}),最后是options,额外的一些选项
预留一个设备,以有利于对以后进行扩展。
好处:
例子:
在移动端,导航栏,nav-bar,分为左中右三部分。不把这三部分的内容写死。就用插槽,为了封装性更好。
单个插槽的使用很简单:
多个插槽的使用稍微复杂,要设置几个东西:
component构造器中可以写哪些东西,如下
一、微信小程序的wxml
具有基本的编程经验的工程师,只有与wxml接触后,您才会发现该语言的编程概念类似于html网页的编程技术。经过一番研究和开发,您会知道微信小程序的要求技术含量不高,只是更换了一些标签,例如
已替换为等待状态。即使您不太擅长前端,转用微信小程序的发展也将是一个很好的方向。
二、微信小程序的wxss
wxss是微信的CSS。微信用自己的开发语言wxss代替了Web编程中使用的css;实际上,主要的实现思想与Web开发技术基本相同,并且它只是对某些标签的简单替换,其中大部分是原始的CSS,基本上是正确的。它们都是通过调用同一页面来实现的,但是可以说,微信小程序比Web开发更简单,更方便。例如,只要写入index.wxml和index.wxss,它就位于两个文件中。这两个文件同时位于同一目录中,就像直接在网页上写CSS一样,这既简单又快速。
三、微信小程序的js
如果要开发微信小程序,您必须精通微信小程序的js。只要您具有html+css+js的良好基础,就可以全力学习微信小程序js,然后在前端进行开发。上面没有问题,但是微信js需要努力学习。您可以购买参考书或了解微信小程序的API,它们可以快速帮助您参与开发队列。
四、微信小程序的json
掌握了以上几点之后,您需要掌握json。简而言之,json是微信小程序的主要和次要接口。工程师可以通过json控制上下菜单栏,主要和辅助页面的显示顺序。但是,使用频率不高。它仅适用于基本小程序的框架,但这也需要学习,因为除显示类型外,每个前端操作都需要与后端匹配,因为如果要使其放大,则必须之所以简化,是因为修改代码后,在迷你程序中搜索到的版本就是启动后的版本,即我们提交微信评论后显示的版本。修改源代码后,需要将其提交给微信公众进行审核。平台小程序管理平台,用户只能在审核通过后才能看到您的修改,因此,为避免这种麻烦,您必须了解后端技术开发并与前端链接以与您进行交流。
实际上,小程序类似于H5表面,并提供了视图层描述语言。您需要掌握WXML和WXSS以及基于JavaScript的逻辑层框架。这里的wxml等同于html,而wxss等同于CSS。
关于微信小程序组件原理和微信小程序的组件的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 微信小程序组件原理的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于微信小程序的组件、微信小程序组件原理的信息别忘了在本站进行查找喔。版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~