Wepy-小程序踩坑记

tinna 发布于2019-08-22 15:34 / 2209人阅读

摘要：引言用过原生开发的小程序也知道除了其他功能性的内容并不多对于需要做大型项目来说是比较难入手的，因此朋友推荐的我就入坑鸟。。。开发还是和部分有出入，因此如下记录，入手的教程就不发了只发踩坑。

引言

用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的，因此朋友推荐的wepy我就入坑鸟。。。
这么一个跟vue的开发方式类似的框架，不过说起来跟vue类似，但是用起来还真不是那么简单。api开发还是和部分vue有出入，因此如下记录，入手的教程就不发了只发踩坑。

官方文档

小程序的官方文档
wepy官方文档

下面是已经踩过的坑

wepy 问题查找

https://github.com/Tencent/we...
比较建议在这里查找下遇到的问题之后在提问毕竟这里都是收集比较齐全

标签中的指令简写

跟Vue类似

对于动态赋值的属性可以使用 :attr="value" 的方式

对于绑定事件可以使用@click="fn"的方式

data使用注意点

对于视图中需要用到的数据，应该事先在data中定义一下，哪怕此时没有数据，也应该定义一个空值

WePY中的methods的使用

只能声明页面的bind、catch事件，不能声明自定义方法

自定义方法应该跟methods平级

this 运用

小程序里修改data 里面的属性或者赋值都需要利用this.setdata()而wepy 基本就是利用this.属性即可。如果是异步返回或者更新dom需要this.$apply()触发脏值检测

页面跳转

navigateTo() 和 redirectTo() 的差别。

navigateTo()保留当前页面，跳转到应用内的某个页面(即：显示顶部导航栏左上角返回按钮，可以有返回路径）
redirectTo()关闭当前页面，跳转到应用内的某个页面（即：不显示左上角返回按钮，如需要返回在页面内自己添加按钮写路径或者利用wx.navigateBack()和 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

简单来说如果你需要tabbar有返回就用navigateTo，不需要就用redirectTo

只能用 switchTab() 跳转到 tabbar 页面

文件上传

上传文件没有传统html中的文件域()，要想上传文件只能使用API： uploadFile()

更新DOM$apply

如果需要更新DOM，应该在随后调用组件实例的$apply方法，才能更新到页面中

this.name="abc";
this.$apply()

PS：对于性能要求较高的应用，不要频繁的调用$apply()更新DOM，可以根据实际情况更新父组件向子组件传递数据，通过props的方式传递

如果需要传递动态数据，加上.sync的修饰符就可以解决（:prop.snyc="item"）

如果需要子组件数据同步到父组件，需要在定义props的时候设置twoWay:true

(所有异步数据传递必须用$apply，同步的话才能使用.sync)

mixin

wepy的mixin，与vue中的mixin执行顺序相反

wepy中，会先执行组件自身的，再执行mixin中的

vue中对于钩子函数，会先执行mixin中的，再执行组件自身的；vue中methods如果和mixin同名，那么只会执行自身的方法

关于canvas和base64

小程序中可以进行canvas相关操作，但是跟纯html中的canvas有所不同（api差异），canvas的使用都应该参照：小程序中的canvas

arrayBuffer和base64互转

本段内容在文档中是搜索不到的，但是确实是支持的，使用如下2种方式：

wx.arrayBufferToBase64(arrayBuffer)
wx.base64ToArrayBuffer(base64)

命名规范

小程序内部定义的实例API都以$开头，所以我们在定义实例属性、方法的时候不能以$开头，以便区分

同名组件共享同一实例及数据

循环渲染组件时，容易出现组件数据相互污染。可以用最外层的组件监听事件冒泡以修改数据，同时触发事件的组件用setTimeout包裹，保证执行顺序。

循环渲染组件：

wepy的循环渲染组件，必须使用标签，或者微信官方的标签(这两个标签都是不会渲染到dom的）否则就不会渲染成功。

组件component 没有 onLoad 等页面事件

页面中设置好 this.$broadcast("someEvent", option);

组件监听事件则可以解决

page

页面类，继承自wepy.component，拥有页面所有的属性与方法。
全部属性继承自wepy.component。而wepy.component没有onLoad 等方法

未完待续-----------------

超融合服务器 idc机房托管踩坑记 wepy 小程序小程序小程序附近小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93546.html

小程序初踩坑

摘要：写在前面一直有在关注小程序，也做过一些，不过一直没上正式项目，刚好这次公司有小程序的项目就入坑了。是美团刚出的小程序框架，也很不错，可以直接用的写法去进行开发，学习成本较低，缺点是刚推出，虽然美团内部有在使用，不过社区还没起来。写在前面一直有在关注小程序，也做过一些demo，不过一直没上正式项目，刚好这次公司有小程序的项目就入坑了。项目开发完，记录一下遇到的一些坑吧。框架选用框...

RyanHoo 2019-08-26 11:53 评论0 收藏0
微信小程序海报生成踩坑记

摘要：最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。刚开始的思路是这样的：后台根据小程序传过来的参数获取对应的小程序码，然后与背景图合成之后将base64格式的图片传给小程...

lidashuang 2019-07-01 10:45 评论0 收藏0
关于Vue项目运跨平台问题—踩坑记_01

摘要：刚入职两周，老哥还专门写了一文档给我，感谢问题来了，从上面把项目上下来了，环境什么的都配置好了运行之后，提示错误，报错信息如下不是内部或外部命令，也不是可运行的程序或批处理文件。一开始以为是包的问题，安装的时候出现过包的错误和警告。 Vue项目跨平台运行前几天，从同事手上接手了一个Vue的项目。（Ps：刚入职两周，老哥还专门写了一文档给我，感谢）；问题来了，从gitLab上面把项目上...

MageekChiu 2019-08-06 11:04 评论0 收藏0
wepy框架开发小程序文档

摘要：目录项目构建文件使用优化之处组件通信的使用注意事项报错记录踩坑记录项目构建官方文档地址链接项目源码地址链接项目资料地址链接简单介绍是一个微信小程序框架，支持模块化开发，开发风格类似。使用的方式请求小程序原生都将化。目录 wepy项目构建 wepy文件使用 wepy优化之处 wepy组件通信 wepy的API使用 wepy注意事项 wepy报错记录 wepy踩坑记录 1. wep...

Luosunce 2019-08-23 12:27 评论0 收藏0
Notadd 2.0 全新 Node.js 版本～（开发中） [从 PHP 到 node 的踩坑记

摘要：有着最全的协议支持，同时有各种非阻塞拓展，可以说是最符合要求的，但是异步需要对做很大的改动。的计划将基于开发，同时也提供一些无法提供的功能和特性。一点小遗憾对于 Notadd 我们本来期望它实现更多... 尽管我们也尝试做了很多努力，但是由于 PHP 本身的局限，以及考虑到开发环境配置的复杂程度，最终使用了折中方案。接下来，我们谈谈整个技术选型历程，也供今后相关开发者做借鉴和参考：...

Tonny 2019-06-28 14:31 评论0 收藏0