0579-8699-3791

义乌网站建设 APP开发 要找 ➙ 专业的义乌网络公司

知识

新公司上手软件。30天,从入门到现在,还没放弃。。。虽然软件发布出来快一年了,爬坑的兄弟们大多把坑都踩平了。而我一直停留在“HelloWorld”的学习阶段。一来没项目,只有项目

您当前位置>主页 > 知识 > 软件开发 >

微信软件爬坑日记

发表时间:2020-08-18 21:29 文章来源:admin

  新公司上手软件。

  30天,从入门到现在,还没放弃。。。

  虽然软件发布出来快一年了,爬坑的兄弟们大多把坑都踩平了。而我一直停留在“Hello World”的学习阶段。

  一来没项目,只有项目才是实践学习的根本;

  二来刚出来,总是有很多坑。爬坑总是痛并快乐着。

  再多的借口,产品项目需求拍在桌前,都得缴械投降。

  不要怂撸起袖子,就是干。

  微信软件

 

 

  微信推出软件,想要实现即开即用,用完即走的用户体验。免去APP下载安装繁琐的流程。听起来像谷歌推出的PWA,不过PWA普及到国内还有段时间。而软件借助于微信的用户群体,植入成本低,容易被用户接受。

  软件的代码风格跟Vue其实挺像,对于习惯Vue开发模式的同学,上手并没有太大的问题。

  软件不支持前端主流框架,如Vue,Angular,React,jQuery等,而且软件有自己的一套视图容器(Dom)的写法,跟平常我们在web上写HTML不一样。不过CSS3那些变化不大。虽然文件名改成了(.wxss)

  本司项目,使用webpack做打包工具,将代码编译成符合软件的代码目录规范,采用wechat-mina-loader插件,实际开发起来跟在Vue下开发习惯一样。

  babel完成ES6转ES5,sass编译,压缩转化等工作都放到webpack中去做。

  软件脚本内不能使用window,document对象,所以无法操作dom。如果想操作节点,可用

  另外数据驱动的开发模式,跟Vue相同,只是写法换了(vue: v-if,软件: wx:if)

  rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素。

  设计师做设计图以iPhone6作为设计稿基准就可以,基本上可以用rpx替换px,不过在一些表单或者提示页面,使用设计稿上的rpx会让小屏幕手机看着尺寸略小,提示页面可参照weui用px来实现

  保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面

  关闭当前页面,跳转到应用内的某个页面

  跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

  关闭所有页面,打开到应用内的某个页面

  软件只能同时打开打开5个页面,当打开5个页面后,wx.navigateTo不能正常打开新页面,请避免多层级的交互方式,或者使用wx.redirctTo重定向

  tabBar是一个数组。配置最少2个,最多5个,tab数组按顺序排序

  基础库1.4.0支持

  CSS中无法使用本地资源(开发目录中)的图片作为background-image。可以使用网络图片资源,或base64,或者使用image标签。tabBar的icon资源可使用本地资源

  每个用户在每个软件里面都有唯一的openid,如果想在多个公众号,软件里面共享用户信息,统一识别该用户,则需要用到unionid。为了获取uniond则需要注册微信开放平台,将需要共享的软件,公众号进行绑定(不超过10个,超过10个还要申请认证称为第三发平台)。

  textarea,map等组件是由客户端创建的原生组件,它的层级是最高的。如果有遇到定位元素的话。永远在最上面,盖不住。

  请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件

  CSS动画对textarea无效

  项目场景:页面底部固定了一个按钮(position:fixed), 页面滚动时,textarea总是在按钮上面,点击按钮就点到了textarea

  app.js中配置

  navigationBarTextStyle 导航栏标题颜色仅支持black/white

  状态栏,导航条,标题,窗口背景色支持纯色,不支持渐变色

  url中添加参数,如, 可获取到

  扫描软件码进页面,如果想获取软件码url中所带的参数,可通过options.scene获取,不过需要对二维码中的scene值进行转换decodeURIComponent(options.scene), 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 urlencode (启动参数:scene=n%3D1001) 实际为scene=n=1001,参数n=1001

  image默认width: 300px, height: 225px, lazy-load懒加载只对page与scroll-view下的image有效

  mode缩放模式,mode="widthFix"比较常用(宽度不变,高度自动变化,保持原图宽高比不变)

  场景:想在软件退出时弹出个提示框,并阻止关闭(暂时无法实现)

  软件码(葵花码)有几种方式,只有发布过软件才可正常显示软件码

  第一次提交审核一般1天到2天。所以为了能准点上线,建议先上一次临时的版本(放一个提示页面都可以),过了第一次审核发布再说。日常提交审核,2-3小时就可以。

  频繁地setData操作,会出现卡顿,操作反馈延迟严重,甚至有可能闪退。

  场景:原计划用countUp做数字动画,原理就是频繁地改变数字值,setData操作,渲染到模版上。

  项目中用了webpack进行ES6转ES5,所以关闭了微信软件的ES6转ES5功能。这个坑就比较隐蔽了,测试的时候在5S真机上报js错误,发现有个js(使用了ES6,没有转ES5)文件没有使用,微信软件会去检测目录中的js文件,如果关闭了微信自带的ES6转ES5,检测到目录中js文件不兼容ES5,就报错。这个Bug只在5S真机里出现过,5C都正常。如果开启了微信开发工具中的ES6转ES5,则会自动帮你完成转化工作,不会出现类似问题。

  分享些软件开发比较常用的第三方库

上一篇:软件可视化图表开发 下一篇:没有了

相关案例查看更多