1：uni-app介绍官网网页：

https://uniapp.dcloud.net.cn/

介绍：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

2：利用hbuilderx初始化项目：

hbuilderx的官网：

HBuilderX-高效极客技巧

1.点击hbuilderx菜单栏文件》项目》创建》

选择uni-app，填写项目名称，项目创建的目录：

2.1项目的目录和文件的引用：

2.2uni-app和小程序的关联：

2.3小程序的配置：

2.4小程序的基础配置：

2.5：小程序的运行以及运行到小程序：

3.button按钮组件的用法：

组件的属性：

1.button组件默认独占一行，设置size为mini时可以在一行显示多个。

 <picker :value="time" v-model="time" @change="time=$event.detail.value"   mode="time" start="08:12" end="21:00"><view class="title">事件绑定</view><button v-on:click="num++" size="mini" type="primary">{{num}}事件绑定</button><button @click="num++" size="mini" type="warn">{{num}}事件绑定-简写</button><button @click="say" size="mini" type="primary">响应函数</button><button @click="say('你好，小木')" size="mini" type="warn">响应函数-传参</button><button type="primary" @click="doit" :data-title="title">事件对象</button>

2.uni的生命周期：

1。vue的生命周期：

1.创建：beforeCreate

2.创建之后：created：的作用

1.可以使用this.没有dom

2.：可以初始化，注册监听事件

3.开启定时器

4.ajax请求

2.挂载：

1.beforeMount

2.mounted：

作用：1.可以操作dom节点

2.操作dom，ajax请求

3.更新:

1.beforeUpdate

2.updated

4.卸载：

1.beforeDestroy

作用:1.移出事件监听，2.移出停止定时器

2.destroyed

小程序的生命周期：

1函数.名说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发小程序

1.onload：加载

1.能够获取页面的参数

2.开启ajax，定时器，事件监听

3.像vue的created

2.show：显示：播放媒体

3：onReady：准备

1.获取节点信息

2.像vue的mounted

4.onHide：后台运行：

1.停止播放媒体：

5：onUnload：卸载：

1.停止事件监听与定时器

小程序的生命周期：

小程序的·全局方法：

onPullDownRefresh：

onReachBottom 触底刷新：

onPageSccroll

路由组件：

1.navigator导航跳转：

2.open-type：打开的类型：

2.路由的传参：

2.接收：

路由的配置：

获取当前页面getApp：

01 在App.vue 定义globalData:{num:100}；

02：要是用的页面获取app var app = getApp（）

03：

 获取globalData的值，onShow(){this.num = app.globalData.num},

04：

 更新 globalData的值   addNum(){app.globalData.num++;this.num=app.globalData.num;}

获取页面栈 getCurrentPages:

uni.navgateBack({delta:page.length})

page[page.length-1]获取当权页面的信息(不要去修改)

uni-app中使用vuex：

1,。在项目中新建文件夹store,在main.js中导入：

1.1在根目录下新建文件夹store，在此目录下新建index,js文件

2.在index,js中导入：

//导入vuex
import Vuex from "vuex";//导入vue
import Vue from "vue";
//使用vuex
Vue.use(Vuex);
//导出Vuex
export default new Vuex.Store({//状态state: {gTitle: {//文本text: "你好vuex",//颜色color: "#000",//字体fontSize: "25px",//背景颜色background: "#00ff00"},joks:[],},//修改数据得唯一方式mutations: {//更新笑话数据setJoks(stats,data){stats.joks = data;},setSize(state,data){state.gTitle.fontSize=data+"px"},//修改背景颜色setBackgroundColor(state,data){state.gTitle.background=data;}},//异步操作actions: {//和后端交互，异步操作都会放在actions中getJok(context,data){uni.request({url:"http://520mg.com/mi/list.php",method:"get",data:data,//axios get请求传参用的params post用data//uni.request post与get传参也是用data//更加content-type如果是application/jsonsuccess:res=>{console.log(res,"getJok");//actions去调用mutationscontext.commit("setJoks",res.data.result);}})}},//内部计算getters: {//计算所有笑话字数之和"totalLen":function(state){//reduce累计var count = 0;for(var i=0;i<state.joks.length;i++){count+=state.joks[i].summary.length;}return count;}},//模块modules: {},
})

2.在main,js中导入挂载vuex

import App from './App'// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif
import uView from '@/uni_modules/uview-ui'Vue.use(uView)//导入vuex
import store from "./store/index.js"
//导入定义全局$store
Vue.prototype.$store=store;

三：使用：

1.mapState，mapGetters, mapActions. mapMutations

<template><view><view class="title">vuex数据</view><!-- 使用vuex的数据 更新样式与文本 --><view :style="gTitle">{{$store.state.gTitle.text}}</view><navigator url="./fontSize">修改文本大小</navigator><navigator url="./backgroundColor">修改背景颜色</navigator><view>总共有{{$store.state.joks.length}}条笑话</view><view>{{totalLen}}个字</view><view class="item" v-for="item in $store.state.joks">{{item.summary}}</view></view>
</template><script>import {mapState ,mapActions,mapGetters} from "vuex";export default {computed:{...mapState(["gTitle"])   ,...mapGetters(['totalLen']),},onLoad() {//调用getJok方法并传入参数this.$store.dispatch("getJok",{page:1})this.getJok()},data() {return {}},methods: {...mapActions(["getJok"]),}}
</script><style>.item{padding:  20px 20px;border-bottom: 1px solid #ccc;}
</style>

五：uniapp实现自定义组件

1.创建一个与pages平级的components页面：

第二部：找到uni-app官网找到组件

第三部：点击搜索组件并下载：

第四部：把插件导入到components里面：

第五步：然后就可以使用了

第三方插件，UviewUI

uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

1.支持直接导入，或者下载压缩包

2.找到官网，组件，安装，配置看完档

3.啥也不多了，直接按步骤一步步来就行了

1.在main.js中导入

import uView from '@/uni_modules/uview-ui'Vue.use(uView)

2.修改uView内置配置方案

import App from './App'// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif
import uView from '@/uni_modules/uview-ui'Vue.use(uView)//导入vuex
import store from "./store/index.js"
//导入定义全局$store
Vue.prototype.$store=store;

3.在components中导入countdown插件

<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>

uni-app总结以及插件的使用相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
UC浏览器APP如何卸载插件
现在很多用户在使用浏览器的时候都会安装一些插件辅助使用,方便用户享受更多便捷的功能,很多用户都会安装相关的插件服务,方便用户更好的使用,那么在用户不需要这些插件的时候要如何删除呢?今天小编就会与大家一 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

uni-app总结以及插件的使用

1：uni-app介绍官网网页：

介绍：

2：利用hbuilderx初始化项目：

hbuilderx的官网：

2.1项目的目录和文件的引用：

2.2uni-app和小程序的关联：

2.3小程序的配置：

2.4小程序的基础配置：

2.5：小程序的运行以及运行到小程序：

3.button按钮组件的用法：

小程序的生命周期：

1函数.名说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发小程序

小程序的生命周期：

小程序的·全局方法：

路由组件：

2.路由的传参：

路由的配置：

获取当前页面getApp：

获取页面栈 getCurrentPages:

uni-app中使用vuex：

三：使用：

五：uniapp实现自定义组件

第三方插件，UviewUI

uni-app总结以及插件的使用相关推荐

最新文章

热门文章

uni-app总结以及插件的使用

1：uni-app介绍官网网页：

介绍：

2：利用hbuilderx初始化项目：

hbuilderx的官网：

2.1项目的目录和文件的引用：

2.2uni-app和小程序的关联：

2.3小程序的配置：

2.4小程序的基础配置：

2.5：小程序的运行以及运行到小程序：

3.button按钮组件的用法：

小程序的生命周期：

1函数.名 说明 onLaunch 当uni-app 初始化完成时触发（全局只触发一次） onShow 当 uni-app 启动，或从后台进入前台显示 onHide 当 uni-app 从前台进入后台 onError 当 uni-app 报错时触发小程序

小程序的生命周期：

小程序的·全局方法：

路由组件：

2.路由的传参：

路由的配置：

获取当前页面getApp：

获取页面栈 getCurrentPages:

uni-app中使用vuex：

三：使用：

五：uniapp实现自定义组件

第三方插件，UviewUI

uni-app总结以及插件的使用相关推荐

最新文章

热门文章

1函数.名说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发小程序