admin 管理员组文章数量: 887017
首先uniapp跟vue是比较像的，有vue基础的同学上手比较快 但是uniapp里面的api属性和方法是真的多，一时半会儿记不住 以下是我从项目搭建到学习完成的一些记录
我自己的理解，首先uniapp是一个使用vue开发所以前端应用的框架，可以做H5，也可以做移动端小程序的一款框架 正所谓 一套代码，多端报错
1.下载HBuilderX 直接去官网下载就行 我下载的是Win正式版，不太清楚跟Alpha版本有什么区别，下载完成之后开箱即用，我最近在学习微信小程序端的开发，其他端口的不太了解
以下以微信小程序开发为例
首先开发微信小程序 需要先注册一个微信小程序 然后在小程序的开发设置中点击--开发设置--，在开发者ID中会显示你的AppID 然后把他复制下来就可以关掉了,然后打开Hbuilder创建一个项目，找到manifest.json里面的微信小程序 把AppID粘贴进去就行了 这样就能在运行中打开微信小程序的开发了
然后就开始配置pages.json文件 很多东西都需要放到pages.json当中
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
//第一个应用启动页
{
"path": "pages/index/index",
//style用来配置该启动页的样式
"style": {
"navigationBarTitleText": "ababab",
"navigationBarBackgroundColor": "#007AFF"
}
},
//第二个应用的启动页
{
"path": "pages/detail/detail"
}pages 是显示应用的启动页的 每个启动页都需要放到pages.json里面的pages中进行配置，主要是路径，还有一些样式
也可以配置在全局中
// 全局的配置文件
"globalStyle": {
// 文字颜色 只支持黑色和白色
"navigationBarTextStyle": "black",
//
"navigationBarTitleText": "babababa",
// 设置导航栏的背景颜色
"navigationBarBackgroundColor": "#7FFF00",
"backgroundColor": "#F8F8F8",
// 是否开启下拉
"enablePullDownRefresh": true
},还可以通过tabbar来配置tab栏 通过list属性来添加tab栏的个数 2-5个只能是，然后默认的是在底下，可以显示图标和文字，也可以把tab栏放到上面，但是放到上面就只能显示文字，不能显示图标
"tabBar": {
// tabbar中 未选中的文字颜色
"color": "#A0522D",
// 选中的颜色值
"selectedColor": "#012345",
// tabbar的背景颜色
"backgroundColor": "#fff",
// 设置tabbar上边框的颜色 仅支持black/white
"borderStyle": "black",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
},
{
"text": "信息",
"pagePath": "pages/message/message",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
},
{
"text": "我们",
"pagePath": "pages/contact/contact",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
}
]
}, 1.uniapp中的样式
1.rpx即为响应式的样式，是一种根据屏幕宽度自适应的动态单位，以750宽为屏幕的精准值
750rpx恰好为屏幕的宽度
2.可以使用@import 用于导入外联样式表
3.定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，之作用在对应的页面，并且会覆盖全局样式
4.uniapp使用字体图标
1.字体文字小于40kb的 uniapp会自己转换
2.字体文字大于等于40kb的需要自己引入
6.引用路径用 ~@开头来引入
2.基本的数据绑定
跟vue中的数据绑定一样 通过v-bind来绑定数据 v-model还没用到 应该也能用
3.uniapp 中的生命周期
定义：一个对象从创建到销毁的一个过程
uniapp应用的生命周期 onLaunch 初始化完成时触发 只会出发一次
onShow 当启动uniapp 页面显示出来了就触发
onHide 页面隐藏起来就触发
onError 报错的时候触发
应用的生命周期函数应该定义在App当中
页面的生命周期 onLoad 监听页面加载，其参数为上个页面传递的参数 参数类型为Object,
能拿到上一个页面给下一个页面传递的参数
onshow 监听页面显示，页面每次出现的时候就会触发
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载‘ 不咋用到
这些生命周期跟Vue的生命周期很像
export default {
data() {
return {
title: 'Hello'
}
},
onLoad(options) {
console.log('页面加载了,会触发一次' , options)
},
onShow() {
console.log('页面显示了');
},
onReady() {
console.log('页面初次渲染完成了,只会触发一次');
},就直接用就行，然后不同的生命周期监听不同的事件
下拉刷新
1.在全局中配置"enablePullDownRefresh": true
2.在局部页面中定义 onPullDownRefresh处理函数 和(noLoad等生命周期函数同级)，监听该页面用户的下拉刷新事件
可以在pages.json的style中来配置 enablePullDownRefresh = true
可以通过配置文件的方式来开启下拉刷新
第一种方法配置的下拉刷新是局部刷新 就你想让谁有下拉刷新的功能你就去pages.json中找到响应的pages选项，在他的style中配置enablePullDownRefresh：true 就可以实现下拉刷新了
然后可以去相应的页面中通过onPullDownRefresh()方法去监听事件
也可以在全局的globalStyle中去配置 这样就都可以实现下拉刷新了
第一种方式：在
"style":{
"enablePullDownRefresh" : true
}
然后在相对应的页面中去监听这个下拉刷新 通过
onPullDownRefresh(){
console.log('监听到下拉刷新')
<!-- 关闭下拉刷新 调用以下方法 -->
uni.stopPullDownRefresh()
}第二种方式:
直接通过调用uni.startPullDownRefresh()方法来开启下拉刷新 通过绑定事件调用API来完成下拉刷新也可以
<button @click='pullDown'></button>
methods:{
pullDown(){
uni.startPullDownRefresh()
}
}## onReadBottom
页面触底，监听页面滚动到底部的事件，常用于拉取下一页的数据
onReachBottom(){
console.log('页面触底了')
//触底的时候可以处理一些请求 比如说触底时增加跳转到下一页
this.pageindex++
//然后调用请求
this.getGoodsList()
}## uniapp发起网络请求
可以通过uni.request方法来发起网络请求
需要注意的是，在小程序中网络相关的API在使用前需要配置域名的白名单
<button @click='get'>点击发送请求</button>
methods:{
get(){
uni.request({
url:'http://www.baidu',
method:'GET',
<!-- 配置项success时 收到开发者服务成功返回的回调函数-->
success(res){
console.log(res)
}
})
}
}## 数据缓存
<!-- 这些都是异步接口 -->
设置缓存 uni.setStorage() 将数据存储到本地缓存指定的key中，会覆盖掉原来的key对应的内容 是一个异步的接口
获取数据 uni.getStorage()
移除数据 uni.removeStorage()
<!-- 同步接口 -->
设置数据 uni.setStorageSync('id',80)
## 如何上传图片和预览图片
uni.chooseImage(object)
从本地相册选择图片或者使用相机拍照
<button @click='chooseImg'>点击上传图片</button>
methods:{
chooseImg(){
uni.chooseImg({
<!-- 最多上传4张图片 -->
count:4,
<!-- 输出上传成功的回调函数 -->
success(res){
console.log(res)
}
})
}
}
预览图片 uni.preivewImage() aipmethods:{
//选择图片
chooseImg(){
// uni.chooseImage({
// })
// console.log('上传图片')
uni.chooseImage({
// 最多上传图片的数量
count:5,
// 打印成功的回调
success:res=> {
console.log(res)
this.image = res.tempFilePaths
}
})
},
//预览图片
previewImg(current){
// 获取当前图片的路径
console.log(current)
// 预览图片
uni.previewImage({
current,
//选择图片的地址
urls:this.image,
// loop开启轮播图循环
loop:true,
})
}
}, ## 条件编译
做跨端兼容的
条件编译时用特殊工艺的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台
写法：以 #ifdef加平台标识开头 以#endif结尾
例如 #ifdef H5
console.log('只在H5页面中显示')
#endif
<!-- #ifdef H5 -->
<view>我希望只在h5页面中看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我希望只在微信小程序页面中看见</view>
<!-- #endif -->## 导航跳转
声明式跳转
<navigator open-type='' url='跳转地址'>点击跳转</navigator>
编程式跳转
在button里面定义一个方法
用 uni.navigateTo({
<!-- 跳转的地址 -->
url:''
})
<!-- 跳转到tabbar页面需要另一个api -->
<!-- 跳转到tabbar页面 并且关闭所有的非tabber页面 -->
uni.switchTab({
url:''
})
<!-- 跳转到详情页并且关闭当前页 -->
uni.redirectTo({
url:''
})
## 在uniapp中创建一个组件
在uniapp中创建一个组件 后缀名为Vue的文件，即创建一个组件成功,其他组件可以将该组件通过import的方式导入
然后去需要调用的地方在通过components进行注册即可
## 组件之间的通讯
父给子传值 通过props的方式去传递
子给父传 用自定义事件 $on $emit
兄弟组件传值 自定义事件
版权声明：本文标题：uniapp初体验 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726377432h948209.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论