uniapp 入门指南
uniapp 初体验
1、前言
移动端跨平台层出不穷，提高了效率，但性能一直是个诟病，回顾历史加载前端界面白屏体验差（尽管优化成h5资源压缩打包进apk本地加载，网络请求通过端上转发，再有5G的加持，性能勉强够打），为了追求更好的性能和快速开发，后来推出了Weex，React Native ,Flutter，uniapp。其中Flutter性能最佳，不过需要熟悉Dart语法，增加了学习成本，目前uniapp热度较高，今天着重介绍下uniapp.
2、uniapp 介绍
uniapp 是目前热度比较高的一款跨平台工具，引用一句官方的话讲， 开发一次，多端覆盖，也就是说采用uniapp方式开发功能，可以一次打出android，ios,web前段和多家小程序，这得益于uniapp底层会自动转换成各平台的代码。
3、开干准备
- 由于uniapp 采用vue开发，首先要求你有相应的vue基础
- 准备好官方开发工具HBuilderX
没错，就这2样你就能开发了，这里不需要你对webpack 理解多深，也不需要安装npm，得益于编辑器帮我们做了这些工作。下面对主要知识点简单介绍，有个印象。
3.1、flex布局属性介绍
| 属性 | 描述 | 常用参数 |
|---|---|---|
| flex-direction | 容器元素排列方向 | row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上） |
| flex-wrap | 控制容器内的元素换行 | nowrap（不换行）；wrap（换行 ）；wrap-reverse（反向换行） |
| justify-content | 主轴对齐方式 | flex-start(左对齐); flex-end(右对齐); center(居中);space-between (分居两端，中间空白）; space-around (等距对齐） |
| align-items | 纵轴对齐方式 | stretch（如果容器内元素未设置高度，则默认元素高度为容器高度）； flex-start（上对齐）； flex-end （ 下对齐）； center（居中）； baseline （如果容器中的元素中有文字，则按文字底部对齐） |
| order | 控制排序 | 值越小越靠前 |
| flex-grow | 放大比例 | 类似 widget属性 |
| flex-shrink | 缩小比例 | 空间不足时，会缩小 |
| flex-basis | 计算多余空间 | 1和auto，也可以是其他数字 |
3.2、项目结构
借用官方图片
我们重点关注，mainfest.json、pages.json、pages、components、static,其他的用到再查文档就行
3.3 、页面构成
uni-app中的页面，默认保存在工程根目录下的pages目录下。
每次新建页面，均需在pages.json中配置pages列表。
页面内容构成，分为3部分 <template> 、<script>和 <style>，跟前端和小程序响应式编程类似，（声明data数据，view中使用，会自动绑定刷新）
<template> //页面view绘制
<view class="content">
<button @click="buttonClick">{{title}}</button>
</view>
</template>
<script>
export default {
data() { //数据
return {
title: "Hello world",
}
},
onLoad() {// 页面加载
},
onShow() {
},
methods: {
}
}
</script>
<style> //样式
.content {
width: 750rpx;
background-color: white;
}
</style>
3.4、页面生命周期
| 函数名 | 说明 |
|---|---|
| onInit | 监听页面初始化，早于onLoad |
| onLoad | 监听页面加载，可用于获取网络数据和获取上个页面传递的数据 |
| onShow | 页面可见，获取数据 |
| onReady | DOM 树($el)已可用 |
| onHide | 页面隐藏 |
3.5、全局收发消息.类似观察者模式
| api | 描述 |
|---|---|
| uni.$emit(eventName,OBJECT) | 发消息 |
| uni.$on(eventName,callback) | 收消息 |
例子
//发送update 事件，内容后面的msg
uni.$emit('update',{msg:'页面更新'})
//接收到update事件，内容是msg
uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
3.6、页面跳转
| 方法 | 描述 |
|---|---|
| uni.navigateTo（url） | 打开新界面 |
| uni.navigateBack | 返回 |
| uni.switchTab | Tab 切换 |
| uni.reLaunch | 页面全部出栈，只留下新的页面 |
3.7、组件封装
组件一般放在 components文件夹下，类似RN ,声明 props属性以及类型（可以是组件和方法，父view传递进来）引入组件分3步，1导入 2注册 3使用
模版如下：
<template>
<view>
<!-- 3.使用组件 -->
<uni-rate text="1"></uni-rate>
</view>
</template>
<script>
// 1. 导入组件
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
components: { uniRate } // 2. 注册组件
}
</script>
复制代码
3.8、网络
//obj 请求头，请求方式（get，post），参数，promise等
uni.request(OBJECT)
4、开启uniapp之旅
经过上面的介绍，如果你有vuew ,微信小程序、RN 或者fluter的任一种经验，相信你能模仿着写代码了，接下来我们简单练习下。
打开HBuilderX工具，依次点击 文件————新建———项目\
这个官方demo演示了组件的使用，自己结合文档，多看看，要培养自己动手的能力，嘿嘿。
接下来，我们简单写个页面感受下，点击pages，右键新建页面，输入helloWorld
，编译器自动帮我们在 pages.json进行注册，我们把他提到pages最上面如下图，作为第一启动页。
5、各平台编译
下面分别介绍下，跨平台编译各大app
5.1、发小程序
会自动打开微信开发者工具。如果失败，请确保微信开发者工具的服务端口已开启。
温馨提示：在HBuilderX 修改代码，保存后会自动同步到微信开发者工具，很方便有没有，开发完成后，在小程序开发工具点击 上传，
在微信管理后台进行授权发版。
5.2、发Android
1打包uniapp 资源
2制作android壳子（基座）
新建壳项目，申请离线打包key，在清单配置
5.3、打包ios
android 类似，作为壳工程，修改plist 和Bundle ID，版本，图标等,然后copy 资源到指定目录。
5.4、打前端
