uni-app控件学习总结

2021-12-16 18:04:29 阅读：252 来源： 互联网

控件：
1、navigator页面跳转
//关闭当前页面，返回上一页面或多级页面
<navigator open-type="navigateBack">
</navigator>

2、将 data 存储在本地缓存中指定的 key 中，从本地缓存中异步获取指定 key 对应的内容
//data存储本地缓存key
uni.setStorageSync(KEY,DATA)
例:
uni.setStorageSync('storage_key', 'hello');

//从本地缓存中异步获取指定 key 对应的内容
uni.getStorage(OBJECT)
例：
uni.getStorage({ 
key: 'storage_key', 
success: function (res) { 
console.log(res.data); 
} 
});

3、跳转请求和消息框 
//关闭所有页面，打开到应用内的某个页面
 uni.reLaunch({
           url: '/pages/catalog/catalog'
 });

//发起网络请求
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'; 
} 
});

//显示消息提示框
uni.showToast({
 position: 'bottom',
  title: "登录失败",
icon: 'none',
 })

4、uniapp中@tap和@click的区别
//在HbuilderX中，两者都是点击时触发事件；不同的是：
@click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）；
@tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;
编译到小程序端，@click会被转换成@tap；

5、自动更新思路
//调用本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid,function(inf){
Console.log(“当前应用版本
:”+inf.version+”--”+plus.runtime.version
);
});


//调用第三方程序打开指定的 URL（做自动更新用）
plus.runtime.openURL(url);

//总结
1、自动更新，获取json文件版号信息 。
2、获取app版本号plus.runtime.getProperty。
3、如果json版本号大于app版本号。
4、plus.runtime.openURL调用浏览器打开指定app安装包。

5、跳转
uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
//在起始页面跳转到test.vue页面并传递参数
 uni.navigateTo({ 
url: 'test?id=1&name=uniapp' 
});

//在test.vue页面接收参数 
export default {
 onl oad: function (option) { 
//option为object类型，会序列化上个页面传递的参数 
console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 
} }

//uni.navigateTo()和uni.reLaunch()跳转区别
uni.navigateTo()跳转后有返回键。
uni.reLaunch()跳转后关闭上一级页面，没有返回键。

6、uniapp中使用openlayers
<template>
    <view class="containerMap">
        <view id="olMap" class="olMap">
        </view>
        </view>
    </view>
</template>

<script module="ol" lang="renderjs"> 
    export default {
        data() {
            return {
                map: null,
            }
        },
        if (typeof window.ol === 'function') {
                this.initAmap()
            } else {
                const link = document.createElement('link')
                link.rel = "stylesheet"
                link.href = 'static/plugins/ol/ol.css' //可以通过此方式导入jquery，echart库
                document.head.appendChild(link)

                const script = document.createElement('script')
                script.src = 'static/plugins/ol/ol.js' //可以通过此方式导入jquery，echart库
                script.onload = this.initAmap.bind(this)
                document.head.appendChild(script)
            }
        methods: {

this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: "olMap",
view: new ol.View({
zoom: 18,
center: [114, 25],
projection: "EPSG:4326"
})
})
}

<script>

标签：控件,ol,app,plus,key,跳转,uni,页面
来源： https://www.cnblogs.com/dongzi1997/p/15699321.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uni-app控件学习总结