What is a render. Js

Renderjs is a JS that runs at the view layer. It’s more powerful than WXS. It only supports app-Vue and H5. Renderjs does two main things:

• Significantly reduce communication loss between the logical layer and the view layer, providing high-performance view interaction capabilities
• Manipulate the DOM in the view layer and run the JS library for Web

use

Set the script node’s lang to RenderJS

<view id="test"></view>
<script module="test" lang="renderjs"> 
    export default { 
        mounted() { 
            // ... 
        }, 
        methods: {
        // ...}}</script>
Copy the code

Uniapp.dcloud. IO /frame? Id = re…

Render autonavi map in uniAPP using render. Js

Clear requirements

1. Use map under VUE file in UNI 2. Mark points on the map according to latitude and longitude, and click 3. 4. Two buttons need to hover on the mapCopy the code

solution

Uni has its own map component, which is still powerful, but it has limited functions in VUE files, which must be used in NVUE files. The NVUE file was not available for other reasons in this writing, so I had to think of other methods and hover buttons on the map, solving the hierarchy problem was also a difficulty, so I abandoned the MAP component of UNI. After several attempts, I chose to use render. Js to call Amap, which can perfectly solve the above requirements and problems. Hereby record and share.

Write the code

Vue pages use render.js

Render. Js is mainly introduced via script tags, as shown below:

View is a render. Js container for displaying the map, and then writing the map introduction and initialization code in the script tag

Initialize the map

data(){
    map:null.myData: []},// The following is written in methods
// Introduce the Amap SDK
init(){
    if (typeof window.AMap === 'function') {
        this.initAmap()
    } else {
    // Dynamically introduce large categories to avoid impacting the page display
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + 'your key'
    script.onload = this.initAmap.bind(this)
    document.head.appendChild(script)
    console.log('eles'); }},// Initialize the map
initAmap() {
    this.map = new AMap.Map('amap', {
        resizeEnable: true.center: [this.myData[0].longitude,this.myData[0].latitude],
        zooms: [4.20].// Set the map level range
        zoom: 18
    })
    this.map.on('complete'.() = >{
       console.log('Load complete');
    })
    this.getItem(this.myData)
}, 
// Make Makers on the map
addMaker(item){
    let marker = new AMap.Marker({
            // Latitude and longitude positions
            position: new AMap.LngLat(item.longitude, item.latitude),
            / / cheap
            offset: new AMap.Pixel(-10, -24),
            / / icon
            icon: new AMap.Icon({
                / / size
                size: new AMap.Size(20.25), 
                imageSize: new AMap.Size(20.25),
                image:'imgpath'
            }),
            // Icon display hierarchy to prevent hidden when writing
            zIndex:100.// Display the content next to the icon
            label: {content:`<view>content</view>`.offset: new AMap.Pixel(10, -18)}})// Add click events to ICONS
    marker.on('click'.(e) = > {
        console.log (item, e); })// Add ICONS to the map
    this.map.add(marker)
},
// Draw the Polyline class between points
initLine(start,end){
    let polyline = new AMap.Polyline({
        // Line segment thickness
        strokeWeight:5./ / color
        strokeColor:'#007AFF'./ / shape
        lineCap:'round'.lineJoin:'round'.// Whether to display the direction
        showDir:true./ / starting point and end point latitude and longitude [[longitudeStart latitudeStart], [longitudeEnd, latitudeEnd]]
        path:[start,end]
    })
    // Add a line segment to the subway map
    this.map.add(polyline)
},
Copy the code

Implementation effect

Please refer to autonavi API lbs.amap.com/api/javascr…

Communication in render.js

Render. Js script tag and vue page script tag cannot communicate data using this, must communicate by other means, similar to vue component pass value.

1. Data binding

2. Data reception

Render. Js sends data to the vue page

In render. Js, throw a method and write that method listener in the page as follows

    //render.js 
    // Throw data to the vUE page
    sendMsg(){
        this.$ownerInstance.callMethod('reciveMsg'.'I'm render. Js data')}// Click on the page or call directly
    sendMsg2(e,ownerInstance){
        ownerInstance.callMethod('reciveMsg'.'I'm render. Js data')}Copy the code

    // VUE page receives data
    reciveMsg(data){
       console.log(data) // I am render. Js data
    }
Copy the code

conclusion

Render. Js is mainly used in cases where DOM manipulation is very frequent, such as echarts, maps, etc. Finally, I attach the official UNI link and autonavi API link uniapp.dcloud. IO/Frame? Id = re… Lbs.amap.com/api/javascr…