uni-app实战直播app全栈开发

1 uni-app学习
1.1 什么是uni-app
uni-app是一个使用Vue.js语法来开发所有前端应用的框架(也称之为全端开发框架)
技术栈:JavaScript,vue, 微信小程序, uni-app

1.2 有哪些uni-app的作品
线上项目.png
1.3. uni-app的社区规模
社区规模.png
2 uni-app基础
2.1 如何创建项目
脚手架搭建项目
1.全局安装
npm install -g @vue/cli
2.创建项目
vue create -p dcloudio/uni-preset-vue my-project
3.启动项目(微信小程序)
npm run dev:mp-weixin
4.微信小程序开发者工具导入项目
(搭建过程中可能会遇到的问题)

脚手架搭建版本不一致.png
2.2 如何编写代码
2.3 uni-app初体验
初始界面.png
2.4 项目结构介绍
项目目录.png
2.5 样式和sass
支持小程序的rpx 和 h5的vw,vh。
rpx 小程序中的单位 750rpx = 屏幕宽度 vw h5单位 100vw = 屏幕的宽度, 100vh = 屏幕的高度
内置sass的配置, 只需要安装对应的依赖即可 npm install sass-loader node-sass
vue组件中,在style标签上加入属性

{ {dataObj.name}} { {dataObj.age}} { {dataObj.boolean}} { {item.text}} 基本语法显示.png 2.7 事件 添加点击事件,自定义参数和传参

查看打印出的结果:

点击事件.png
2.8 组件
1 组件的定义/引入/注册/使用
重点章节,组件化思想是前端必备思想之一,灵活的使用组件可以提高网页开发效率,提高代码复用率,降低块与块之间的耦合性。

1.1 组件的定义
在src目录下新建文件夹components用来存放组件
在components目录下直接新建vue文件
1.2 组件的引入
在页面中引入组件 “import 组件名 from ‘组件路径’”
1.3 组件的注册
在页面的实例中,新增属性 components
属性components是一个对象, 在里面添加要注册的组件
1.4 组件的使用
+在页面的template中添加组件标签 “<组件><组件/>”

1.5 全局数据传递
通过prototype在vue的原型上添加属性

猜你喜欢

转载自blog.csdn.net/weixin_52772147/article/details/112725556