uni-app入门到精通

·  阅读 393

介绍

uni-app是一个使用Vue.js语法来开发所有前端应用的框架(也称之为全端开发框架) 已经掌握了vue和小程序开发的话,上手uniapp基本很快就能掌握 vue的指令语法 + 小程序的组件和Api

搭建环境

上官网安装一下开发工具

www.dcloud.io/hbuilderx.h…

然后需要安装微信开发者工具 最好用最新的

如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了 然后用开发工具 创建一个模板

目录结构说明

components:uni-app可复用组件目录 pages:页面目录,里面每一个文件夹就是一个页面 static:静态文件的目录,如:图片、字体 App.vue:配置APP全局样式以及监听 main.js:vue初始化的入口 pages.json:页面配置文件 manifest.json:项目配置文件(应用名称、appid、logo、版本等打包信息) uni.css:内置的常用样式变量,可以直接使用

应用的生命周期(写在App.vue)

onLaunch:初始化完成时触发一次,全局触发一次 onShow:APP启动或从后台进入前台显示 onHide:APP从前台进入后台 onUniNViewMessage:对nvue页面发送的数据进行监听

页面生命周期(写在页面的script里)

onLode:监听页面加载,其参数为上个页面传递的数据 onShow:监听页面显示 onReady:监听页面初次渲染完成 onHide:监听页面隐藏 onUnload:监听页面卸载 onPullDownRefresh:监听用户下拉动作 onReachBottom:页面上拉触底事件的处理函数 onShareAppMessage:用户点击右上角分享(微信小程序) onPageScroll:监听页面滚动,参数为Object onNavigtionBarButtonTap:监听原生标签栏按钮点击事件(5+app) onBackPress:监听页面返回,详细说明及使用(5+app)

使用vuex

uni-app已经内置vuex 不需要再安装了 在根目录下新建store文件 在其目录创建index.js

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
	state: {
		text: 'demo'
	},
	mutations: {
		SetText(state, v) {
      state.text = v
    }
	},
	actions: {
		setText: function({commit}, v) {
      commit('SetText', v)
    }
	}
})
 
export default store
复制代码

然后在main.js入口文件

import Vue from 'vue'
import App from './App'
 
// 这里引入store
import store from './store'
 
// 这里是重要的一步 这里不写 app会找不到store
Vue.prototype.$store = store
 
const app = new Vue({
	store,
	...App
})
app.$mount()
复制代码

配置

打开manifest.json 这里是可视化的

mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置

如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了

获取节点

支持微信小程序 H5 APP 其他没有测试

uni.createSelectorQuery()
// 官方说自定义组件模式 要这样写
uni.createSelectorQuery().in(this)
复制代码

swiper的高度问题

大家如果写过微信小程序的话都知道swiper是要写一个高度的,而uni-app等于也是一个加强版的小程序,swiper也要写高度,但我们都不太能确定高度,只能用一些办法来确定它的高度

第一种办法就是已知item的高度,在获取数据后,用item的高度*item的数量获得高度

第二种就是用节点获取高度,我自己就用这个办法,亲测app跟微信小程序都ok

 <!-- 先在swiper组件写上动态style来获得高度 -->
<swiper :style="{height: `${swiperHeight}px`}">
    <swiper-item v-for="(item,index) in tabList" :key="index">
        <div :class="columnList[index]"></div>
    </swiper-item>
</swiper>
复制代码
// 这里的class 我一开始是用字符串模板来实现`columnList${index}`
// 跑是能跑起来 但是会报错 忍不住自己就不用字符串了
// 接着使用fun的办法 但是uni-app不支持这种写法
// 后面想着用tabList的长度来初始化一个columnList (这个办法有点笨,如果有人有更好的办法,请告诉我这个菜鸡)

// 书写一个获取节点的方法
get_wxml(className, callback) {
   uni.createSelectorQuery().select(className).boundingClientRect(callback).exec()
}
// 在onReady生命周期里面获取高度
onReady() {
   this.get_wxml(这里写你要获取的节点,我这里是我定义的columnList[index], (rects) => {
   this.swiperHeight = rects.height
   })
}
复制代码

条件编译

多端开发肯定避免不了存在跨端的差异性,uni-app也提供了条件编译功能

#ifdef:if defined 仅在某平台存在 #ifndef:if not defined 除了某平台均存在

写法如下

#ifdef APP-PLUS 需条件编译的代码 #endif

开发体验

uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改