同一个系统微信小程序和web页面有什么联系吗

同一个系统微信小程序和web页面有什么联系吗,第1张

微信小程序和Web页面有以下联系:

语言技术:微信小程序和Web页面都使用JavaScript等一些常用开发技术,同时微信小程序基于小程序框架进行开发,而Web页面则基于HTML、CSS等相关技术进行开发。

浏览器内核:微信小程序和Web页面都需要通过特定的渲染引擎解析并展示内容。微信小程序使用基于Chrome浏览器的WKWebview内核进行渲染,而Web页面在不同的浏览器中可能采用不同的渲染引擎。

开发工具:微信小程序和Web页面通常使用类似的开发工具来进行开发调试。微信小程序需要使用微信开发者工具进行开发和发布,而Web页面可以使用各种浏览器自带的开发工具或常见的开发工具(如VS Code、Sublime等)来进行开发调试。

网络请求:微信小程序和Web页面都需要通过网络请求获取数据以及进行交互。微信小程序使用内置的wxrequest()等API进行网络请求,而Web页面使用XHR(XML>

尽管微信小程序和Web页面有着以上的联系,但它们也有着一些显著的不同之处,比如微信小程序是在一个封闭的环境下运行,并且具有更高的安全性能,而Web页面则可以直接通过浏览器访问,并且更具可扩展性。

微信小程序实现页面内的跳转——scroll-view

需求:在页面内我们常常会写这样一个效果,一个a标签href=”#id” 点击会跳转到本页面的某个模块。微信小程序里我们要实现这个效果需要用到scroll-view组件

官方组件介绍:/debug/wxadoc/dev/component/scroll-viewhtmlt=2017112

问题:我第一次尝试这个组件的时候应用到自己的项目里发现完全没有反应

然后我开始检查我的代码:

Scroll-y=”true”设置--ok

目标元素Id设置--ok

Scroll-into-view点击跳转时设置为id--ok

将scroll-view组件包裹在整个页面外面并且设置高度为整个页面的高度--ok

表面看完全遵从官方文档,但在我把官方给出的例子看了之后对这个组件有了更清楚的认识,我意识到他其实给我之前写的轮播用了一样的思路,在固定大小的视觉窗口里有一个超出这个窗口大小的页面,通过滚动这个大页面的位置让它的不同部位显示在窗口的可视部分这就给我们造成了页面或其实是在滚动的感觉。

Scroll-view的官方介绍里说需要给scroll-view组件一个固定高度就是这个意思,所以我其实不应该设置scroll-view的固定高度为整个页面的高度,只需要设置为整个屏幕的可视区域高度就可以了。

就像上面这张图展示的,scroll-view组件的高度要设置为移动设备屏幕可视区域高度。

而得到设备高度就又需要微信小程序提供的API:wxgetSystemInfo

/debug/wxadoc/dev/api/systeminfohtml#wxgetsysteminfoobject

Js页

Page({

onLoad:function(){

var that=this

wxgetSystemInfo({

success: function(res) {

thatsetData({

systemInfo:res

})

thatupdate()

}

})

},

data:{

viewID:'main',

systemInfo:{}

},

toBuyCar:function(){

var id='buyCar'

thissetData({

viewID:id

})

}

})

页面上wxml

<scroll-view style="height:{{systemInfowindowHeight}}px;" scroll-into-view="{{viewID}}" scroll-y="true">

以上就是关于同一个系统微信小程序和web页面有什么联系吗全部的内容,包括:同一个系统微信小程序和web页面有什么联系吗、小程序中web-view怎么跳转到不同的页面、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/10101228.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存