【uni-app】基础

1、新建项目

2、uniapp中生命周期

3、隐藏 “返回首页” 按钮

4、弹窗

5、微信授权登录

6、动态修改标题

7、页面背景色

8、折叠面板的高度无法修改（需要手动）

9、拨打电话

10、v-for中使用v-if，v-if使用函数报错

11、跳转页面传递参数是数组

12、图片高度自适应

1、新建项目

打开HBuilder X编辑器、新建项目，选择模板uni-ui、填写项目名称和项目存放地址，选择vue版本之后点击创建，一个新的项目就完成啦。

我在项目中使用的单位是rpx，它能够自适应屏幕大小

2、uniapp中生命周期

应用生命周期（仅可在App.vue中监听）

1.onLaunch ：当 uni-app 初始化完成时触发（全局只触发一次）App.vue里的onLaunch中option作用：获取用户进入小程序或退出小程序的场景值

2.onShow ：当 uni-app 启动，或从后台进入前台显示 //监听用户进入小程序

3.onHide :当 uni-app 从前台进入后台 //监听用户离开小程序4.onError :当 uni-app 报错时触发

5.onUniNViewMessage :对 nvue 页面发送的数据进行监听

页面生命周期（在页面中添加）

1.onLoad （监听页面加载）

2.onShow （监听页面显示）

3.onReady （监听页面初次渲染完成）

4.onHide （监听页面隐藏）

5.onUnload :监听页面卸载

6.onResize :监听窗口尺寸变化

7.onPullDownRefresh :监听用户下拉动作，一般用于下拉刷新

所有页面都可以完成下拉刷新功能，打开pages.json，在"globalStyle"里设置"enablePullDownRefresh":true

如果想在单个页面中执行刷新功能：在pages.json里单个页面上添加

8.onReachBottom :页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据

9.onTabItemTap :点击 tabBar 时触发

10.onShareAppMessage :用户点击右上角分享，可以在转发时设置转发标题，路径和图片

11.onPageScroll :监听页面滚动

12.onNavigationBarButtonTap :监听原生标题栏按钮点击事件13.onBackPress :监听页面返回

14.onNavigationBarSearchInputChanged :监听原生标题栏搜索输入框输入内容变化事件

15.onNavigationBarSearchInputConfirmed :监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发16.onNavigationBarSearchInputClicked :监听原生标题栏搜索输入框点击事件

组件生命周期（与vue标准组件的生命周期相同）

1.beforeCreate :在实例初始化之后被调用

2.created :在实例创建完成后被立即调用

3.beforeMount :在挂载开始之前被调用

4.mounted :挂载到实例上去之后调用（该钩子在服务器端渲染期间不被调用）

5.beforeUpdate ：数据更新时调用，发生在虚拟 DOM 打补丁之前（该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行）

6.updated ：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子（该钩子在服务器端渲染期间不被调用）

7.beforeDestroy ：实例销毁之前调用。在这一步，实例仍然完全可用（该钩子在服务器端渲染期间不被调用）

8.destroyed ：Vue 实例销毁后调用（该钩子在服务器端渲染期间不被调用）

3、隐藏 “返回首页” 按钮

微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

async onShow() {uni.hideHomeButton()
},

4、弹窗

（1）uni.showToast()——消息提示框

uni.showToast({title: data[0],icon:'exception',duration:850});

（2）uni.showModal()——显示按钮的提示框

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

uni.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}
});

（3）uni.showActionSheet()——从底部向上弹出操作菜单

uni.showActionSheet({itemList: ['A', 'B', 'C'],success: function (res) {console.log('选中了第' + (res.tapIndex + 1) + '个按钮');},fail: function (res) {console.log(res.errMsg);}
});

弹窗来自uni-app官网的交互反馈：https://uniapp.dcloud.net.cn/api/ui/prompt.html

5、微信授权登录

1、uni.getUserProfile获取用户信息：每次请求都会弹出授权窗口，用户同意后返回 userInfo。该API仅支持微信小程序端

2、uni-login登录：微信登录在未配置onlyAuthorize的情况下调用此接口，code值不返回，用以换取authResult。配置onlyAuthorize会把未使用过的code值返回。

参数名	说明	平台差异说明
authResult	登录服务商提供的登录信息，服务商不同返回的结果不完全相同	微信登录配置`onlyAuthorize:true`则此项为空，App 3.2.6+
code	用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息	微信登录配置`onlyAuthorize:true`才会返回，App 3.2.6+、京东小程序
appleInfo	Object	否
errMsg	描述信息

来自uni-app官网的第三方服务登录：https://uniapp.dcloud.net.cn/api/plugins/login.html

3、getPhoneNumber（使用手机号）：此方法必须是在按钮上使用，结合open-type

官网地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

<template><view class="container"><image src="/static//denglu.png" mode=""></image><button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary">微信授权登录</button></view>
</template><script>export default {data() {return {}},methods: {getPhoneNumber(e) {uni.showLoading({title: '加载中'})if (e.detail.errMsg == 'getPhoneNumber:ok') {// console.log(e)this.api.GetPhone({encryptedData: e.detail.encryptedData,iv: e.detail.iv,code: e.detail.code}).then(res => {uni.setStorage({key: 'GetPhone_Token',data: res.data.Data.Token})uni.setStorage({key: 'GetPhone_Id',data: res.data.Data.Id})uni.reLaunch({url: '/pages/home/index'})})} else {uni.hideLoading()uni.showToast({title: '您拒绝了请求',icon: 'error',duration: 1000})return}}}}
</script><style>page {background-color: #fff;}image {width: 100%;height: 680rpx;}button {margin-top: 30%;width: 70%;border-radius: 50rpx;background-color: #0086d6 !important;}
</style>

注意：我是在uni-app上写的，所以使用@，如果是直接在微信小程序软件上写的，则是使用

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

6、动态修改标题

根据上一页传递搓来的参数，进行动态修改标题

methods: {change(item, index) {uni.navigateTo({url: '/pages/word/details?item=' + item.name});}}

接收页

onLoad(e) {uni.setNavigationBarTitle({title: e.item,// success: () => {//    // console.log('修改标题成功')// },// fail: () => {//   // console.log('修改标题失败')// },// complete: () => {//   // console.log('修改标题结束')// },})}

7、页面背景色

全局背景色

在App.vue中的style设置

<style lang="scss">// 设置整个项目的背景色page {background-color: #f5f5f5;}
</style>

单页面背景色

在所需页面中的style设置，不要放在scoped中。

<style>
page {background-color: #FFFFFF;
}
</style>

8、折叠面板的高度无法修改（需要手动）

在H5/移动端使用动态添加数据高度正常更新，但在小程序端添加数据面板不会动态更新，需点击折叠按钮才会更新

在uni-list-item中添加事件

<uni-collapse ref="collapse" v-for="(item,index) in list" :key='index'><!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 --><uni-collapse-item title-border="none" :border="false" :show-arrow="true" :open="open"><template v-slot:title><uni-list><uni-list-item :title="item.title" :note="item.note" :show-extra-icon="true"@click="handleHeight()"></uni-list-item></uni-list></template></uni-collapse-item></uni-collapse>

methods: {// 高度在小程序中是无法改变的，需要手动更新高度handleHeight() {this.$nextTick(() => {this.$refs.collapse.resize();});},}

9、拨打电话

<button @click="pages()">联系我们</button><uni-popup ref="alertDialog" type="dialog"><uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="确定拨打电话吗？" @confirm="dialogConfirm"@close="dialogClose"><text class="text">400-123-1234</text></uni-popup-dialog>
</uni-popup>

pages() {this.$refs.alertDialog.open()
},
// 联系我们——拨打电话
dialogConfirm() {let phone = this.list[1].rightTextuni.makePhoneCall({phoneNumber: phone,})
},

10、v-for中使用v-if，v-if使用函数报错

原因：v-if不能使用函数返回值作为判断条件

原先我的函数是写在methods中的，然后再template中使用v-if="text(item.url)"，结果报错。后来我看了说v-if中不能使用函数，可以使用计算属性或子组件替代。

<template>  <view v-for="(item,index) in list" :key='index'><view v-if="test(item.url)">内容</view>  </view>
</template>
<script>  export default {  data() {  return {    }  },  computed: {  test: {  get(){  return function(val) {//判断是不是视频  if (url.indexOf('.') != -1) {var ext = url.substring(url.lastIndexOf('.') + 1);return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1}}  },set(){}//防止报错，set放在这里}  },  methods: {  }  };
</script>

11、跳转页面传递参数是数组

A页面的写法：A跳转到B

uni.navigateTo({url: '/pages/word/new?list=' + items,
})

B页面的写法：

 onLoad(e) {console.log(e)let obj = e.list.replace("\"([^\"]*)\"", "$1");this.list = JSON.parse(obj)console.log(this.list)},

还有一种方法使用encodeURIComponent，可以是数组或对象或解决中文乱码的时候使用

A页面

// encodeURIComponent是uniapp提供的api，直接使用，不需要注册
const item = res.data.Data
//跳转页面
uni.navigateTo({url: `../list/list?item=${encodeURIComponent(JSON.stringify(item))}`,
})

B页面

onLoad(option) {// decodeURIComponent是uniapp提供的api，直接使用，不需要注册const item = JSON.parse(decodeURIComponent(option.item));this.getreport = item},

12、图片高度自适应

微信小程序图片宽度width可以使用100%进行自适应，但是高度不行，所以这里需要使用mode属性，添加mode='widthFix' 即可

<image class="CompangImg" :src="banner.CompangImg" mode="widthFix">

13、修改扩展组件（uni-ui）的样式不生效

无论是在页面中修改样式还是使用深度选择器都无效。

然后查询微信平台官方开发文档得知，微信中的组件存在组件样式隔离，即自定义组件的样式只受到自定义组件 wxss 的影响。
此时如果想在其它页面影响到该组件的样式，需要在施加影响的组件中加入选项：

 options: {styleIsolation: 'shared', // 解除样式隔离}

shared表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

根据以上设定，样式就正常被修改了。

还有一种方法就是写在app.vue中：

页面

<template><view class="detailsContainer"> <view class="example-body"><view v-for="(item,index) in tags" :key="index":class="whichSelected===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"@click="selectState(index)">{{item}}</view></view></view>
</template>

app.vue

<style lang="scss">// 资源包样式.detailsContainer {.uni-list {border-top: 1px solid #7fc2ea;border-bottom: 1px solid #7fc2ea;}.uni-list-item__content-title {font-size: 15px !important;}.uni-list-item__container {line-height: 20px;}}
</style>

【uni-app】基础相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
Glyphs App Essential Training Glyphs App基础教程 Lynda课程中文字幕
Glyphs App Essential Training 中文字幕 Glyphs App基础教程中文字幕Glyphs App Essential Training 每个设计师都有一个字体 Glyp ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...

【uni-app】基础

1、新建项目

2、uniapp中生命周期

3、隐藏 “返回首页” 按钮

4、弹窗

5、微信授权登录

6、动态修改标题

7、页面背景色

8、折叠面板的高度无法修改（需要手动）

9、拨打电话

10、v-for中使用v-if，v-if使用函数报错

11、跳转页面传递参数是数组

12、图片高度自适应

13、修改扩展组件（uni-ui）的样式不生效

【uni-app】基础相关推荐

最新文章

热门文章