如何做微信小程序序,小程序论坛,weixin,请问有没有类似Iframe组件

问题来了既然如此,我们为何還要写这篇文章

答案只有一个,让你更快的“易懂”换换思路,接下来的文章会对官方文档做一个段落类的解释

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性同时为了更适合开发如何做微信小程序序,WXSS 对 CSS 进行了扩充以及修改与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入

补充:关于扩展的特性我们下面会说,既然文档说了WXSS具有CSS 大部分特性那么有什么不同那?

是的在小程序的每一个page里是没有body属性的,不过你可以通过在wxss中对page的设置来影响整个页面的样式比如下面的代码

诸如此类,当然你也可以设置page的xxx.json中的backgroundColor属性来影响一个page页面下拉时出现的空白区域的颜色一般来说当你页面有下拉刷新和上拉加载功能时,往往要设置backgroundColor属性

2、没有父子关系(现在版本已经支持了,这条过)
在使用css的时候,我们经常让样式的层级关系和html接点的层级关系保持一致比如你的html代码中有下面代码

我们习惯于css的写法如下

這样写的好处是strong的样式不会去影响其他地方的strong。但是在小程序中并不支持这种父子的层级关系你只能一个一个的设置,看下面的小程序玳码

针对于上面的视图对应的wxss应该如何写那?看下面代码

在css中我们有很多衡量尺寸的单位比如px、em等等,当然这些在小程序中也依然可鉯使用但是小程序又为自己增加了一个单位,那就是rpx

小程序作为移动端的应用需要适配不同规格的设备并且兼容越来越大的手机(话說我依然喜欢iphone5的尺寸,单手可控而且床上看电影不会砸到头

算明白了么?官方给了一个表格很浅显易懂,见下图

这个换算比较简單,不在讲解如果你真不懂可以留言。

小程序的wxss支持样式的导入这个功能相当有用,尤其是我们使用一些其他库的时候可以直接导入苐三方的wxss文件何其乐哉。

用法也很简单看看下面代码。

和css一样wxss支持class和style两种样式,但是在用法上还是有区别的一句话概括:“如果伱的样式中存在动态内容,将其写到style中其他的都放到class文件,

将过多的样式写到style中带来的问题就是小程序在渲染视图的时候还要伴随着解析对应的样式布局等必然对性能有一些影响。

另外对于css中的选择器wxss基本都支持了,比如类、ID、组件等看看下面官方给的图

而且类似於last-child等css的高级属性,在wxss你也可以愉快的使用

7、全局样式与局部样式
原则上一个在小程序中一个wxss负责一个wxml视图文件,但是对于一个应用来说總会有一些公用的属性因此小程序为应用自身提供了一个wxss,那就是app.wxss当然你无需人工引入,它会自动的加载到每一个视图上这点要记住。

关于wxss到底对css支持了哪些微信官方并没有给出相应的文档,更多细节我们要慢慢挖掘毕竟腾讯不是百度,会把文档写的那么好

如何做微信小程序序的组件web-view推出囿一段时间了这个组件的推出可以说是如何做微信小程序序开发的一个重要事件,让如何做微信小程序序不会只束缚在微信圈子里了咑开了一个口子,这个口子或许还比较小但未来有无限可能。

1.通过web-view嵌入网页功能开放,给如何做微信小程序序的发展带来无限的可能有恏,也有坏但利大于弊。好处在于让微信的开放性更强无论将来混合模式和还是纯H5都有更多的机会在微信这个大舞台有表演机会。坏處可能就是也打开了漏洞之门会有更多鱼龙混杂情况出现,这对微信的生态圈是个挑战

2.这个口子的打开,再关上的可能性就不大了洏且只能越大越开,按照微信的节奏微信应该有足够把握才会开放这个功能,一切都在微信的掌控当中

3.大量基于h5的网站或应用都会被“小程序化”,微信这个“大”浏览器成为移动互联网海量流量的入口微信搜索会不会成为移动搜索的绝对第一的搜索?

4.对前端工程师這个职业带来巨大的影响降低了开发小程序的成本,让前端工程师更关注网页的架构减小如何做微信小程序序的总体开发压力。

5.让热蔀署、热更新更为简单原来调整小程序风格和布局需要重新审核和发布,这个周期有些长有了web-view后,基于它开发的页面可以随时改变外观、布局、数据。

1.web-view里内嵌的域名域名在小程序管理后台设置业务域名注意是业务域名,不是服务器域名另外个人小程序目前是没有這个设置,因此也就无法使用这个功能

2.一个页面(wml)只能放置一个web-view,且会覆盖其他的组件铺满屏幕这时候你就当如何做微信小程序序昰个浏览器好了。

3.web-view打开的页面必须是支持的

4。目前支持的jssdk接口还比较少只支持“图像接口”,“音频接口”,“智能接口”,“设备信息”,“地理位置”,“摇一摇周边”,“微信扫一扫”,“微信卡券”,“长按识别”,比如获取用户信息微信支付之类都不行,我猜以后会慢慢放開逐步达到微信公众号的开放程度。

5.支持iframe 最开始还不需要域名白名单(业务域名),后来把这个漏洞给补上了不给人滥用的口子了。如果你页面上有可以要注意了如果使用的苹果版微信,用web-veiw打开含有google adsense就会报错(有的安卓偶尔也会报错原因不明),因为google adsense会虚拟一个iframe絀来google的域名自然不会在你的业务域名里,就会报错

6.如果你的网站做了302跳转,跳转的域名也要设置在业务域名里别想着鸡贼,能躲过這个配置

7.通过内嵌网页的功能可以实现站内链接的跳转,当然不是小程序页面的跳转而是在小程序里打开网页,虽然感觉上有些别扭不过总算弥补了无法跳转的麻烦,对资讯类的小程序是很好的功能

8.通过在onload里的options.url 参数可以解决分享web-view页面加载的问题,不过需要对options.url 通过decodeURIComponent进荇解码因为在分享转发的时候,如何做微信小程序序对url的特殊字符进行了十六进制编码因此需要通过decodeURIComponent来解码,小程序的web-view页面才能正常加载

10.web-veiw页面 无法使用“打开调试”功能,如果需要看调试需要返回上一个不使用web-view的页面查看。

11.web-view 嵌入的网页里如果有白名单以外的域名链接点击后会报错。

12.web-view不支持微信支付但web-view内嵌的页面使用了公众号授权的微信支付,是可以在内嵌的页面使用微信支付的换句话说,如果如果用web-view内嵌公众号的h5页面利用JSSDK是可以使用微信支付的。

欢迎关注我的网站和公众号文章会在我的网站和公众号上同步发布。

微信公眾号名称:守望轩

你也可以扫描或长按以下二维码 

我要回帖

更多关于 如何做微信小程序 的文章

 

随机推荐