使用uniapp开发跨端小程序

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力。

uniapp官网地址

uniapp的优势

开发者/案例数量更多
平台能力不受限支持原生代码混写和原生sdk集成
性能体验优秀体验更好的Hybrid框架，加载新页面速度更快
周边生态丰富支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件
学习成本低采用vue语法+微信小程序api
开发成本低开发成本，招聘、管理、测试各方面成本都大幅下降

uinapp特色

条件编译

#ifdef APP-PLUS
需要条件编译的代码            仅出现在App平台下的代码
#endif

#ifndef H5
需要条件编译的代码            除了H5平台,其他平台均存在的代码
#endif

#ifdef H5 || MP-WEIXIN
需要条件编译的代码            在H5平台或微信小程序平台存在的代码
#endif

条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // #ifdef、css 使用 /* #ifdef */、vue/nvue 模板里使用 

App端的Nvue开发
HTML5+

uniapp开发环境搭建

通过 HBuilderX 可视化界面快速上手

运行uni-app 第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径

在微信开发者工具打开时,需要先在微信开发者工具中开启服务端口设置 -> 安全 -> 开启服务端口

通过vue-cli命令行

全局安装vue-cli  npm install -g @vue/cli
创建uni-app  vue create -p dcloudio/uni-preset-vue my-project
运行、发布uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 取值 app-plus(app平台)、h5、mp-alipay(支付宝)、mp-baidu(百度)、mp-weixin(微信)、mp-toutiao(头条)、
mp-qq(qq)、mp-360(360)、quickapp-webview(快应用通用)、quickapp-webview-huawei(快应用华为)、quickapp-webview-union(快应用联盟)

uniapp生命周期

生命周期

应用生命周期 只能在App.vue中使用

1
2
3

// onLaunch  应用初始化完成 全局只触发一次
// onShow  应用启动的时候 或者从后台进入前台会触发
// onHide  应用从前台进入后台

页面生命周期

// onload 监听页面加载 可以获取页面传参
// onReady 监听页面的初次渲染完成
// onShow 监听页面显示 包括从下级页面点返回露出当前页面
// onHide 监听页面隐藏
// onUnload 监听页面卸载
// onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
// onReachBottom 页面滚动到底部的事件 一般用于上拉加载
// onTabItemTap 点击 tabbar 触发
// onShareAppMessage 用户点击右上角分享

组件生命周期(即vue的生命周期)uni-app 组件支持的生命周期，与vue标准组件的生命周期相同
常用生命周期执行顺序

// App Launch
// APP Show
// Page Onload
// Page onShow
// component beforeCreate
// component created
// component beforeMounted
// component Mounted
// Page onReady
// component beforeDestroy
// component destroyed
// Page onUnload

uniap默认模板目录

components 自定义组件的目录
pages 页面存放目录
static 静态文件资源目录
unpackage 编译后的文件存放目录
app.vue 全局公用的状态数据等
main.js 应用入口
manifest.json 项目基础配置
pages.json 页面相关配置注册页面设置页面名称等
uni.scss 公用的scss变量无需import这个文件

uniapp配置启动模式 condition

uniapp使用中其他问题

屏蔽自定义导航栏 仅支持 default/custom。custom即取消默认的原生导航栏 注意事项
1
2
3
"globalStyle": {
"navigationStyle": "custom"
}

自动导入自定义组件无需import

// components/navbar/navbar.vue
// index.vue 中 直接使用 <navbar />  等同于以下
// import navbar from '../components/navbar/navbar.vue'
// components: {
//   navbar
// }

在非H5 app mp-alipay中胶囊的位置

// 获取胶囊位置
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo)
// wx {width: 87, height: 32, left: 278, right: 365, top: 26, bottom: 58}