宠汪汪多端(H5和小程序)项目实践

胡哥有话说

发布于 2019-12-06 12:18:17

1.7K0

发布于 2019-12-06 12:18:17

技术选型

业务需求需要我们同时在 H5 和小程序开发一套，既保证 App 端入口的功能，也要保证小程序端的功能，还要保证 App 端分享的小程序卡片引导用户进行社交分享，增加游戏体验、和用户参与度。为解决多端开发的问题，市面上有很多类似的开发框架，Vue.js 规范的 uni-app、mpvue、WePY，React.js 规范的 Taro 等等。

我们现有的来客有礼小程序，是用原生小程序开发的，目前有80万左右的 UV，如果把整个小程序用 Taro 重构或者转换成本过大。

其实宠汪汪项目相当于在来客有礼中开发一个新的页面，起初我们打算写两套，原生小程序一套，H5 开发一套。但是这样子开发周期过长，无法保证我们在双十一之前上线，而且维护成本也很高。

最后我们选择了 Taro 来解决这个问题，它可以一套代码，编译成两端运行,并且编译后的小程序代码可以很好的与原生小程序项目融合在一起。

Taro 本地 H5 开发

首先按照官方文档

npm install -g @tarojs/cli

然后创建项目

taro init jd_dog_web

在 app.jsx 中添加 pages 对应的开发的页面。

pages: [
    'pages/jdDog/jdDog',
    'pages/petRace/petRace',
    'pages/exchange/exchange',
    'pages/exchange/exchangeRecord',
    'pages/followShop/followShop'
],

我们项目开发的目录如下：

pages：业务页面
components：模块组件
common：公共方法
assets：图片等静态资源

通过 npm run dev:h5 进行本地重构开发，第一步已经成功，下面就是兼容原生小程序。

Taro与原生小程序融合

因为我们之前是使用原生小程序开发的项目，项目里面有很多公共的方法和模块，所以如何使得我们新开发的页面能够调用并且正常运行原小程序项目的代码成为关键。

其实并没有想象那么复杂。process.env.TARO_ENV === 'h5'是关键，其实我们在编译时候会选择是编译到 H5 还是 weapp，所以 Taro 做了编译场景判断，如果是 H5 的话，不会包含特殊的小程序代码。

比如，宠汪汪的项目需要登录，在 App 中登录，在小程序中也需要联合登录，联合登录使用的是小程序登录插件。当我们 npm run build:weapp 后，将代码复制到原小程序项目中 requirePlugin('loginPlugin') 可以直接获取到，并且正常调用小程序的联合登录插件。在场景值判断是在小程序中，正常引用原生小程序的一些公共方法是 OK 的。只不过调试部分稍微麻烦点，需要编译后小程序代码复制到小程序项目中，才能正常运行。

loginJd(cb,isLoginOut){
    //判断是h5 环境还是 小程序环境
    if(process.env.TARO_ENV === 'h5'){
        if(isLoginOut){
            //直接强制登录
            ...
            return;
        }
        //判断是h5否已经登录京东账号
        let url = ``
        Taro.request({
            url:url,
            data:{},
            jsonp:true
        }).then((res)=>{
            if(res.data && res.data.islogin =='1'){
                console.log('已登录');
                this.prepareH5()
                cb && cb(1);
            }else{
                console.log('未登录');
                cb && cb(0);
            }
        })
        
    }else{
        let plugin = requirePlugin('loginPlugin');
        let ptKey = plugin.getStorageSync('jdlogin_pt_key');
        if(isLoginOut){
            if(ptKey){
                plugin.logout({
                    callback: ()=> {}
                    });
            }
            cb && cb('');
            return;
        }
        cb && cb(ptKey);  
    }
},

说一说如何能把编译后的代码融合到原生小程序中，第一步就是在原生小程序项目中，添加对应的页面，因为不是首页，所以我们直接把页面放到分包中。注册页面后，我们还需把对应的编译完的页面放入到项目的 pages 中。

"subPackages": [
    {
      "root": "pages/followShop/",
      "pages": [
        "followShop"
      ]
    },
    {
      "root": "pages/jdDog/",
      "name": "jdDog",
      "pages": [
        "jdDog"
      ]
    },
    {
      "root": "pages/exchange/",
      "pages": [
        "exchange",
        "exchangeRecord"
      ]
    },
    {
      "root": "pages/petRace/",
      "name": "petRace",
      "pages": [
        "petRace"
      ]
    },
]

我们把如下图的编译后的代码直接 pages 文件移动到原生小程序的 pages 内，components 内的移动到原生小程序的 components 内。其他的一些依赖的 common 等文件直接移动到原生项目的一级目录。

这样子，在小程序内就可以跑起来了。

动画方案

对应一个游戏类的项目，怎么能少了动画呢，对于动画部分，作为前端来说可谓是一大障碍，无论是用 CSS 还是 JS 来实现动画，并不能很好的还原设计师的原稿，当然简单的一些动画效果可以利用 CSS3 实现。但是一些复杂的联动的效果是很难的。

动效系数是决定页面动画效果是否自然的关键，所以还是将这部分交还给动效设计师吧。此次项目有动效设计师把持，给予了 APNG 的 PNG 动画图。比如吃饭、升级、倒狗粮、赛跑等难度大的动效果都由 APNG 图完成。很幸运的是APNG在移动端支持还是不错的。

并且 APNG 对比 GIF 有很多方面的优势

GIF：最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感不支持 Alpha 透明通道，边缘有杂边
APNG：支持 24 位真彩色图片支持 8 位 Alpha 透明通道向下兼容 PNG

选择APNG动画开发动效大大减少了的前端工作量。

项目总结

在 11 月 1 日当天 10点项目正式上线，截止 11 月 11 日宠汪汪项目 PV 已经达到 350 万，UV 达到 28 万，并且每天都在持续的增长。利用 Taro 解决了多端场景的痛点，当然项目中有些场景还是需要单独写 H5 和小程序的代码，以满足业务需求比如长图保存，打字动效果等等。整体来说，的确提高了开发效率，减少研发周期。同时也感谢 Taro 的技术团队的支持～。