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

2018/08/02 · JavaScript
· 小程序

初稿出处: NeoPasser   

小程序以后更是流行,不过专营商的好多门类都以用网页写的,小程序语法不匹配原生网页,使得旧有项目搬迁至小程序代价很高。

小程序从前开放了webview功用,能够说是网页应用的第一次全国代表大会福音了,可是微信的webview有部分坑,那篇小说正是列举一下自家在开发进度中蒙受的一些题材以及自作者找到的一些消除方案。

依据商户工作供给,在做Android开发的还要,还得同步实行另贰个品种的微信小程序支付,不可能,公司调整,节约费用,研究开发也减小了诸四人,只得边学边开发…

为了方便开发者灵活安顿小程序,微信小程序开放了内嵌网页能力。那象征小程序的剧情不再局限于pages和large,大家得以依靠内嵌网页丰盛小程序的始末。上面附上详细的开发教程(含录像操作以及注意事项)

  web-view 是1个足以承接 web 网页的容器,当 WXML 文件中存在 web-view
组件时,别的零件会活动全部失效,而且 web-view
承载的零件会自行铺满小程序的万事页面。别的零件的内容将不再展现。

遇上的题材

  1. openid登录难题
  2. webview动态src
  3. 开发成效
  4. 【ca88会员登录】微信小程序中的,网页程序迁移至微信小程序web。享用成效
  5. 围观普通二维码跳转特定页面
  6. 回到按钮缺失难题

可是微信3月发表了小程序辅助web-view的音讯,让这次开发减了无数的工作量,首假若蓝牙( Bluetooth® )设备的数额收集及上传

一 、小程序内嵌网页web-view教程

1) 微信公众平台,登录小程序账号

ca88会员登录 1

2) 左边-设置-开发设置-业务域名-配置

ca88会员登录 2

3) 小程序管理员微信扫码

ca88会员登录 3

4) 填写小程序工作域名,域名需ICP备案

ca88会员登录 4

5) 下载校检文件上传至服务器钦命目录,保存

ca88会员登录 5

6) 小程序工作域名配置完毕

ca88会员登录 6

7) 打开微信开发者工具,添加小程序项目

ca88会员登录 7

8)
进入小程序调节和测试,点击尾部导航-外链页page一千1,右边找到page一千1.wxml,删除原有代码,插入

备考:此处外链页为空白页,便于借助webview组件插入网页内容作对照

ca88会员登录 8

9)ctrl+s保存查阅小程序内嵌网页得内容

备考:此处开发者需立异到教程库版本1.6.4

ca88会员登录 9

运用情势:

openid登录难点

微信webview的选取方法很简单,只要如下设置src就足以显得具体的网站了。

<!– wxml –> <!– 指向微信公众平台首页的web-view –>
<web-view src=”;

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来分别用户的唯一性,因为假如是同3个微信开放平台帐号下的移动使用、网站选择和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同3个微信开放平台下的不比选拔,unionid是相同的。

做完以上步骤,就足以调用小程序api wx.getUserInfo()
来得到用户信息了,此步骤供给进行后台音讯解密进程,在此就不再赘述,结合小程序api文档操作就好。

取得到unioid之后,将unionid音信拼接到src就足以开始展览网页登录操作了(前提是网页能够用跳转链接的方法登录,类似群众号页面得到openid的款型)。

  • web-view

二 、小程序web-view注意事项

1)业务域名需ICP备案,新域名备案24钟头后即可配置,域名不支持IP地址及端口号

2)下载校检文件,上传至服务器钦定根目录

3)开发者工具最新版-基础库版本1.6.4

  <web-view src=”;

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 = ”
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>

于是乎,就去打听了一晃web-view

叁 、附上这一次小程序web-view内嵌网页测试包及录像教程

webview录像演示:https://www.zhihu.com/question/67564075/answer/258773999

注意事项:

开发功效

webview里面能够经过jssdk来落到实处部分小程序作用,但无法平昔调用小程序的支出功效,这时候我们就要求转变一下政策了:

  1. 在网页里引入微信jssdk
  2. 在网页必要倡导支付的地点,调用跳转页面包车型大巴接口,控制小程序跳转到小程序的开销页面(这么些要在小程序里单独写的),跳转的时候,须求把订单的有的新闻都凑合到链接里,订单新闻由后台重临,需求通过微信支付系统的相会下单接口,具体参看支付文书档案。
  3. 跳转到小程序开发页面后,由小程序页面发起支付,支付到位后跳转回webview页面,通过事先设置的动态src,控制webview跳转到特定的页面。

JavaScript

// 网页引入jssdk // 网页发起支付 wx.miniProgram.navigateTo({ //
payData由后台再次来到,首假设内需统一下单平台的prepay_id url:
‘../pay/index?data=’ + encodeU揽胜IComponent(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)
    }
  }
  1. 个人开发者不能够采取
  2. 亟待配备域名,且域名需ICP备案24钟头以上,不支持ip及端口
  3. 需使用https
  4. 各种小程序账号仅支持配置21个域名,每种域名最多绑定贰十个小程序,各样小程序一年内最多帮忙修改域名四十七遍

  1. src
属性的值是三个网页链接,且该链接必须在小程序管理后埃德蒙顿的域名白名单中。

分享效用

小程序直接分享的webview所在的页面,倘使急需添加页面参数,那大家就须要处理一下了。

  1. webview内是无法一直发起分享的,必要先用wx.miniProgram.postMessage接口,把必要分享的音信,推送给小程序;推送给小程序的音信不是实时处理的,而是用户点击了享受按钮之后,小程序才回到读取的,那就须求各种须求分享的页面再进入的时候就发起wx.miniProgram.postMessage推送分享消息给小程序。
  2. 小程序页面通过bindmessage绑定的函数读取post新闻,分享的音信会是3个列表,大家取最终贰个享受就好,把分享消息处理好,存到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 + ‘?’

  • getApp().globalData.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
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
    })
},

  2. 用户在享受是足以获取当前页面 <web-view> 的 src
的值,在页面包车型地铁 onShareAppMessage 事件中可以获取到该值。

扫描普通二维码跳转特定页面

除去享受效能之外,小程序还足以由此配备,实现扫描普通二维码跳转特定页面包车型客车效益。

以下是微信对此意义的牵线

为了便于小程序开发者更便捷地拓宽小程序,包容线下已部分二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。

成效介绍

万般链接二维码,是指开发者使用工具对网页链接实行编码后生成的二维码。

线下商家可不需更换线下二维码,在小程序后台完结布局后,即可在用户扫描普通链接二维码时打开小程序,使用小程序的效率。
对此一般链接二维码,近日支撑采纳微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码规则

依照二维码跳转规则,开发者需求填写须要跳转小程序的二维码规则。须要如下:

  1. 二维码规则的域名须通过ICP备案的说明。
  2. 援助http、https、ftp开首的链接(如:、)。
  3. 一个小程序帐号可配备不多于11个二维码前缀规则。

前缀占用规则

开发者可选拔是或不是占用符合二维码匹配规则的全体子规则。如采取占用,则别的帐号不可申请选择满足该前缀匹配规则的任何子规则。

如:若开发者A配置二维码规则:,并接纳“占用全体子规则“,别的开发者将不得以安顿知足前缀匹配的刘雯则如。

自个儿引进的格局

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(”) == -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)
    }
}
<web-view src="https://www.itlao5.com"></web-view>

    即:onShareAppMessage:function( options ){

再次来到按钮缺点和失误难点

借使web页面是在第3个页面包车型大巴话,那时候会有一个题材,小程序的回来按钮就从未有过了,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" // 错误信息页面
  ],

很简短,一行代码解决,小程序中的web-view会自动占据整个页面,所以无法在web-view上再覆盖view

        console.log( options.webVIewUrl );

网站地图xml地图