模拟器字体和真实机器字体大小不一致

导致原因是所有字体单位使用的是rpx,小程序框架提供了rpx(responsive pixel),可以根据屏幕宽度进行自适应。

在移动端日常开发,多使用rem单位,因为它能够很好的解决屏幕适应问题。

微信开发者工具如何字体居中 微信开发工具字体大小_微信开发者工具如何字体居中

注意:不是所有单位都适合rpx,有一些比如字体标题不需要自调整就不实用rpx。(写成px是多大就是多大,rpx的话会根据屏幕大小进行换算)

编辑器不好用

官网提供的开发工具;咋眼一看感觉还蛮不错的 一使用才发现真的是让人崩溃,快捷键不够丰富就连基本的快捷键都没有满足,可视性就别说了,智能提示也是 都是一团麻;

官网开发工具的一些优缺点

优点
  • 编译、 调试
  • 预览、手机预览、真机调试
  • 代码基础编辑
  • 项目管理
  • 上传提交上传
  • 官方的
缺点
  • 编辑器可视性太差
  • 基本快捷键不全
  • 跨文件提示太弱
  • API提示不全

然后想找一个第三方的工具来代替,目前来看第三方工具都不满足,真机预览 、调试及有好的模拟器预览

找到了一个叫 Egret Wing 类似vscode,但是我还是使用的vscode作为编辑器

使用vscode开发的话推荐几个插件:

1.vscode weapp api

微信开发者工具如何字体居中 微信开发工具字体大小_小程序_02

2.vscode wxml

微信开发者工具如何字体居中 微信开发工具字体大小_官网_03

3. vscode-wechat

微信开发者工具如何字体居中 微信开发工具字体大小_开发工具_04


按下Ctr + F8预览

微信开发者工具如何字体居中 微信开发工具字体大小_小程序_05


可以实施预览但是适配机型不如官网丰富,样式有一点点偏差(我是使用的小程序开发工具自带的预览)

4. Easy WXLESS

微信开发者工具如何字体居中 微信开发工具字体大小_小程序_06

对于习惯了sass、less的人来说使用css感觉一下回到了解放前,Easy WXLESS可以帮我们快速的将less编译为css

微信开发者工具如何字体居中 微信开发工具字体大小_小程序_07

目前我是使用vscode + 小程序开发工具 暂时没有找到更好的

代码大小限制

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 8M
  • 单个分包/主包大小不能超过 2M

由于也是刚开始接触小程序不久,一次预览发现小程序有代码大小限制 2M 分包 8M (分包优化可以参考官网)
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

1.最后不要引用本地图片,将图片放于服务器;有的图片一张就有几兆,图标的话建议使用矢量图 阿里巴巴的就很好

2.减少代码的逻辑,尽量去除重复的代码 能使用一个view达到的效果就不要使用两个减少嵌套

3.尽量的复用代码,能少些一个页面就少些一个

4.使用压缩工具对代码进行打包压缩(这个在优化vue代码的时候感触很深 最后能减小20%-40%)