uniapp脑瘫式学习

配置

运行小程序要写路径

运行手机端数据线连接 手机弹出use用于选择最高的那个

手机要开启开发者模式，如果设置搜不到开发者选项，就连击10下手机版本号就会弹出开发者选项，usb调试功能打开即可。

 

页面绘制

写页面的时候就和html一样，

div换成view    span换成text    img换成image    botton按钮最好加上size mini

当image 没有想要的宽高可以在style 中设置  

其他不同具体看文档 

内置组件

轮播图  我们这个时候就可以设置image的宽高

<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000">
			<swiper-item v-for="item in images">
				<view class="swiper-item uni-bg-red">
					<image :src="item.image_src" mode="" style="width: 100%;height: 100%;">        </image>
				</view>
			</swiper-item>
		</swiper>
	</view>

跨端兼容 #ifdef *** 和 #endif 

<!--  #ifdef  %PLATFORM% -->
        内容 只在什么端显示
<!--  #endif -->

在uniapp 引入 icon

uniapp中如何使用iconfont-uni-app-PHP中文网uniapp中使用iconfont的方法：首先下载需要的图标；然后选择unicode点击生成代码；接着回到iconfont.css并且打开css文件；最后需要在【//at】前面加上【https:】，并调用iconfont。https://www.php.cn/uni-app/465922.html

路由示例 

路由写法和设置外观，跟小程序一样，在pages.json 按顺序引入  第一条路由就是首页，外观为globalStyle中设置具体外观设置（全局外观和路由，tabble也是这个网站）

uni-app官网https://uniapp.dcloud.net.cn/collocation/pages.html

具体style在上边连接查看 

在列表新建页面会自动在pages添加

全局样式配置

具体style在上边连接查看

tabble在pages.json中和global同级 

只能有两条到五条，

写上就会有导航条 position属性为top只能显示文字，在bottom可以显示图标， (Top只能微信)，

选择状态和为选中状态的图标在连接下载图片。

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/home/index

 路由跳转

标签跳转

	<navigator url="../index/index" open-type="switchTab">去tabbar</navigator>
	<navigator url="/pages/navigate/navigate">去普通页面</navigator>
<navigator url="/pages/navigate/navigate" open-type="redirect">去普通页面且不能返回</navigator>

标签传参

<navigator url="/pages/navigate/navigate?id=111">去普通页面</navigator>

在url拼接 ？ id=1213 

在新页面获取参

onLoad(options) {
			console.log(options)
		},

方法传参 

uni.navigateTo({
	url:"../navigate/navigate?id=111"
})

页面动态绘制（数据绑定等）

数据绑定和vue一样 

在data中写数据 在页面上用{{}}（小胡子语法）来展示数据

在属性上仍然是v-bind

一样的有v-if for else 等

也可以用简写 @click :src

在图片动态引入没效果，就写成绝对路径 /static

生命周期

 

用不习惯就用vue的生命周期，在微信小程序一样适用，但是noload要有，用来接收别的页面传来的参数。

onPullDownRefresh下拉刷新方法

需要在 pages.json 里，pages中对应的path下写style：{“enablePullDownRefresh”：true}，或者在globalStyle中全局开启。

开启后下拉就会触发当前页面的onpulldownrefresh事件，进行完操作后在当前函数轴调用uni.stopPullDownRefresh来结束下拉刷新。

onReachBottom到达底部事件

在全局的globalStyle 可以配置 onReachBottomDistance 距离底部多远触发事件 默认为50

组件

 组件的声明周期函数和vue一致

调用组件

components/组件名称/组件名称.vue 的格式可以直接引用，不需要引入

详情uniapp搜索easycom 

父子传参和vue一致 属性和$emit   @自定义事件

兄弟间传参就全局注册 $on  $emit 方法

uni.$emit('update',{msg:'页面更新'})

	uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

 扩展组件

 

或者在一些建项目的时候选择uni UI组件 

但是选择自带ul模块有时候会出现找不到资源报错

 然后选择项目导入

发起网络请求uni.request(OBJECT)

uni.request(OBJECT) | uni-app官网https://uniapp.dcloud.net.cn/api/request/request.html

 注意：method有效值必须大写  GET 和 POST 是都支持的，其他请求方法看连接

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

 默认为GET请求

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise

我们就可以愉快的 async await了

这个地方写箭头函数，箭头函数不影响this指向，或者在外边用that保存this的指向也可以

localstorage缓存

 在我们操作时候记得要用同步

设置 支持原生的所有类型

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

 获取 字符串类型

uni.getStorageSync('storage_key');

删除 字符串类型

uni.removeStorageSync();

 清空 

uni.clearStorageSync();

从本地相册选择图片或使用相机拍照

uni.chooseImage({
	success: function (res) {
		console.log(res)
	}
});

 res.tempFilePaths 返回的是一个数组  里面都是上传图片的临时路径 可以for循环展现在页面上

res.tempFiles返回的是图片文件  一般用于传给后端进行保存

 chooseImage参数

 点击大图预览

uni.previewImage({
            current:在数组中的index，或者数组中图片的路径
			urls: res.tempFilePaths, 传入要预览的数组
		});

 如果不写current默认为第一张   可以image上绑定点击事件传入current值

在预览长按保存照片  具体参数如下

注意兼容 

消息提示uni.showToast

 

 

uni.request({
				url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				success:(res)=>{
						if(res.statusCode==200){
						this.images = res.data.message
						uni.showToast({
							title:"请求成功"
						})
					}else{
						uni.showToast({
							title:"请求失败",
							icon:"error"
						})
					}
				}
			})

uni.showToast(OBJECT) | uni-app官网https://uniapp.dcloud.net.cn/api/ui/prompt.html里面包括  加载   提示  按钮框    弹出框   弹出选择框