1 uni-app学习
1.1 什么是uni-app
uni-app是一个使用Vue.js语法来开发所有前端应用的框架(也称之为全端开发框架)
技术栈:JavaScript,vue, 微信小程序, uni-app
1.2 有哪些uni-app的作品
1.3. uni-app的社区规模
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.微信小程序开发者工具导入项目
(搭建过程中可能会遇到的问题)
2.2 如何编写代码
2.3 uni-app初体验
2.4 项目结构介绍
2.5 样式和sass
- 支持小程序的rpx 和 h5的vw,vh。
rpx 小程序中的单位 750rpx = 屏幕宽度 vw h5单位 100vw = 屏幕的宽度, 100vh = 屏幕的高度
- 内置sass的配置, 只需要安装对应的依赖即可
npm install sass-loader node-sass
- vue组件中,在style标签上加入属性
即可
2.6 基本语法
学过vue的同学应该很容易上手,大胆去尝试吧
{{dataObj.name}}
{{dataObj.age}}
{{dataObj.boolean}}
{{item.text}}
2.7 事件
添加点击事件,自定义参数和传参
查看打印出的结果:
2.8 组件
1 组件的定义/引入/注册/使用
重点章节,组件化思想是前端必备思想之一,灵活的使用组件可以提高网页开发效率,提高代码复用率,降低块与块之间的耦合性。
1.1 组件的定义
- 在src目录下新建文件夹components用来存放组件
- 在components目录下直接新建vue文件
1.2 组件的引入
- 在页面中引入组件 "import 组件名 from '组件路径'"
1.3 组件的注册
- 在页面的实例中,新增属性 components
- 属性components是一个对象, 在里面添加要注册的组件
1.4 组件的使用
+在页面的template中添加组件标签 "<组件><组件/>"
1.5 全局数据传递
- 通过prototype在vue的原型上添加属性
-
在App.vue文件中向外暴露一个全局对象
以上两种方法的拿值
1.6 使用插槽实现动态更新组件
2.9 生命周期
1 介绍
- uni-app框架的生命周期结合了vue和微信小程序的生命周期
- 全局APP中使用 onLaunch 表示应用启动时
- 页面中使用 onLoad 或者 onShow 分别表示页面加载完成 和 页面显示时
- 组件中使用mounted 表示组件挂载完毕时
2 完整生命周期
- uni-app生命周期
- vue生命周期图示
- 微信小程序生命周期
uni-app项目
- 懂你找图
本文结合黑马程序员教学视频,部分截图来自原视频
黑马视频链接: https://www.bilibili.com/video/BV1Sc41187nZ?p=1
作者:VinSmokeW
链接:https://www.jianshu.com/p/3dec2cc2e30b
来源:
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。