1.uni-app初体验
1.1开发方式
1)使用DCloud公司提供的HBuilderX来快速开发
2)使用vue脚手架来快速搭建和开发
1.2脚手架搭建项目
1)全局安装
使用shift+鼠标右键,打开PowerShell,输入以下命令全局安装vue脚手架
npm install -g @vue/cli
2)创建项目
在合适的路径下,使用以下命令创建新项目
vue create -p dcloudio/uni-preset-vue my-project
选择uni-app模板中的默认模板即可
然后根据提示进入项目
但是不使用npm run serve启动项目 ,而是使用第三步的指令进行启动
3)启动项目(微信小程序)
npm run dev:mp-weixin
显示此提示,表视启动成功
4)微信小程序开发者工具导入项目
选择以下路径导入项目
进入项目看到以下页面即为成功启动项目
2.项目结构介绍
2.1项目目录
官方文档:uni-app官网
基本语vue项目相同,不多作介绍
uni-app的下的微信小程序新建页面与原生微信小程序相同,在创建页面后,都要在page.json中进行配置。
3.样式和sass
3.1样式和sass
1)支持微信小程序rpx和h5的vw,vh
2)内置有sass配置文件,只需要安装对应的依赖即可
npm install sass-loader node-sass
3)vue组件中,在style标签上加入属性即可
<style lang="scss">
4)
rpx是小程序中的单位,750prx等于屏幕宽度;
vw、vh是h5中的单位,100vw/vh等于屏幕宽度/高度