uni-app控件学习总结

控件:
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>

 

上一篇:Ajax介绍


下一篇:uni-app检测版本升级并显示下载进度