分类 微信小程序 下的文章

微信小程序放大招:web-view 组件可内嵌网页文档

经历数个 bug 修复版本之后,昨天更新的微信小程序放出了大招:新增 <web-view/> 组件。

一直以来,用 WXML 制作复杂的页面布局都是一件费时费力的麻烦事,并且由于小程序不支持外链,如果想要显示富文本(HTML)页面,在 1.4.0 基础库之前只能借助于第三方比如 wxParse 这样的库来解析和转换成 WXML,在这之后虽然有了 <rich-text/> 组件,但也有诸多限制,只能用于静态展示。

此次新增的 <web-view /> 组件使得小程序能够内嵌网页文档,可打开限定域名内的网页(域名在小程序后台中设置 > 开发设置 > 业务域名中配置),这无疑将大大拓宽小程序应用场景。不过,目前个人类型与海外类型的小程序暂不支持使用 <web-view/> 组件。

- 阅读剩余部分 -

微信小程序页面背景色设置

根据设计稿,需要对微信小程序的页面背景色进行设置,查看官网开发文档,可以使用 app.json 文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间等。其中由 window 属性对象来设置默认页面的窗口表现:

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

乍一看,会认为 backgroundColor 是我们需要的,但设置之后,发现页面背景并无变化。经过一番摸索,才搞明白 backgroundColor 设置的窗口背景色,只在页面切换跳转时能看到(一闪而过)。我们要对页面的背景色进行设置,只需在页面对应的 .wxss 文件或 app.wxss 中设置 page 标签(大致相当于 HTML 网页中的 body 标签)的样式属性即可,比如:

page {
  background-color: #fff;
}