配置
运行小程序要写路径
运行手机端数据线连接 手机弹出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
路由示例
路由写法和设置外观,跟小程序一样,在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只能微信),
选择状态和为选中状态的图标在连接下载图片。
路由跳转
标签跳转
<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里面包括 加载 提示 按钮框 弹出框 弹出选择框