uniapp + HBuilder 使用

一、创建一个uniapp项目

可以使用两种方式创建：
1. HBuilder 新建项目选择类型
2. vue@clic命令创建 vue create -p dcloudio/uni-preset-vue 项目名(my-project)，然后选择默认模板

两种方式创建项目，结构区分

HBuilder 项目结构：

pages 存放所有的页面
static 存放所有的静态资源图片等
unpackage 打包过后的文件的存储位置
app.vue 页面入口文件
main.js 项目入口文件
manifest.json 打包后的配置文件
pages.json 设置项目的存放路径跟窗口外观
uni.scss 常用的css变量

vue@cli 项目结构：

除了uniapp的文件外，还有vue的相关文件。
注意：
用vue@cli创建项目的话，vue@cli需要安装4.5版本 我安装的是4.5.15

二、uniapp标签变化

div 改成 view

span、font 改成 text

a 改成 navigator

img 改成 image

input 还在，但type属性改成了confirmtype

form、button、checkbox、radio、label、textarea、canvas、video 这些还在。

select 改成 picker

iframe 改成 web-view

ul、li没有了，都用view替代

template 列表渲染（不占用空间）

block 条件渲染（不占用空间）

audio 不再推荐使用，改成api方式，背景音频api文档
其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签。但不推荐这种用法，调试H5端时容易混乱，基于元素的选择器也会出问题。
除了改动外，新增了一批手机端常用的新组件

scroll-view 可区域滚动视图容器

swiper 可滑动区域视图容器

icon 图标

rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）

progress 进度条

slider 滑块指示器

switch 开关选择器

camera 相机

live-player 直播

map 地图

cover-view 可覆盖原生组件的视图容器

cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

三、使用组件uview-ui(1.x为例）

我是用的是命令行方式创建项目
uview-ui

1. 安装：
   npm i node-sass -D // 安装node-sass
   npm i sass-loader -D // 安装sass-loader
   npm install uview-ui@1.8.4 // 安装组件
2. 引入：（在main.js）
   import uView from “uview-ui”;
   Vue.use(uView);
3. 配置样式：（在src->uni.scss，放在最开始位置)
   @import ‘uview-ui/theme.scss’;
   
4. 引入uView基础样式(在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性)

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

四、API

1. 数据缓存

1.1 uni.setStorage(异步缓存)

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

1.2 uni.setStorageSync(同步缓存)

uni.setStorageSync('storage_key', 'hello');

1.3区别

异步就是不管保没保存成功,程序都会继续往下执行。同步是等保存成功了,才会执行下面的代码。使用异步,性能会更好;而使用同步,数据会更安全。

五、真机调试

1.安卓（以oppo手机为例）

1.1 连接数据线调试

步骤一： 安装插件

步骤二：打开USB调试

设置->关于手机->版本信息->多次点击版本号
->会提示处于开发模式->返回设置页面->点击其他设置->开发者选项->打开->允许usb调试

步骤三：运行

步骤四：下载HBuilder

 手机会提示下载HBuilder,下载完成会多一项
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c009946064d74c0e8bb6dc3dafcbdf7a.jpeg)

步骤五：调试

里面只能看打印的内容

步骤六：请求

如果是外网需要手机安装vpn，接口才能走通

1.2 无线调试

步骤一：打开无线调试

步骤二：匹配

进入无线调试页面->选择
->
->下载abd->
->最后使用命令进行匹配
进入33.0.1文件夹，并打开cmd窗口：

1. 配对设备，在手机上选择使用配对码配对设备。使用adb pair命令和手机配对 这里的地址和code是选择匹配选项弹框，弹出来的，每一次都不一样
2. 继续使用adb connect命令连接设备 这里的地址，是进入无线连接显示的手机地址，不会变
3. 使用adb devices可以看到所有已连接设备，同时手机上会显示已连接到USB无线调试。
   
   后面步骤跟有线差不多，就不逐步说了

六、遇到问题

1. API

1.1 uni.navigateTo

作用：保留当前页面，跳转到应用内的某个页面。
注意点：跳转路径（url）不能是tabbar中定义的路径，否则报错。

1.2 uni.requestPayment

作用：把App、微信小程序、支付宝小程序里的服务端支付开发进行了统一的封装。
注意点：不提供H5的支付功能
代码参考

2.插件

1.1 mescroll-uni

作用：页面局部进行上拉加载下拉刷新
注意点：当你在样式中加入 overflow: auto;类似样式时，uniapp原生的onReachBottom生命周期没有效果。但是样式问题又不太好修改，这时可以使用
参考地址

<template>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
		@up="upCallback"
		:up="upOption10"
		top="122rpx">
		<view class="content">
			<view class="item" v-for="(item, index) in listData" :key="index" @click="handelItemDetail(item)">
				<view class="itemContent">
					<view>{{item.exp_entertain_number}}</view>
					<view>{{item.entertain_object}}</view>
					<view>{{item.entertain_type_name}} {{item.entertain_object_type_name}}伴</view>
					<view class="singleLineText">事由：{{item.entertain_desc}}</view>
				</view>
			</view>
		</view>
	</mescroll-uni>	
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { upOption10, downOption } from "@/utils/invoice.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				searchVal: "",
				triggered: false,
				isOpenRefresh: true ,// 是否开启下拉
				listData: [],
				exp_report_header_id: "",
				paramData: {}, // 参数
				pagenum: 1,
				pagesize: 10,
				upOption10,
				downOption
			};
		},
		methods: {
			downCallback() {
				this.listData = [];
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调 */
			upCallback(page) {
				this.pagenum = page.num
				this.pagesize = page.size
				this.getData(); //文章列表
			},
		}
</script>

@/utils/invoice.js

export const upOption10 = {
	page: {
		size: 10, // 每页数据的数量,默认10
	},
}
// 下拉刷新参数
export const downOption = {
	auto: false //是否在初始化后,自动执行downCallback; 默认true
}

3.组件

3.1 uni-easyinput 和 uni-forms

作用：原生input组件的增强 ，是专门为配合表单组件uni-forms而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能。

起因：由于uniapp内置组件input没有密码类型，所以使用uni-easyinput增强输入框来代替。紧跟着问题就来了…

问题：

1. 我之前用的是uView-ui的form组件，但是uni-easyinput表单校验必须用uni-forms否则不起作用。
2. uni-forms的校验时机设置validateTrigger在1.4.0 就不支持在rules里面单独写校验时机，只有uni-forms上可以配置 validateTrigger
3. uni-forms重置表单方法resetFields在1.4.0 也已弃用，需要用clearValidate清除表单校验并设置formData中数据为空

代码参见uniapp-uni-easyinput使用

3.2 模糊查询组件

作用：很明显提供模糊查询功能
起因：由于uniapp没有提供模糊查询组件，项目有需要模糊查询功能，封装了一个模糊查询组件
代码参见uniapp-模糊查询

…待续