后台如何快速入手小程序
本文是记录常年开发pc系统的前端开发如何快速入门小程序,有哪些区别。希望能够帮助到想要快速入门到开发者们。
本文以uni-app
为例,适合有vue基础的开发者食用。
项目启动
首先找到一个项目模版,把基础项目运行起来。
推荐1:!官网cli
更推荐:uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目
直接集成了开发时使用的插件,和成熟的组件库,项目下载下来直接就可以开发。
组件库的选择
更推荐uview,官方自带的uni-ui
只能说对vue2还行,vue3兼容还是有问题。
rpx单位/px单位
不要一股脑直接使用rpx。
rpx是一个宽度单位,屏幕越宽,值越高。
如果你希望你的元素随着屏幕的变大而变大那么宽和高都可以用rpx
如果你希望屏幕变大,你能够展示更多的元素,那么就用px
。
也可以混用,宽度用rpx
,高度用px
,比如固定元素位置,吸顶元素,与胶囊对齐等。
如果自定义小程序头部导航栏或者自定义背景那么是建议直接使用px
,这样能够可控,不会变化。
rpx
是以750
为基础的,如果你的设计稿时375
,那么设计稿的100px
,你需要写成200rpx
uni-app 并不完全支持所有vue语法
详见官方:https://uniapp.dcloud.net.cn/tutorial/vue-basics.html
uni-app 在发布到H5时支持所有vue的语法;发布到App和小程序时,由于平台限制,无法实现全部vue语法,但 uni-app 仍是对vue语法支持度最高的跨端框架。
相比Web平台, Vue.js 在 uni-app 中使用差异主要集中在两个方面:
新增:uni-app 除了支持 Vue 实例的组件生命周期,还拥有应用生命周期及页面的生命周期。
受限:相比 Web 平台,在小程序和 App 端部分功能支持不完善,具体见兼容性列表。
注意:是页面和应用(App.vue)生命周期,组件是没有的
小程序组件和pc组件的区别
- 小程序的组件默认会多加一层,注意样式的修改。
配置可以改:virtualHost - 原生组件是不能被
ref
引用的
打包
- 图片总和不能超2m,最好上传oss
- 项目代码单包不能超2m(微信),超过需要分包
- 请求地址需要https,并且需要配置白名单。
待更新…
欢迎一起交流学习