2019-01-07 小程序记录

1.今天再写小程序的时候,加载背景图的时候,使用本地图片,模拟器能加载出来,预览以及真机都加载不出来,通过实验得之,在加载背景图的时候,只能加载网络图片或者base64的图片,本地图片加载不出来,image可以加载本地图片。

background: url('http://pic35.photophoto.cn/20150402/0011024033183316_b.jpg') no-repeat

2.使用组件scroll-view加载列表是的时候,横向滚动,我们必须设置其相关属性

scroll-x="true"
white-space: nowrap;
display: flex

在scroll-view里面的view子控件容器,我们使之变成行内元素属性

display: inline-block

3.控件设置毛玻璃,先设置一下样式class{},在样式里面写入一下内容

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera /
background-position: center;
background-size: cover;
-webkit-filter: blur(10px); /
Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);

这是对毛玻璃的样式的设置, 如果需要在毛玻璃上放图片或者text标签,这是我们要使用 position属性,具体使用flexed,还是relative,absolute这个需要根据业务需求来选择,具体的自行写入。

4.写小程序的过程中,大家相比都会用到,web-view这个组件,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量。

使用web-view组件显示HTML页面

<web-view src="https://www.baidu.com"></web-view>

很简单这样就可以使用了。如果木有微信小程序在后台配置相关信息,只能真机有效。

当然也有不足之处

小程序的这个<web-view>总是自动铺满整个页面,且每个页面只能有一个<web-view>,它会覆盖其他组件。也就是说,没有办法实现小程序界面组件和<web-view>页面混排的情况,这点要注意。

在内嵌的HTML页面中跳转回小程序


<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script>
// 跳转到小程序的一个页面
wx.miniProgram.navigateTo({url: '/path/to/page'})
</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。