uni-app 开发 一套代码实现公众号和小程序总结


   最近刚结束一个项目,接到需求的的时候要求写一个小程序和公众号,当时感觉没啥问题,但是后面告诉我一个个很坑的要求 客户周期只有一个月!!! 小程序没问题,再加个公众号就有点心慌了,然后只能去找解决方案了 ,查找之后找到两个框架 tarouni,但是很明显啊 两个都没用过 花了两个小时看了两个文档 然后问了另一个前端 发现选taro时间上可能来不及(虽然我老想尝试taro了) 因为taro是react的写法 另一个同事没接触过啊 如果选了taro 碰到坑 我还得解决 然后还要带着熟悉react 没办法 只能uni了(当然本人没有嫌弃的意思,纯粹是想玩taro)。

   吐槽结束,那么总结开始:

  1. 因为我们开发项目的时候 基本上都是使用微信开发者工具查看效果,那么问题就来了:为啥开发者工具上看着样式是好的,但是在手机上,公众号项目会出现x轴出现滚动条。这个问题很简单啊,宽度超了呗。但是我疑惑啊,为啥小程序行,这里就不行,没道理啊。然后看是审查元素,发现出问题的地方 不是画了border 就是来了margin,然后调试一下 确实是他们引起的,那就改吧 给父容器来个box-sizing: border-box; ,好了解决。可能你会发现项目跑在浏览器上木问题 公众号不也是H5吗?很明显啊 公众号是运行在微信上,浏览器内核是人家自己的啊

2.关于授权、支付、分享,这些东西,很明显公众号和小程序是不一样的啊,那么简单啊 各自对应的方法包起来呗 打包不同的应用的时候 启用不同的配置呗。uni上,暂时就只能想到这些,因为没找到能配置我想要的东西的地方

3.关于分享图片 这个可以说是开发中耗时最长的,因为刚开始我以为uni对这些都处理好了,不用我来担心, 然后根据文档屁颠屁颠的用canvas画好了分享图(canvas用的实在是少,只能看文档)。最后发现一切都是我想多了,可能是我太年轻了。

       1.如果是线上图片,那么图片的域名一定要是在downloadFile下配置的,包括头像

       2.你的二维码是base64或者ArrayBuffer的 那么使用getFileSystemManager写个本地地址吧,因为微信上的canvas不画base64啊

       3.你画图的canvas,小程序和公众号不一样啊 ,上面的事小程序可能碰到的 那么下面就是公众号的了

       4.小程序上我们可能会算比例 来保证分享图的宽高,那么公众号就先别想了,写死吧(可能是我没找到,惭愧啊)

       5.至于图片吗,呵呵哒。跨域啊,能处理好跨域最好,处理不了那就麻烦后台来个图片转base64的接口吧(我就是这样的),公众号下你放心,他能画base64,

       6.然后就是你可能会碰到ctx.draw为啥不进里面的回调函数呢?来个简单的吧,给它外层来个setTimeout(我就给了200ms),当然能直接执行的可以忽略

4.这里就是公众号自身的分享了,在数据渲染完成之后,直接开始配置config,和制作分享信息吧,你就别想着等我点击分享那按钮之后再配置了,还有就是别忘了wx = require('jweixin-module');

   好了,可能是写的项目不是很大 ,可能一些东西并没有踩到,希望当再次遇到之后,能有个看的地方,不要重来一遍。然后就是uni的好处了,有很好的ui组件库,特别是有个很全面的 uView,当然如果不想使用的话,那么把vant的一套小程序的ui(他们可以说是很像)下载下来,自己整合成一个vue文件就搞定了(我很多就是这样干的...),快速开发下也就只能这样了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM