13-05-uniapp常用api

最新推荐文章于 2025-03-09 07:45:00 发布

ange997

最新推荐文章于 2025-03-09 07:45:00 发布

阅读量1.2k

点赞数

分类专栏： 13-uniapp

本文链接：https://blog.youkuaiyun.com/ange997/article/details/109749669

版权

13-uniapp 专栏收录该内容

6 篇文章

订阅专栏

缓存

注意：uni.setStorage与uni.setStorageSync之间的区别是什么？

跳转

注意：几种跳转形式的区别是什么？

uniapp带参数传参

写到页面里

//方法1
<navigator :url="'/pages/index/information/news?id='+值+'&title=值'"> </navigator>
//方法2
<navigator :url="`/pages/index/information/news?id=${值}&title=值`"> </navigator>

写到js

针对微信小程序传参

判断平台

语法：

// #ifdef %PLATFORM% 
    这些代码只在该平台编译
// #endif
#ifdef ：      if defined  仅在某个平台编译
#ifndef ：     if not defined  在除里该平台的其他编译
#endif ：      end if 结束条件编译
%PLATFORM%     需要编译的平台，上面的MP就是各个小程序的意思

[ 复制代码 ](javascript:void(0)😉

uni-app支持的各个平台

值	平台	参考文档
APP-PLUS	5+App	HTML5+ 规范
APP-PLUS-NVUE	5+App nvue	Weex 规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ小程序	（目前仅cli版支持）
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

uni.getProvider 能够获取是哪个平台 weixin  qq

uni.getProvider({
			    service: 'oauth',
			    success: function (res) {
			        console.log(res.provider)
			        uni.login({
			            success: function (res) {
			               console.log(res)
			            }
			        });
			    }
});

webview

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

属性说明

属性名	类型	说明	平台差异说明
src	String	webview 指向网页的链接
allow	String	用于为 iframe 指定其特征策略	H5
sandbox	String	该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。	H5
webview-styles	Object	webview 的样式	App-vue
@message	EventHandler	网页向应用 `postMessage` 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。	H5 暂不支持（可以直接使用 window.postMessage）
@onPostMessage	EventHandler	网页向应用实时 `postMessage`	App-nvue

src

来源	App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序	快应用	360小程序
网络	√	√	√	√	√	√	√	√	√
本地	√	√	x	x	x	x	x	x	x

webview-styles

属性	类型	说明
progress	Object/Boolean	进度条样式。仅加载网络 HTML 时生效，设置为 `false` 时禁用进度条。

progress

属性	类型	默认值	说明
color	String	#00FF00	进度条颜色

<template>
    <view>
        <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                }
            }
        }
    }
</script>

<style>

</style>

图片api

分享api

uni.share

官方提供api文档

https://uniapp.dcloud.io/api/plugins/share?id=%e5%88%86%e4%ba%ab%e5%88%b0%e5%be%ae%e4%bf%a1%e6%9c%8b%e5%8f%8b%e5%9c%88%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81

分享到H5

https://ask.dcloud.net.cn/article/35380