微信小程序是17年出来的,现在也越来越多的创业型公司选择了做一套微信小程序。微信小程序开发简单,而且用户使用小程序也不需要再去下载一个app(用官方的解释就是:用完即走)。京东,美团,滴滴等很多大公司也有了相应的小程序。
一、 如何接触到微信小程序
公司给了一套之前包给外包公司做的一套小程序,流程走不通,逻辑错误,于是开始了小程序之路。。。不过这段时间相对也确实挺累,除了前端方面的功能编写外,也在检查后端同事的代码。除了小程序还有公众号模版消息开发的研究。
二、 小程序学习文档
新手如何去开发一套微信小程序呢,我走过很多坑,下面是2个开发微信小程序学习的地方,建议先把小程序官方文档过一遍,有问题去小程序社区提问。
三、 简单说一下常见的坑
1. 关于微信小程序tabbar:
像下发这种tabbar在微信小程序的app.json里的tabbar的属性是无法完成的,那我们怎么做呢我们可以封装一个组件,在页面里面调用就可以了。当然不仅仅是tabbar,小程序的头部导航栏也如果需要更改其他样式,也是需要重新封装一次。
2. 关于小程序的scroll-view:
说实话这个组件刚刚使用的时候确实感觉很不错,我使用它进行了列表页面的滑动编辑和删除,不过当我在线下的时候,发现安卓手机可以使用下面的代码,发现安卓手机可以隐藏横向滚动条,但是在ios上就会出现丑陋的滚动条。于是又通过bindtouchstart,bindtouchmove与bindtouchend封装了一次关于列表滚动的组件。
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
3. 关于onShow生命周期:
在2个页面共用相同数据,在b页面操作了以后,返回a页面,官方推荐的做法是将需要更新的数据放在onShow里面,但是个人觉得这样操作是没有必要的,并且也加大了服务器的压力,个人觉得在b页面操作了数据以后,服务器是已经接收到了这个操作了,没有必要在a页面在告诉服务器一次,我们只需要改变视图层的数据就可以了,我的做法是在b页面内将数据保存在storage内,这样b操作了以后,我们在onShow里面更新storage里面的数据就可以了。
4. 关于js操作style属性的问题:
说实话,这个是真的坑,在以往js操作css的时候我们直接通过获取元素style进行设置就可以了,而小程序不是这样,小程序不能操作元素的style,于是想到一个解决办法是通过动态绑定的形式绑定元素style,然后在js内更改data内相应数据以此改变元素的style。这个是真的很不爽,如果修改得东西过多是真的让代码变得很难看。
5. 关于开发者工具——增强编译:
在5.8日没有增强编译之前小程序工具是不支持增强编译的,当然也没有对async和await的解析,这样在我写回调的时候也很痛苦,也是自己封装了一个组件,不过这个增强编译当然也是非常想要的,不过更新之后小程序工具出现了很多问题,当然我当时也是其中一个,比如下面的链接。
6. 关于小程序的页面跳转:
需要区分跳转至pages页面,还是tabbar页面,还有就是跳转以后是否支持返回。
7. 关于使用git多人协作时:
当使用版本管理工具时,需要把这个project.config.json文件给忽略掉,否则拉下来的代码无法在小程序模拟器显示。
8. 关于转发功能:
小程序转发的接口有以下几种:
根据业务的需要选择上面的api就好了,当然我们做的是一个转发后数据部分数据隐藏的功能,我选择的是onShareAppMessage()
这个函数,下面是简单说明:
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
return {
title: this.data.user,
path: `pages/bank/user?uid=${this.data.uid},${this.data.id},${this.data.name},${this.data.bank}`,
success: (res) => {
console.log('success', res)
},
fail: (res) => {
console.log('fail', res)
// 转发失败
}
}
},
9. 关于虚拟账号拨号功能:
虚拟账号这个功能我是第一次接触,刚开始查看接口返回值不太稳定,有时候能返回虚拟电话号码,有的时候不返回电话号码,于是和老板说是虚拟接口不稳定的原因导致的,但是老板说这虚拟号码是在阿里买的,这就尴尬了,心想阿里的也不一定是最好的吧。但是还是检查了一遍后台同事的代码,发现逻辑和调用上面都没有问题,于是。。。咨询了阿里的客服,发了工单,最后不是接口不稳定的原因,也不是后台代码的原因,而是虚拟电话号码不足需要再多买一点。。。
10. 关于http和https:
微信小程序的接口官方有说明是需要使用https的,不然调用出现错误,当然本地没事
11. 关于微信小程序启动页面:
微信小程序默认启动页面是app.json中设置第一个的页面。
12. 微信小程序不支持分享到朋友圈:
维信小程序暂时不支持将小程序分享到朋友圈,可以通过调用微信服务器将小程序生成二维码,将二维码推广至朋友圈。
四、关于taro
最近正在选择一款框架进行项目的重构,正好老板也需要一套代码多端运行即有微信小程序又有一个app,在美团的mpvue、滴滴卡密龙、和京东的taro之间,当然也看过flutter,在框架方面我选择了taro,因为他是一个类react的风格。在app方面我选择了H5,为什么选择了H5而不是React Native做app,因为reactnative不是很友好不是工作需要千万别碰~~