广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
如何做一个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. 先基础，后项目需要的技术栈有
htmlcssJavaScriptvue微信小程序uni-appuni-uiuni-apimoment.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标签上加入属性“<style lang= 'scss’ 即可5 .基本语法Vue的基础语法
如 v-bind，v-if，v-show，v-for之类的
6. 事件的使用v-on
7. 组件组件的简单使用组件传参组件插槽7.1 组件的简单使用
组件的定义组件的引入组件的注册组件的使用7.11 组件的定义
在src目录下新建文件夹components用来存放组件在components目录下直接新建组件*.vue7.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项目？流程讲解的详细内容，更多请关注9543建站博客其它相关文章！
发表评论