pc如何快速入手小程序-uni-app

后台如何快速入手小程序

本文是记录常年开发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组件的区别

1. 小程序的组件默认会多加一层,注意样式的修改。
   配置可以改：virtualHost
2. 原生组件是不能被ref引用的

打包

1. 图片总和不能超2m，最好上传oss
2. 项目代码单包不能超2m（微信），超过需要分包
3. 请求地址需要https，并且需要配置白名单。

待更新…

欢迎一起交流学习