微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

2.5 小程序提供的HTML支持和开放能力支持

本节会介绍一些简单的小程序组件，这类组件有一个特点，就是它们本身并没有什么使用的难点或使用的注意事项，可配置的内容也很少，却是所有小程序中非常重要的一个部分。

这部分组件都是在小程序出现后新增加的一些组件，也正是这些组件为小程序本身带来了更多的功能和更多的可能性。

2.5.1 开放数据域：open-data

open-data组件一般用于显示用户的昵称、头像、性别、地址、语言等内容。

为什么需要这样的一个组件呢？主要是因为用户的信息需要保密，getUserInfo这个API已经无法获得用户的相关信息了，大量用户又会拒绝授权的方式，那么，如何保证显示出用户的头像、昵称等信息呢？答案就是开放数据域组件。

open-data基本的使用方法如下所示，这里实现了一个简单的用户页面，通过两个开放数据域open-data组件显示了用户的头像和昵称。

＜template＞
  ＜view class="userHeader"＞
    ＜view  style="position:  relative;width:  25vw;height:  25vw;border-radius:
15vw;overflow:hidden;left: 37.5vw;top: 10vw;"＞
      ＜open-data type="userAvatarUrl"＞＜/open-data＞
    ＜/view＞
    ＜view style="position: relative;text-align: center;top:15vw;"＞
      ＜open-data style="color:#fff;font-size: 30rpx" type="userNickName"＞
＜/open-data＞
    ＜/view＞
  ＜/view＞
＜/template＞

页面可以增加一些简单的样式，如下所示。

＜style lang="less"＞
  .userHeader {
    width: 100vw;
    height: 60vw;
    background-color: #ababab;
  }
＜/style＞

这样就完成了一个最简单的用户界面，效果如图2-9所示。

图2-9 用户页面效果

2.5.2 HTML等网页支持：web-view

网页组件可以说是小程序在发展中的一个妥协，小程序原本存在的意义是对微信中难用的HTML应用的一种优化替代，而如果可以使用网页，那么就意味着大量的小程序还是会通过原有的网页系统来实现一个“伪小程序”，这就使得原本具有体验优势的小程序成了鸡肋，所以在一开始，小程序并没有任何支持HTML打开网页的需求。但最终小程序还是妥协了，推出了可以在小程序中进行网页操作的webview组件。

但是整个web-view并不是一个完全开放的webview，小程序官方依然不推荐在不必要的情况下嵌入网页，所以限制了对于页面的地址访问，我们无法访问未经验证归属权的域名地址，而且域名地址是需要HTTPS协议的。

这意味着，将web-view套一个壳就充当小程序浏览器或者将百度网页套在小程序中充当百度搜索的小程序将不会存在，这也意味着小程序的违规行为将会非常容易监管，出现违规信息的网站内容一定是归属于这个小程序本身的。

验证方法非常简单，在后台下载一个简单的文本文件，并将其放置在自己服务器的根目录中，通过路径可以访问到该文件的内容（也可以手动返回，一般为一个长度不等的字符串，一次性验证，等待验证成功后可以删除）。

web-view组件的使用也非常简单，如下所示。

＜web-view src="https://mp.weixin.qq.com/"＞＜/web-view＞

如果通过验证了，可以正常访问src中的网页地址。当然不仅如此，为了方便与网页的交互，以及小程序之间的数据传输和跳转，小程序提供了JSSDK 1.3.2，其中的接口可以返回小程序页面。

JS地址为https://res.wx.qq.com/open/js/jweixin-1.3.2.js，可以使用如下代码引入。

＜script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
＞＜/script＞

引入该JavaScript文件后，网页将会支持不同的API和小程序通信，如表2-11所示。

表2-11 网页和小程序的跳转

也就是说，可以通过引入该JavaScript文件来实现网页和小程序的切换。一般而言，为了适应普通的网页版本，人们需要先判断是否是小程序的环境，进而可以使用如下代码。

＜script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
＞＜/script＞

wx.miniProgram.getEnv（function（res）{
console.log（res.miniprogram）// true
if（res，miniprogram）{
    // 执行小程序部分
    wx.miniProgram.navigateTo（{url: '/path/index'}）
}else{
    // 执行普通网页部分
}
}）.

虽然引入了JSSDK，但是微信小程序并不能像公众号一样支持JSSDK中所有的API，而只是支持一部分，如表2-12所示。

表2-12 小程序支持的JSSDK中的API

注意：虽然web-view在某些时候非常好用，但是这个组件并不支持个人开发者和针对海外用户的小程序。

2.5.3 开发者的收入来源：ad

对于所有的小程序个人开发者而言，想要通过小程序盈利，有很多不同的方向，但其中有一条最方便的，就是小程序为开发者准备的广告业务。

用户在管理后台登录后，所使用小程序达到一定的条件，才可以打开流量主功能，并且申请在小程序的什么地方加入广告（这样广告的配图尺寸会存在变化）。个人需要提交个人资料，企业需要提交公户或者代理等资料，待腾讯后台审核通过后，会获得一个unit-id，如图2-10所示，就可以使用广告组件了。

图2-10 广告组件

在自己的小程序中使用该组件也非常简单，只需要单击“获取代码”按钮，如图2-11所示，将产生的代码段插入小程序合适的位置即可。

图2-11 插入代码

2.5.4 小程序引导关注公众号：official-account

official-account组件是新推出的，用于推广小程序和公众号联系的一个组件。这个组件的要求非常高，只有当小程序通过扫码进入时才能显示，用户单击才能快速关注公众号，当然这个功能仍然需要在后台设置，通过“设置”→“接口设置”→“公众号关注组件”设置要展示的公众号。

official-account的使用非常简单，没有任何属性和配置，只需要在场景中引用如下代码：

＜official-account＞＜/official-account＞

扫码也同样规定了相应的场景值，通过朋友圈转发小程序码的方式并不能触发这个场景值，具体支持的场景值如下。

● 当小程序从扫二维码场景（场景值1011）打开时。

● 当小程序从扫小程序码场景（场景值1047）打开时。

● 当小程序从聊天顶部场景（场景值1089）中的‘最近使用’内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态。

● 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态。

所有的场景值说明请在微信提供的网页中查看：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html。

注意：official-account组件可以套用在原生组件中。

上一章目录下一章