月度归档： 2020年11月

<template>

<view>

<view class="page-section page-section-gap" v-show="show_map">

<view>lat: {{this.lat}}</view>

<view>lng: {{this.lng}}</view>

<button @click="open">打开弹窗</button>

<uni-popup ref="popup" type="bottom" class="buttom_popup">

<iframe :src=this.url id="mapPage" width="100%" height="500rpx" frameborder=0>

</iframe>

</uni-popup>

</view>

</view>

</template>

<script>

import uniPopup from '../../components/uni-popup/uni-popup.vue'

import uniPopupMessage from '../../components/uni-popup/uni-popup-message.vue'

import uniPopupDialog from '../../components/uni-popup/uni-popup-dialog.vue'

export default {

components: {

uniPopup,

uniPopupMessage,

uniPopupDialog

},

onLoad() {

var that = this

window.addEventListener('message', function(event) {

var loc = event.data;

if (loc && loc.module == 'locationPicker') {

that.changeLoc(loc);

}

}, false);

},

data() {

return {

lat:'32.64671',

lng:'117.01504',

show_map:true,

url: "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=you_key&referer=myapp&coord=32.64671,117.01504"

}

},

methods: {

changeLoc:function(loc){

this.lat = loc.latlng.lat

this.lng = loc.latlng.lng

},

open(){

this.$refs.popup.open()

}

}

}

</script>

<style>

.page-section{

padding-top:0rpx;

}

.buttom_popup{

background: #007AFF;

}

</style>

一般情况下实例化的过程

<script type="text/javascript">
    //创建一个构造函数
    function Person(name, sex){
        this.name = name;
        this.sex = sex;
    }

    //创建构造函数的原型对象
    Person.prototype={
        constructor:Person,
        eat:function(){
            console.log(this.name + "吃了一个大鸡腿！");
        }
    }

    //调用构造函数必须要使用new
    var per = new Person("LeoKim", "男");
    per.eat();
</script>

Jquery的方法

<script type="text/javascript">
    function Person(name, sex){
        return new per(name, sex);
    }

    function per(name, sex){
        this.name = name;
        this.sex = sex;
    }

    Person.prototype={
        constructor:Person,
        eat:function(){
            console.log(this.name + "吃了一只老公鸡！")
        }
    }

    //js引擎会在per中查找eat方法，如果没找到就会到per的原型链上去找，所以这里需要把per的原型链复制为Person的原型链
    per.prototype = Person.prototype;
    
    var p = Person("LeoKim", "男");
    p.eat();
</script>

jQuery 的方式是通过原型传递解决问题，把 jQuery 的原型传递给jQuery.prototype.init.prototype

所以通过这个方法生成的实例 this 所指向的仍然是 jQuery.fn，所以能正确访问 jQuery 类原型上的属性与方法