Taro小程序开发实战总结

作者: 张阳君 分类: 前端技术

一起接单小程序元旦前就已经上线,但是一直没有推广。如果大家感兴趣,可以到我的产品页面扫码体验,地址:https://www.zhangyangjun.com/page/products。之前写过一篇使用Taro开发小程序(入门篇),只是简单总结了一些Taro小程序入门经验。实际开发中还有很多经验值得分享,我提炼了几个比较重要的点,采用自问自答的形式解决大家的疑惑。

Taro能否跨平台开发

现在很多框架都号称可以跨平台开发,一套代码多端通用,Taro也是其中之一。那Taro真的可以跨平台开发吗?我开发了Taro后,个人体会是,如果你开发的是纯粹的展示型小程序,那么确实可以多端通用一套代码。但如果小程序包含登录之类的业务逻辑,所谓的跨平台是伪跨平台,你的代码需要需要通过诸如if...else...的方式去做一些平台api的辨别。

举个例子来说,微信小程序的授权登录逻辑是无法复用到百度小程序的,虽然都是基于OAuth2.0协议,但参数和返回值都不同,更别提参数背后的企业生态逻辑了。现在所有的小程序通用开发框架都只能通用皮肤,从这个角度来看,Taro跨平台实战意义不大。就算不用Taro,我开发了一套微信小程序的皮肤,通过百度小程序的转换功能一样可以代码复用。

Taro做的事情主要是抹平了不同平台的通用api差异代码生成流程差异。至于企业生态逻辑的差异,他是无法抹平的。所以大家不要迷信所谓的跨平台开发,该hack的地方还是要hack的!

Taro中是否要封装ajax

Taro.requestTaro.uploadFile虽然抹平了不同平台的ajax差异,但在使用过程中,我们仍然需要基于Taro.requestTaro.uploadFile再封装一层函数。这样做的好处是可以统一进行错误处理,精简页面代码

请注意:不只是小程序,任何端开发都需要封装ajax。

Taro中如何缓存组件

Taro用的是jsx语法,组件的切换一般使用三元表达式。使用三元表达式切换的组件不会被缓存,也就是说每次切换显示后,组件的代码逻辑都会执行一次。有时候我们希望组件能缓存下来,怎么做呢?可以修改组件的style,设置display属性为none进行切换。

小程序中如何优化上传图片

现在的手机拍照功能强大,一张照片动辄3、4M,小程序选择图片上传一般都会设置sizeTypecompressed。尽管小程序帮你压缩了图片,但是实际上传的图片尺寸依然很大。那么我们该如何优化上传的图片呢?

我们可以在页面中加一个隐藏的Canvas组件,把图片拷贝到画布上,通过缩放操作,压缩图片。如此一来,服务端的压力就减轻了。放上相关代码:

        // 对图片进行压缩
        Taro.getImageInfo({
            src: e.tempFilePaths[0]
        }).then(res => {
          const ctx = Taro.createCanvasContext("image-compression");
          let ratio = 2;
          let canvasWidth = res.width;
          let canvasHeight = res.height;
          // 保证宽高均在200以内
          while (canvasWidth > 300 || canvasHeight > 300) 
          {
            //比例取整
            canvasWidth = Math.trunc(res.width / ratio);
            canvasHeight = Math.trunc(res.height / ratio);
            ratio++;
          }
          setTimeout(() => {
            ctx.drawImage(e.tempFilePaths[0], 0, 0, canvasWidth, canvasHeight);
            ctx.draw(false, () => {
              wx.canvasToTempFilePath({
                canvasId: "image-compression",
                destWidth: canvasWidth,
                destHeight: canvasHeight,
                success: res2 => {
                  // 上传压缩后的图片 res2.tempFilePath
                }
              });
            });
          }, 0);
        });

小程序内页分享后,如何返回上级页面

普通的h5应用,返回上页直接跳转一下url就行,但是在小程序里面,路由控制相对复杂一点。Taro.navigateBack可以直接让我们在内页中返回上一页,但如果这个内页是在分享链接里进来的,这个返回功能就失效了,因为此时的内页就是第一个页面。

解决方法是判断Taro.getCurrentPages().length,如果长度大于1则表明是从其他页面进来的,直接调用Taro.navigateBack即可,否则我们就用Taro.reLaunch重启上一层页面。代码如下:

 goBack() {
    if (Taro.getCurrentPages().length > 1) {
      Taro.navigateBack({
        delta: 1
      });
    } else {
      Taro.reLaunch({
        url: "上一层页面的路由"
      })
    }
  }

小程序中如何长按识别二维码

小程序中只能长按识别小程序二维码,跳转小程序,而且这个还需要在后台进行配置。其他的二维码暂时是不支持的,所以不要再执念这个功能了,佛系等待小程序更新即可。

如何在数据库存储emoji表情

由于很多人的微信昵称都会带emoji文字,所以存储emoji成了数据库必须的功能。把数据库设置成utf8mb4就能存储了,但是请注意,后台连接数据库的配置也需要改成utf8mb4,否则抓瞎!

小结

以上是我个人的小小经验,期待Taro能够越做越好。如果你有关于Taro开发的其他疑问,可以在下方留言区和我交流!

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!