前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >创业选择之微信小程序开发

创业选择之微信小程序开发

作者头像
_kyle
发布2020-08-24 12:38:01
7600
发布2020-08-24 12:38:01
举报
文章被收录于专栏:kyle的专栏kyle的专栏

微信小程序是17年出来的,现在也越来越多的创业型公司选择了做一套微信小程序。微信小程序开发简单,而且用户使用小程序也不需要再去下载一个app(用官方的解释就是:用完即走)。京东,美团,滴滴等很多大公司也有了相应的小程序。

一、 如何接触到微信小程序

公司给了一套之前包给外包公司做的一套小程序,流程走不通,逻辑错误,于是开始了小程序之路。。。不过这段时间相对也确实挺累,除了前端方面的功能编写外,也在检查后端同事的代码。除了小程序还有公众号模版消息开发的研究。

二、 小程序学习文档

新手如何去开发一套微信小程序呢,我走过很多坑,下面是2个开发微信小程序学习的地方,建议先把小程序官方文档过一遍,有问题去小程序社区提问。

小程序官方文档 小程序社区

三、 简单说一下常见的坑

1. 关于微信小程序tabbar:

像下发这种tabbar在微信小程序的app.json里的tabbar的属性是无法完成的,那我们怎么做呢我们可以封装一个组件,在页面里面调用就可以了。当然不仅仅是tabbar,小程序的头部导航栏也如果需要更改其他样式,也是需要重新封装一次。

tabbar

2. 关于小程序的scroll-view:

说实话这个组件刚刚使用的时候确实感觉很不错,我使用它进行了列表页面的滑动编辑和删除,不过当我在线下的时候,发现安卓手机可以使用下面的代码,发现安卓手机可以隐藏横向滚动条,但是在ios上就会出现丑陋的滚动条。于是又通过bindtouchstart,bindtouchmove与bindtouchend封装了一次关于列表滚动的组件。

::-webkit-scrollbar {
    width: 0; 
    height: 0;
    color: transparent;
}

list

编辑与删除

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不是很友好不是工作需要千万别碰~~

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、 如何接触到微信小程序
  • 二、 小程序学习文档
  • 三、 简单说一下常见的坑
  • 四、关于taro
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档