uni-app总结以及插件的使用
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为u
1:uni-app介绍官网网页:
介绍:
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的官网:
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:
1.
2.
uni.navgateBack({delta:page.length})
3.
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/json
success:res=>{
console.log(res,"getJok");
//actions去调用mutations
context.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>
更多推荐
所有评论(0)