如何做一个uni-app项目?流程讲解
如何做一个uni-app项目?本篇文章就来给大家系统的讲解一下做一个uni-app的流程,希望对大家有所帮助!
做一个uni-app的流程:
包含大量目前前端必备的技能,如vue,微信小程序,组件封装,移动端手势封装,数据分页,axios,moment,flex布局,sass,视频播放,视频下载等等功能。【相关推荐:《uniapp教程》】
1. uni-app介绍
1.1 什么是uni-app
uni-app 是一个使用vue.js语法开发所有前端应用的框架
可以开发各种东西
也叫全端开发框架
2. uni-app 基础
2.1 基础知识
- uni-app初体验
- 项目结构介绍
- 样式和sass
- 基本语法
- 事件
- 组件
- 生命周期
3. 先基础,后项目
需要的技术栈有
- html
- css
- JavaScript
- vue
- 微信小程序
- uni-app
- uni-ui
- uni-api
- moment.js
- 手势封装
4. 用脚手架搭建项目
1、全局安装
npm install -g @vue/cli
2、创建项目
vue create -p dcloudio/uni-preset-vue my-project
3、启动项目(微信小程序)
npm run dev:mp-weixin
4、微信小程序开发者工具导入项目
记住要进入到根目录里
4.1 项目目录
4.2 样式和sass
- 支持小程序的rpx和h5的vw、vh
- 内置有sass的配置了,只需要安装对应的依赖即可“npm install sass-loader node-sass "
- vue组件中,在 style标签上加入属性“
5 .基本语法
Vue的基础语法
如 v-bind,v-if,v-show,v-for之类的
6. 事件的使用
v-on
7. 组件
- 组件的简单使用
- 组件传参
- 组件插槽
7.1 组件的简单使用
- 组件的定义
- 组件的引入
- 组件的注册
- 组件的使用
7.11 组件的定义
- 在src目录下新建文件夹components用来存放组件
- 在components目录下直接新建组件*.vue
7.12 组件的引入
- 在页面中引入组件“import 组件名from‘组件路径’“
7.13 组件的注册
- 在页面中的实例中,新增属性components
- 属性components是一个对象,把组件放进去注册
7.14 组件的使用
- 在页面的标签中,直接使用引入的组件“<组件>组件>”
7.2 组件传递参数
- 父向子传递参数通过属性的方式
- 子向父传递参数通过触发事件的方式
- 使用全局数据传递参数
- 通过挂载 vue 的原型上
- 通过 globalData 的方式
7.21 父向子传递数据
- 父页面向子组件 ul-com 通过属性名list传递了一个数组数据
- 子组件通过props进行接收数据
<ul-com : list="[1,2,3,4]"> props: { list: Array },
7.22 子向父传递数据
- 子组件通过触发事件的方式向父组件传递数据
- 父组件通过监听事件的方式来接收数据
写法
methods: { handleclick(){ this.$emit("textchange",'来自子组件的数据');} }
<ul-com :list="[1,2,3,4]" @textChange="handleTextchange">
在子组件上设置 点击事件
在 methods 设置传递的参数
在父子见设置一个监听事件
在父的methods中接受一个参数
7.3 全局共享数据
- 通过Vue的原型共享数据 (用this获取)
- 通过globalData共享数据 (定义后用getapp获取)
- vuex
- 本地存储
Vue.prototype.baseURL="http: //www.baidu.com"
7.4 组件插槽
- 标签其实也是数据中的一种,想实现动态的给子组件传递标签,就可以使用插槽slot
- 通过slot来实现占位符
简单来说就是把父页面的标签丢到子页面去
8. 生命周期
8.1 介绍
- uni-app框架的生命周期结合了vue和微信小程序的生命周期
- 全局的APP中使用onLaunch表示应用启动时
- 页面中使用 onLoad 或者 onShow 分别表示页面加载完毕时和页面显示时
- 组件中使用mounted组件挂载完毕时
本文转载自:https://juejin.cn/post/6996561691639037983
更多编程相关知识,请访问:编程入门!!
以上是如何做一个uni-app项目?流程讲解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

怎么利用uniapp开发一个简单的地图导航?本篇文章就来为大家提供一个制作简单地图的思路,希望对大家有所帮助!

如何利用uniapp开发一个贪吃蛇小游戏?下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏,希望对大家有所帮助!

uni-app接口,全局方法封装1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

本篇文章手把手带大家开发一个uni-app日历插件,介绍下一款日历插件是如何从开发到发布的,希望对大家有所帮助!

本篇文章给大家带来了关于uniapp的相关知识,其中主要整理了实现多选框的全选功能的相关问题,无法实现全选的原因是动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件,下面一起来看一下,希望对大家有帮助。

uniapp怎么实现scroll-view下拉加载?下面本篇文章聊聊uniapp微信小程序scroll-view的下拉加载,希望对大家有所帮助!

本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。
