uni-app入门到实战 以项目为导向 掌握完整开发流程,uniapp项目

　　如何做一个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. 先基础，后项目

　　所需技术栈有

　　HtmlcssJavaScriptvue微信小程序uni-appuni-uiuni-apimoment.js手势包

4. 用脚手架搭建项目

　　 1、全球安装

　　Npinstall-g @ vue/cli2。创建项目

　　e创建-p dcloudio/uni-preset-vue my-project 3、启动项目(微信小程序)

　　Mrundev: MP-weixin4，微信小程序开发者工具导入项目

　　记得输入根目录。

　　4.1 项目目录

　　4.2 样式和sass

　　Sass配置内置在支持小程序的rpx和h5的vw和vh中，所以只需要安装相应的依赖项即可。在NPM安装Sass-Loader Node-Sass Vue组件，在样式标签上添加属性“style lang= scss ”:

5 .基本语法

　　 Vue基本语法。

　　例如v-bind、v-if、v-show、v-for等。

6. 事件的使用

　　伏开

7. 组件

　　组件的简单使用，组件传输，组件插槽7.1 组件的简单使用

　　组件的定义，组件的介绍，注册组件的使用

　　在src目录下创建一个新的文件夹components来存储组件。创建新组件*。组件目录中的vue7.11 组件的定义。

　　介绍组件“从‘组件路径’导入组件名称”

7.13 组件的注册

　　。在页面上的示例中，添加属性组件。属性组件是一个对象。将组件放入寄存器

7.14 组件的使用

　　。在页面的标签中，直接使用导入的组件“组件/部件”7.12 组件的引入。

　　通过7.2 组件传递参数将参数传递给父代和子代，通过属性将参数从子代传递给父代，使用全局数据在安装了触发事件的原型上通过vue传递参数，通过globalData传递参数

　　页面通过属性名7.21 父向子传递数据将数组数据传递给子组件ul-com，子组件通过listul-com接收数据：list=[1，2，3，4]

　　道具：{

　　列表：数组

　　},props

　　子组件通过7.22 子向父传递数据向父组件发送数据，父组件通过触发事件接收数据写入。

　　方法：{

　　handleclick(){

　　这个。$emit(textchange ，来自子组件的数据)；}

　　}ul-com :list=[1，2，3，4]

　　@textChange=handleTextchange 在子组件上设置click事件。

　　设置方法中传递的参数。

　　在亲子会上设置一个倾听事件。

　　接受父方法中的参数。

　　监听事件

　　通过Vue的原型共享数据(用这个获得)通过globalData共享数据(定义后用getapp获得)vuex在本地存储Vue . prototype . base URL= http://www . Baidu . com 7.3 全局共享数据。

　　其实标签也是一种数据。如果要动态地将标签转移到子组件，可以使用slot slot来实现占位符。简单地说，你把父页面的标签扔给子页面。

8. 生命周期

　　7.4 组件插槽

　　uni-app框架的生命周期结合了vue和微信小程序的生命周期。在全局app中，8.1 介绍表示应用程序启动时，加载页面时在页面中使用onLaunch或onLoad，显示页面时在组件中使用onShow。本文转载自：https://juejin.cn/post/6996561691639037983

　　有关编程的更多信息，请访问：编程入门！这就是uni-app项目的制作方法。讲解过程详情请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。