菜单

微信小程序 解析网页内容详解及实例

2018年11月15日 - JavaScript

网页程序迁移至微信小程序web-view详解

2018/08/02 · JavaScript
· 小程序

初稿出处: NeoPasser   

有点程序现在更进一步流行,但是公司之成千上万型还是用网页写的,小程序语法不般配原生网页,使得原本有品种搬迁到略程序代价十分高。

稍微序之前开放了webview功能,可以说凡是网页应用之同颇福音了,但是微信的webview有局部坑,这篇稿子就是列举一下自我以付出进程遭到相遇的部分题材和本人找到的有些化解方案。

微信小程序 解析网页内容详解

逢的题材

  1. openid登录问题
  2. webview动态src
  3. 出功能
  4. 分享功能
  5. 扫描普通二维码跳转特定页面
  6. 回到按钮缺失问题

近日于描绘一个爬虫,需要拿网页进行剖析供微信小序采取。文字和图解析都吓说,小序也有对应之text和image标签可以呈现。而再扑朔迷离的,比如表格,则于吃力,不管是服务端解析还是多少序呈现都生困难,也非常麻烦挂有情况。于是我思,将表格对应之HTML代码转成为图,不失为一种变更之方。

openid登录问题

微信webview的运用方法好简单,只要如下设置src就可以显得具体的网站了。

<!– wxml –> <!– 指向微信公众平台首页的web-view –>
<web-view src=”https://mp.weixin.qq.com/"&gt;&lt;/web-view&gt;

1
2
3
<!– wxml –>
<!– 指向微信公众平台首页的web-view –>
<web-view src="https://mp.weixin.qq.com/"></web-view>

微信环境里的洋洋网页都是为此页面要贯彻网站的报到功能,只要把登录的音讯,比如openid或者其它信息集成接到src里即使好了。

此出个问题,公众号的账号体系一般是因openid来判定唯一性的,小程序是足以取openid的,但是有些序的openid和原公众号之类的openid是勿均等的,需要以本来的openid账号体系提升吗unionid账号体系。

以下是微信对unionid的介绍

赢得用户中心信息(UnionID机制)

当关注者与民众号发出信息交互后,公众号只是落关注者的OpenID(加密后底微信号,每个用户对每个公众号的OpenID是绝无仅有的。对于不同公众号,同一用户的openid不同)。公众号只是透过本接口来因OpenID获取用户基本信息,包括昵称、头如、性别、所在城市、语言与体贴时间。

吁小心,如果开发者有以差不多单公众号,或在公众号、移动采用内联合用户帐号的求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号晚,才可采取UnionID机制来满足上述要求。

UnionID机制说明:

开发者可由此OpenID来博用户中心信息。特别需要小心的是,如果开发者拥有多个移动采用、网站采取和大众帐号,可透过取得用户中心信息遭到的unionid来分别用户之唯一性,因为只要是和一个微信开放平台帐号下的动使用、网站以与大众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下之不等应用,unionid是一模一样的。

开了以上步骤,就好调用小程序api wx.getUserInfo()
来获取用户信息了,此步骤需要进行后台信息解密过程,在这就不再赘言,结合小程序api文档操作就好。

得到到unioid之后,将unionid信息并接到src就足以拓展网页登录操作了(前提是网页可以据此越反链接的法登录,类似群众号页面获得openid的样式)。

此地我们利用node-webshot模块,它对PhantomJS进行了轻量封装,可以轻松地拿网页为截图形式保留下来。

webview动态src

微信的webview有个坑的地方,不见面动态的监听src的变更,这便导致了一个题目,要通过改变src实现页面跳反不怕无可以了。
本身尝试了有计之后,找到了一个解决方案:

微信webview于页面load的时节会加载一潮webview,我们即便使用这个特点来贯彻动态src问题。

  1. 首先把要跳转的链接信息设置成全局变量,要改成src的下,先管要src以’?‘拆分为链接和参数两部分,存入全局函数,再调用onLoad就足以兑现webview刷新了。
  2. 页面跳反时,我们也欲src的动态刷新,所以要是将链接信息存入全局函数;页面跳反时,onShow函数会受调用,这时候再调用一糟onLoad就好了。

data: { url: ”, loaded: false } // 小程序js里的onLoad函数可以描绘成这么
onLoad: function () { this.setData({ url: getApp().globalData.urlToken +
‘?’ + getApp().globalData.urlData }) }, changUrl: function () {
getApp().globalData.urlToken = ‘https://www.example.com’
getApp().globalData.urlToken = ‘a=1&b=2’ //
直接调用onLoad,就见面促成src的刷新 this.onLoad() }, onShow: function () {
if (!this.data.loaded) { // 第一次无运行 this.setData({ loaded: true })
return } // 直接调用onLoad,就见面兑现src的刷新 this.onLoad() } //
wxml可以写成这样 <web-view src=”{{url}}”></web-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
data: {
    url: ”,
    loaded: false
}
// 小程序js里的onLoad函数可以写成这样
onLoad: function () {
    this.setData({
      url: getApp().globalData.urlToken + ‘?’ +  getApp().globalData.urlData
    })
},
changUrl: function () {
    getApp().globalData.urlToken = ‘https://www.example.com’
    getApp().globalData.urlToken = ‘a=1&b=2’
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不运行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
  }
 
// wxml可以写成这样
<web-view src="{{url}}"></web-view>

首先安装Node.js和PhantomJS,然后新建一个js文件,加载node-webshot模块:

开发功能

webview里面可以经jssdk来落实有略带序功能,但切莫能够直接调用小程序的开发功能,这时候我们尽管需转变一下策略了:

  1. 当网页里引入微信jssdk
  2. 在网页需要倡导支付的地方,调用跳转页面的接口,控制小序跳反至小程序的开支页面(这个只要于微序里单独写的),跳转的时,需要将订单的组成部分信息都凑合到链接里,订单信息由后台返回,需要通过微信支付系统的集合下单接口,具体参看支付文档。
  3. 逾反至有些序支付页面后,由小序页面发起支付,支付成功后超越反回webview页面,通过之前设置的动态src,控制webview跳转到特定的页面。

JavaScript

// 网页引入jssdk // 网页发起支付 wx.miniProgram.navigateTo({ //
payData由后台返回,主要是急需统一下独自平台的prepay_id url:
‘../pay/index?data=’ + encodeURIComponent(JSON.stringify(payData)) }) //
微信支付页面 onLoad: function (option) { let page = this try { let data
= JSON.parse(option.data) if (!data || !data.prepay_id) {
console.error(‘支付参数错误,请稍晚再行试’, data) } wx.requestPayment({
timeStamp: ” + data.timestamp, nonceStr: data.nonceStr, package:
‘prepay_id=’ + data.prepay_id, paySign: data.paySign, signType:
data.signType, success: function (res) { getApp().globalData.urlToken =
`paySuccess.html` // 支付成功 getApp().globalData.urlData =
‘data=paySuccessData’ wx.navigateTo({ url: ‘/page/home/index’, }) },
fail: function (res) { getApp().globalData.urlToken = `payError.html`
// 支付失败 getApp().globalData.urlData = ‘data=payErrorData’
wx.navigateTo({ url: ‘/page/home/index’, }) }, complete: function (res)
{ } }) } catch (e) { console.error(‘支付错误’, e) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 网页引入jssdk
 
// 网页发起支付
wx.miniProgram.navigateTo({
    // payData由后台返回,主要是需要统一下单平台的prepay_id
    url: ‘../pay/index?data=’ + encodeURIComponent(JSON.stringify(payData))
})
// 微信支付页面
onLoad: function (option) {
    let page = this
    try {
      let data = JSON.parse(option.data)
      if (!data || !data.prepay_id) {
        console.error(‘支付参数错误,请稍后重试’, data)
      }
      wx.requestPayment({
        timeStamp: ” + data.timestamp,
        nonceStr: data.nonceStr,
        package: ‘prepay_id=’ + data.prepay_id,
        paySign: data.paySign,
        signType: data.signType,
        success: function (res) {
          getApp().globalData.urlToken = `paySuccess.html`
          // 支付成功
          getApp().globalData.urlData = ‘data=paySuccessData’
          wx.navigateTo({
            url: ‘/page/home/index’,
          })
        },
        fail: function (res) {
          getApp().globalData.urlToken = `payError.html`
          // 支付失败
          getApp().globalData.urlData = ‘data=payErrorData’
          wx.navigateTo({
            url: ‘/page/home/index’,
          })
        },
        complete: function (res) {
        }
      })
    } catch (e) {
      console.error(‘支付错误’, e)
    }
  }
const webshot = require('webshot');

分享功能

稍微程序直接分享的webview所在的页面,如果用丰富页面参数,那咱们就算待处理一下了。

  1. webview内是勿能够直接发起分享的,需要事先用wx.miniProgram.postMessage接口,把用分享的消息,推送给小序;推送给小程序的信不是实时处理的,而是用户点击了享受按钮之后,小程序才回来读取的,这就是要求每个需要分享的页面重新上的早晚便倡导wx.miniProgram.postMessage推送分享信息给多少序。
  2. 微序页面通过bindmessage绑定的函数读取post信息,分享的信息会是一个列表,我们得最后一个分享就好,把分享信息处理好,存到data里面以便下一样步onShareAppMessage调用。
  3. 用户点击分享时,会触发onShareAppMessage函数,在内部安装好相应的享用信息就好了。
  4. onload函数有一个option参数的,可以读取页面加载时url里带的参数,这时要本着原本的onload函数进行改建,实现自option里读取链接信息。

JavaScript

// 网页wx.miniProgram.postMessage wx.miniProgram.postMessage({ data: {
link: shareInfo.link, title: shareInfo.title, imgUrl: shareInfo.imgUrl,
desc: shareInfo.desc } }) // 小程序index wxml设置 <web-view
src=”{{url}}” bindmessage=”bindGetMsg”></web-view> //
小程序index js bindGetMsg: function (e) { if (!e.detail) { return } let
list = e.detail.data if (!list || list.length === 0) { return } let info
= list[list.length – 1] if (!info.link) {
console.error(‘分享信息错误’, list) return } let tokens =
info.link.split(‘?’) this.setData({ shareInfo: { title: info.title,
imageUrl: info.imgUrl, path:
`/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`
} }) }, onShareAppMessage: function (res) { if (res.from === ‘button’) {
// 来自页面内转发本钮 console.log(res.target) } let that = this return {
title: that.data.shareInfo.title, path: that.data.shareInfo.path,
imageUrl: that.data.shareInfo.imageUrl, success: function (res) { //
转发成 }, fail: function (res) { // 转发失败 } } }, onLoad: function
(option) { if (option.urlToken) { getApp().globalData.urlToken =
option.urlToken } if (option.urlData) { getApp().globalData.urlData =
option.urlData } this.setData({ url: getApp().globalData.urlToken + ‘?’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// 网页wx.miniProgram.postMessage
wx.miniProgram.postMessage({
  data: {
    link: shareInfo.link,
    title: shareInfo.title,
    imgUrl: shareInfo.imgUrl,
    desc: shareInfo.desc
  }
})
// 小程序index wxml设置
<web-view src="{{url}}" bindmessage="bindGetMsg"></web-view>
// 小程序index js
bindGetMsg: function (e) {
    if (!e.detail) {
      return
    }
    let list = e.detail.data
    if (!list || list.length === 0) {
      return
    }
    let info = list[list.length – 1]
    if (!info.link) {
      console.error(‘分享信息错误’, list)
      return
    }
    let tokens = info.link.split(‘?’)
    this.setData({
      shareInfo: {
        title: info.title,
        imageUrl: info.imgUrl,
        path: `/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`
      }
    })
},
onShareAppMessage: function (res) {
    if (res.from === ‘button’) {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    let that = this
    return {
      title: that.data.shareInfo.title,
      path: that.data.shareInfo.path,
      imageUrl: that.data.shareInfo.imageUrl,
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
},
onLoad: function (option) {
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + ‘?’ +  getApp().globalData.urlData
    })
},

概念选项:

环视普通二维码跳转特定页面

除开享受功能之外,小序还好透过部署,实现扫描普通二维码跳转特定页面的功能。

以下是微信对这意义的介绍

以有利于小程序开发者重新便利地放小序,兼容线下已有些二维码,微信公众平台开放扫描普通链接二维码跳反小序能力。

功用介绍

常备链接二维码,是凭借开发者使用工具对网页链接进行编码后生成的次维码。

丝下商户可免需要更换线下二维码,在微序后台就布局后,即可在用户扫描普通链接二维码时打开小序,使用小程序的职能。
对普通链接二维码,目前支持使用微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码规则

依据二维码跳转规则,开发者需要填需要跨越反小序的老二维码规则。要求如下:

  1. 二维码规则之域名须通过ICP备案的求证。
  2. 支撑http、https、ftp开头的链接(如:http://wx.qq.com、https://wx.qq.com/mp/、https://wx.qq.com/mp?id=123)。
  3. 一个稍程序帐号只是安排不多受10单二维码前缀规则。

前缀占用规则

开发者可选是否占用符合二维码匹配规则的所有子规则。如选择占用,则其它帐号不可申请以满足该前缀匹配规则的其他子规则。

如若:若开发者A配置二维码规则:https://wx.qq.com/mp?id=123,并选“占用所有子规则“,其他开发者将无得以安排满足前缀匹配的杜鹃则要https://wx.qq.com/mp?id=1234。

自我引进的方

webview实现方式

  1. 装跳转功能小序后台就可以设置,链接是分为四有些,路https://www.example.com/wxmin…。

    https://www.example.com 域名
    /wxmini/ 小程序前置规则,需要在服务器上建一个文件夹,并且把验证文件放在文件夹线
    home.html 需要跳转的网页页面
    a=1 跳转页面的参数
  2. 针对onload函数再展开拍卖,实现日常二维码跳转。

JavaScript

// 对index onLoad在开展处理 onLoad: function (option) {
this.resetOption(option) if (option.urlToken) {
getApp().globalData.urlToken = option.urlToken } if (option.urlData) {
getApp().globalData.urlData = option.urlData } this.setData({ url:
getApp().globalData.urlToken + ‘?’ + getApp().globalData.urlData }) },
resetOption: function (option) { if (!option) { return } if (option.q) {
option.q = decodeURIComponent(option.q) if
(option.q.indexOf(‘https://www.example.com/wxmini/’) == -1) { return }
let tmp = option.q.replace(‘/wxmini’, ”) let tmps = tmp.split(‘?’)
option.urlToken = tmps[0] option.urlData = tmps[1] } else {
option.urlData = decodeURIComponent(option.urlData) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 对index onLoad在进行处理
onLoad: function (option) {
    this.resetOption(option)
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + ‘?’ +  getApp().globalData.urlData
    })
},
resetOption: function (option) {
    if (!option) {
      return
    }
    if (option.q) {
      option.q = decodeURIComponent(option.q)
      if (option.q.indexOf(‘https://www.example.com/wxmini/’) == -1) {
        return
      }
      let tmp = option.q.replace(‘/wxmini’, ”)
      let tmps = tmp.split(‘?’)
      option.urlToken = tmps[0]
      option.urlData = tmps[1]
    } else {
      option.urlData = decodeURIComponent(option.urlData)
    }
}
const options = {
  // 浏览器窗口
  screenSize: {
    width: 755,
    height: 25
  },
  // 要截图的页面文档区域
  shotSize: {
    height: 'all'
  },
  // 网页类型
  siteType: 'html'
};

返按钮缺失问题

如若web页面是当率先独页面的话,这时候会有一个问题,小程序的归来按钮就从不了,webview无法使用微信的回来按钮了,这时候若在webview页面前多加一个跳转页面就吓了(第一单页面吗可装成获用户权限的页面,不过自己觉得这样感受不好,也未是所有页面还如用户得到了权才好使)

说到底的页面层级

JavaScript

“pages”: [ “page/index/index”, //
首页,处理onload里的option内容,为了回按钮设置的 “page/home/index”, //
webview所在的页面 “page/auth/index”, // 获取用户权限的页面
“page/pay/index”, // 支付页面 “page/error/index” // 错误信息页面 ],

1
2
3
4
5
6
7
"pages": [
    "page/index/index", // 首页,处理onload里的option内容,为了返回按钮设置的
    "page/home/index", // webview所在的页面
    "page/auth/index", // 获取用户权限的页面
    "page/pay/index", // 支付页面
    "page/error/index" // 错误信息页面
  ],

此间,浏览器窗口的涨幅要因网页情况客观设置,高度可以安装为一个颇有些之数值,然后页面文档区域之惊人肯定要是装为all,宽度默认为窗口宽度,这样虽得把表格以最小的尺寸完整截图。

参考链接

  1. webview文档
  2. 小程序unionid介绍
  3. unionid获得方式

    2 赞 2 收藏
    评论

图片 1

接下来,定义html字符串:

let html = "target rich text html code, eg: <table>...</table>";

顾,里面的HTML代码一定要是错过丢换行符,并以双双引号替换为单引号。

最后,截图:

webshot(html, 'demo.png', options, (err) => {
  if (err)
    console.log(`Webshot error: ${err.message}`);
});

诸如此类,就实现了自HTML代码到地方图片的更换,后续可以上传到七牛云等。不管是劳动端的解析,还是多少程序的见,都无呀难度了…

谢阅读,希望能帮及大家,谢谢大家对本站的支持!

汝可能感兴趣之篇章:

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图