用 wepy 做完一个小程序,总结一下遇到的一些小程序和 wepy 的问题和解决

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用 wepy 做完一个小程序,总结一下遇到的一些小程序和 wepy 的问题和解决相关的知识,希望对你有一定的参考价值。

前言

距离开始写小程序已经过了一个半月了,项目也差不多写完了。当时选择的是 wepy 框架,我使用的wepy版本是 1.7.1,以下是我开发时遇到的一些问题。

background 图片不能用本地图片,可以把图片上传至CND,再使用,而且也有助于减少包体积。不过在开发者工具里是能用本地图片的~

wepy 使用 pug 做 html 预编译,在用 wx:if 做条件渲染时,不能使用 < 或 > 做判断,会解析错误。点击查看相关Issues

我有一次出现 wepy 编译完之后,一个组件每个属性开头都会少一个字母,导致无法给子组件传数据,如下

技术图片

解决办法:说出来你可能不信。把每一个的属性排列顺序调换一下就可以了。比如,原本我是这些写属性

wxc-card(
    title="{{ refundInfo.orderItem.item_name }}"
    desc="{{ refundInfo.orderItem.sku_props_str }}"
    num="{{ refundInfo.orderItem.quantity }}"
    price="{{ filter.yuan(refundInfo.orderItem.price, ‘‘) }}"
    thumb="{{ refundInfo.orderItem.pic_url }}"
)

只要我把所有属性的顺序都打乱一次,重新排列。就编译成功了。至于为什么,我也不知道~

wxc-card(
    num="{{ refundInfo.orderItem.quantity }}"
    thumb="{{ refundInfo.orderItem.pic_url }}"
    price="{{ filter.yuan(refundInfo.orderItem.price, ‘‘) }}"
    desc="{{ refundInfo.orderItem.sku_props_str }}"
    title="{{ refundInfo.orderItem.item_name }}"
)

用 wepy 编译组件的 .sync 同步传值时,不能用对象,如下

component( :title.sync="obj.title" )

解决办法:
就是用 computed 定义一个变量,return obj.title, 或者直接在data下定义一个变量,这样也只要传一层,反正就是不能用 . 操作符。例如

component( :title.sync="title" )

<script>
...略

computed = {
    title() {
        return obj.title
    }
}
</script>

点击查看相关 Issues

相关报错截图与代码
技术图片
技术图片

我最后解决的代码

技术图片

还有一次也是这个报错但是还有一种解决方法,就是直接修改你要修改的对象,而不是一个属性一个属性的去修改。比如

// 本来是一个个修改的, 这种情况下也出现了上述报错
this.obj.title = "xxx"
this.obj.obj= {}
this.obj.array = []
this.$apply()
// 最后直接修改 obj,也是不报错了
this.obj = { 
    title: ‘xxx‘,
    obj: {},
    array: []
}
this.$apply()

由于不是很了解 wepy 的源码和小程序的报错原因,所以具体原因不是很清楚。

查看小程序社区报错有关的讨论:Expect END descriptor with depth 0Expect FLOW_CREATE_NODE

wepy 执行 npm run build js未压缩,提示 [WARNING] 找不到插件:wepy-plugin-uglifyjs。,然后会自动下载插件,再 build。结果还是未压缩。

解决方法:手动下载 npm i wepy-plugin-uglifyjs wepy-plugin-imagemin -D即可。

因为 wepy.config.js 里配置了压缩,但是模板内的 package.json 没有这两个插件的配置项。不过 imagemin 的配置可以删除,因为你最好把图片都放到线上了,所以应该用不上图片压缩,wepy-plugin-imagemin 也可以不用装。但是不删除的话,还是要装 wepy-plugin-imagemin 插件才行。

相关ISSUS

如果你决定使用 pug 来做 html 的预编译的话,要记住,如果出现语法错误的情况下,会导致启动的服务崩溃,需要重新启动 npm run dev。如果出现页面不更新的情况,就马上去看命令行的报错信息吧~

在一个 display:flex 的元素内,子元素设置绝对定位。 在开发者工具里,子元素会受 align-items 等影响定位,安卓手机也是。但是在 Iphone 里绝对定位子元素不受影响,所以最好设置 top 值和 left 值。

使用 wepy 编译组件时,不要在 repeat 循环的组件里写 computedwatch,会导致列表所有需要的计算数据,只使用第一个的计算属性里的数据。

scroll-view 如果要横向滚动的话,除了要设置 scroll-x 属性,还要设置 white-space: nowrap; 的样式,子元素设置 display: inline-block

十一

如果你用了一个定时器,在退出页面的时候要记得清除,不然这个定时器还会一直执行。

十二

一切的结果以真机为准,开发者工具不一定能完美模拟真机,有时候还是会出现布局的问题。




以上是关于用 wepy 做完一个小程序,总结一下遇到的一些小程序和 wepy 的问题和解决的主要内容,如果未能解决你的问题,请参考以下文章

小程序开发技术总结(wepy)

小程序wepy.js框架总结

微信小程序开发——进阶篇

使用wepy开发微信小程序的底部导航

wepy安装后提示Cannot read property 'addDeps'

wepy框架开发小程序遇到的node-sass问题解决方案