首页 >web前端 >uni-app > 正文

如何做一个uni-app项目?流程讲解

转载2021-09-09 18:58:530731
如何做一个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 项目目录

image

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目录下直接新建组件*.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中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:uni-app
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • 你的第一行 UNI-APP 代码你的第一行 UNI-APP 代码
  • Uniapp简爱读书项目开发--第一季Uniapp简爱读书项目开发--第一季
  • Uni-App从入门到实战Uni-App从入门到实战
  • 公益直播:Uniapp微信小程序1:1仿饿了么首页公益直播:Uniapp微信小程序1:1仿饿了么首页
  • 视频教程分类