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>
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
