• 技术文章 >web前端 >uni-app

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

    青灯夜游青灯夜游2021-09-09 18:58:53转载116
    如何做一个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 基础知识

    3. 先基础,后项目

    需要的技术栈有

    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

    5 .基本语法

    Vue的基础语法

    如 v-bind,v-if,v-show,v-for之类的

    6. 事件的使用

    v-on

    7. 组件

    7.1 组件的简单使用

    7.11 组件的定义

    7.12 组件的引入

    7.13 组件的注册

    7.14 组件的使用

    7.2 组件传递参数

    7.21 父向子传递数据

    <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">

    7.3 全局共享数据

    Vue.prototype.baseURL="http: //www.baidu.com"

    7.4 组件插槽

    简单来说就是把父页面的标签丢到子页面去

    8. 生命周期

    8.1 介绍

    本文转载自:https://juejin.cn/post/6996561691639037983

    更多编程相关知识,请访问:编程入门!!

    以上就是如何做一个uni-app项目?流程讲解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:uni-app
    上一篇:详细了解uniapp和小程序中的分包步骤 下一篇:浅谈Uniapp中怎么开发安卓原生插件
    线上培训班

    相关文章推荐

    • 介绍uni-app之字体库、自定义组件、打包和新闻实战• 介绍uni-app实战的社区交友:项目和环境搭建• uni-app介绍全局样式引入和底部导航栏开发• 2021年最新uni-app视频教程推荐(从入门到精通)• uni-app开发H5端和原生H5开发怎么选择

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网