uni-app入门到精通
介绍
uni-app是一个使用Vue.js语法来开发所有前端应用的框架(也称之为全端开发框架)
已经掌握了vue和小程序开发的话,上手uniapp基本很快就能掌握
vue的指令语法 + 小程序的组件和Api
搭建环境
上官网安装一下开发工具
https://www.dcloud.io/hbuilderx.html
然后需要安装微信开发者工具 最好用最新的
如果直接写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 = storeconst 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的开发体验还行 但是需要自己去磨平部分一些跨端的差异
uni-app入门到精通相关推荐
- 《Axure RP8 网站和APP原型制作 从入门到精通》一2.7 交付
本节书摘来自异步社区<Axure RP8 网站和APP原型制作 从入门到精通>一书中的第2章,第2.7节,作者 金乌,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
- 《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一第2章 母版详解2.1 创建母版的两种方法...
本节书摘来自异步社区<Axure RP7网站和APP原型制作从入门到精通(60小时案例版)>一书中的第2章,第2.1节,作者 金乌,更多章节内容可以访问云栖社区"异步社区&quo ...
- 《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一1.3 部件概述...
本节书摘来自异步社区<Axure RP7网站和APP原型制作从入门到精通(60小时案例版)>一书中的第1章,第1.3节,作者 金乌,更多章节内容可以访问云栖社区"异步社区&quo ...
- 原型设计大师:Axure RP网站与APP设计从入门到精通(全彩) 中文pdf扫描版
原型设计大师:Axure RP网站与APP设计从入门到精通内容丰富且实用,由浅入深地传授了Axure 原型设计工具在网站和APP设计中的应用与技巧,并在文中贯穿了众多精彩实战案例.书中完整展现了多个鲜 ...
- 《iOS移动开发从入门到精通》图书连载一:如果你也想开发一款自己的APP,可以看一下这篇文
前言:互联网+时代给自己多一个选择的机会,尝试开发一款属于自己的APP,绝对是件激动人心的事情!<iOS移动开发从入门到精通>已经上市并和大家见面.从今天起,我会将把图书的部分内容以连载的 ...
- meteor从入门到精通_我已经大规模运行Meteor一年了。 这就是我所学到的。
meteor从入门到精通 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 我已经大规模运行Meteor一年了. 这就是我所学到的. (I've been runni ...
- Python 从入门到精通:一个月就够了?真的能行嘛?
毫无疑问,Python 是当下最火的编程语言之一.对于许多未曾涉足计算机编程的领域「小白」来说,深入地掌握 Python 看似是一件十分困难的事.其实,只要掌握了科学的学习方法并制定了合理的学习计划, ...
- 内存泄露从入门到精通三部曲之常见原因与用户实践
2019独角兽企业重金招聘Python工程师标准>>> 内存泄露从入门到精通三部曲之常见原因与用户实践 腾讯Bugly特约作者: 姚潮生 常见原因 1.集合类 集合类如果仅仅有添加元 ...
- 自学python需要的软件-学习Python,从入门到精通,其实只需要两个月就够了
毫无疑问,Python 是当下最火的编程语言之一.对于许多未曾涉足计算机编程的领域「小白」来说,深入地掌握 Python 看似是一件十分困难的事.其实,只要掌握了科学的学习方法并制定了合理的学习计划, ...
- python入门自学-Python自学规划:一个月从入门到精通,每天做什么?
毫无疑问,Python 是当下最火的编程语言之一.对于许多未曾涉足计算机编程的领域「小白」来说,深入地掌握 Python 看似是一件十分困难的事.其实,只要掌握了科学的学习方法并制定了合理的学习计划, ...
最新文章
- 假期三天,我肝了万字的Java垃圾回收,看完你还敢说不会?
- 零基础入门学习Python(1)
- MPEG-7 视觉描述符
- Leetcode 38.外观数列 (每日一题 20210702)
- 聊聊“数据安全与数据治理”那些事
- HTTP head 详解
- angularjs封装bootstrap官网的时间插件datetimepicker
- linux搭建未转变者服务器,未转变者怎么创建服务器_未转变者(Unturned)开服教程_快吧单机游戏...
- TANGENT_SPACE_ROTATION的解释
- 重回童年的经典系列 |《保卫萝卜》来了,你还记得它吗?复刻 源码+解析 @怀旧的你
- Ceres库运行,模板内报内存冲突问题。(已解决)
- 基于神经网络的颜色恒常性—Fully Convolutional Color Constancy with Confidence-weighted Pooling
- 语音(识别)处理教程
- 三星 盖世3 刷CM10.2 请插入sim卡
- lbe+android6.0+免root,LBE安全大师|lbe安全大师免root下载v6.1.2482 - 欧普软件下载
- django下载 中文名 文件
- 刀模图是什么意思_【问答】刀模、刀模图 用英语怎么说? - 邦阅网-外贸知识服务平台...
- revit二次开发-HelloWorld,入门
- Java项目:JSP民宿预订网站信息管理平台
- 微信小程序内拖动图片实现移动、放大、旋转
热门文章
- 四川省赛 SCU - 4438
- Python华氏温度与摄氏温度的转化
- 从eclipse中导入SSH项目并正确运行的完整步骤
- oct、dec、hex、boolalpha的作用
- v15.03 鸿蒙内核源码分析(内存映射) | 映射真是个好东西 | 百篇博客分析HarmonyOS源码
- 微信服务商电商收付通V3 支付唤起微信签名错误
- java山地车火山_JAVA发布新款山地车型SUOH【火山】
- TC297程序进busError时问题定位
- java 双斜杠变单斜杠_java 过滤文本特殊字符 以及单斜杠替换成双斜杠 | 学步园...
- 车身控制模块 ( BCM)全国产化电子元件推荐方案