来自 业界快讯 2019-12-06 22:31 的文章
当前位置: 118kj开奖现场 > 业界快讯 > 正文

网页程序迁移至微信小程序web

网页程序迁移至Wechat小程序web-view详整

2018/08/02 · JavaScript · 小程序

原稿出处: NeoPasser   

小程序今后特别流行,不过企业的大多品类都以用网页写的,小程序语法不宽容原生网页,使得旧有项目搬迁至小程序代价相当高。

小程序此前开放了webview效用,可以说是网页应用的一大福音了,不过Wechat的webview有点坑,那篇作品便是列举一下笔者在支付进度中相遇的后生可畏都部队分主题素材以致本身找到的蓬蓬勃勃对解决方案。

遇到的难点

  1. openid登陆难点
  2. webview动态src
  3. 支出作用
  4. 享用效能
  5. 围观普通二维码跳转特定页面
  6. 回到按键缺失难题

openid登入难题

Wechatwebview的使用办法很简短,只要如下设置src就足以显得具体的网址了。

<!-- wxml --> <!-- 指向微信徒人平台首页的web-view --> <web-view src=";

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

Wechat景况里的广大网页都是用页面要落到实处网址的登入功用,只要把登录的消息,比方openid恐怕此外信息拼接到src里就好了。

那边有个难题,大伙儿号的账号种类平日是以openid来推断唯蓬蓬勃勃性的,小程序是足以博得openid的,可是小程序的openid和原大伙儿号之类的openid是不等同的,供给将原本的openid账号体系进级为unionid账号连串。

以下是Wechat对unionid的介绍

获得客户基本信息(UnionID机制卡塔尔国

在关怀者与大众号爆发音信人机联作后,公众号可获取关心者的OpenID(加密后的Wechat号,每一种顾客对每种群众号的OpenID是唯后生可畏的。对于区别公众号,同生机勃勃客户的openid不一致)。公众号可透过本接口来遵照OpenID获取顾客大旨音讯,包罗别名、头像、性别、所在城市、语言和关怀时间。

请小心,尽管开采者有在八个群众号,或在民众号、移动接收之间联合顾客帐号的急需,要求前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可利用UnionID机制来满意上述须要。

UnionID机制表明:

开辟者可透过OpenID来获得顾客基本消息。极度须求潜心的是,假如开垦者具有四个运动应用、网址使用和公众帐号,可经过获取客户基本新闻中的unionid来区分客户的唯生龙活虎性,因为后生可畏旦是同二个Wechat开放平台帐号下的活动应用、网址使用和群众帐号,客户的unionid是唯大器晚成的。换句话说,同黄金年代客户,对同叁个Wechat开放平台下的例外应用,unionid是如出风华正茂辙的。

做完以上步骤,就可以调用小程序api wx.getUserInfo(卡塔尔(英语:State of Qatar)来拿到顾客消息了,此步骤必要举行后台音讯解密进程,在这里就不再赘述,结合小程序api文档操作就好。

得到到unioid之后,将unionid新闻拼接到src就能够张开网页登入操作了(前提是网页能够用跳转链接的秘诀登入,相通大伙儿号页面得到openid的款式卡塔尔国。

webview动态src

Wechat的webview有个坑的地点,不会动态的监听src的变型,那就引致了三个标题,要透过校正src实现页面跳转就不得以了。
自家尝试了生机勃勃部分措施之后,找到了贰个实施方案:

Wechatwebview在页面load的时候会加载叁次webview,大家就应用那一个特点来促成动态src难题。

  1. 首先把要跳转的链接信息设置成全局变量,要转移src的时候,先把要src以’?‘拆分为链接和参数两部分,存入全局函数,再调用onLoad就足以兑现webview刷新了。
  2. 页面跳转时,大家也急需src的动态刷新,所以要把链接新闻存入全局函数;页面跳转时,onShow函数会被调用,这个时候再调用二次onLoad就足以了。

data: { url: '', loaded: false } // 小程序js里的onLoad函数能够写成这么 onLoad: function (卡塔尔国 { this.setData({ url: getApp(卡塔尔(英语:State of Qatar).globalData.urlToken + '?' + getApp(卡塔尔.globalData.urlData }卡塔尔(قطر‎ }, changUrl: function (卡塔尔(英语:State of Qatar) { getApp(卡塔尔.globalData.urlToken = '' getApp(卡塔尔(قطر‎.globalData.urlToken = 'a=1&b=2' // 直接调用onLoad,就会兑现src的刷新 this.onLoad(卡塔尔(英语:State of Qatar) }, onShow: function (卡塔尔国 { if (!this.data.loaded卡塔尔(英语:State of Qatar) { // 第叁遍不运转 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>

付出功效

webview里面能够经过jssdk来促成都部队分小程序功效,但不可能直接调用小程序的支出功用,当时大家就必要调换一下政策了:

  1. 在网页里引进微信jssdk
  2. 在网页须求倡导支付之处,调用跳转页面包车型大巴接口,调控小程序跳转到小程序的支付页面(这几个要在小程序里单独写的),跳转的时候,须要把订单的部分音信都凑合到链接里,订单消息由后台再次回到,须要经过微信支付系统的联合下单接口,具体参看支付文书档案。
  3. 跳转到小程序支付页面后,由小程序页面发起支付,支付到位后跳转回webview页面,通过事情未发生前安装的动态src,调整webview跳转到特定的页面。

JavaScript

// 网页引进jssdk // 网页发起支付 wx.miniProgram.navigateTo({ // payData由后台再次来到,首尽管要求统一下单平台的prepay_id url: '../pay/index?data=' + encodeUENCOREIComponent(JSON.stringify(payData卡塔尔卡塔尔国 }卡塔尔(英语:State of Qatar) // Wechat支付页面 onLoad: function (option卡塔尔(قطر‎ { let page = this try { let data = JSON.parse(option.data卡塔尔 if (!data || !data.prepay_id卡塔尔(英语:State of Qatar) { console.error('支付参数错误,请稍后重试', data卡塔尔(英语:State of Qatar) } 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', }卡塔尔(英语:State of Qatar) }, fail: function (res卡塔尔(英语:State of Qatar) { getApp(卡塔尔(قطر‎.globalData.urlToken = `payError.html` // 支付退步 getApp(卡塔尔国.globalData.urlData = 'data=payErrorData' wx.navigateTo({ url: '/page/home/index', }卡塔尔(英语:State of Qatar) }, complete: function (res卡塔尔(قطر‎{ } }卡塔尔(英语:State of Qatar) } catch (e卡塔尔国 { console.error('支付错误', e卡塔尔(英语:State of Qatar) } }

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)
    }
  }

享受功用

小程序直接共享的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卡塔尔(英语:State of Qatar) return } let tokens = info.link.split('?'卡塔尔(英语:State of Qatar) 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'卡塔尔(英语:State of Qatar) { // 来自页面内转载按键 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卡塔尔(英语:State of Qatar) { // 转载成功 }, 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
    })
},

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

除了这么些之外享受作用之外,小程序还足以因此布置,实现扫描普通二维码跳转特定页面的效果与利益。

以下是Wechat对此意义的牵线

为了便于小程序开采者更省心地扩充小程序,包容线下已部分二维码,Wechat民众平台开放扫描普通链接二维码跳转小程序技巧。

作用介绍

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

线下商家可不需更改线下二维码,在小程序后台完结结构后,就可以在客户扫描普通链接二维码时张开小程序,使用小程序的功能。
对此普通链接二维码,这段日子帮助使用Wechat“扫一扫”或Wechat内长按识别二维码跳转小程序.

二维码准则

根据二维码跳转法则,开垦者供给填写要求跳转小程序的二维码准绳。须要如下:

  1. 二维码准绳的域名须通过ICP备案的证实。
  2. 支撑http、https、ftp开端的链接(如:、)。
  3. 多个小程序帐号可配备没有多少于十二个二维码前缀法规。

前缀占用法则

开辟者可筛选是还是不是占用符合二维码相配法则的全体子准则。如选取占用,则别的帐号不可申请使用满意该前缀相配准则的其余子法规。

如:若开荒者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卡塔尔(英语:State of Qatar) if (option.urlToken卡塔尔 { getApp(卡塔尔.globalData.urlToken = option.urlToken } if (option.urlData卡塔尔(قطر‎ { getApp(卡塔尔.globalData.urlData = option.urlData } this.setData({ url: getApp(卡塔尔(英语:State of Qatar).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页面是在第二个页面的话,这时会有贰个主题素材,小程序的归来按键就从未了,webview不可能使用Wechat的回来按键了,那时候只要在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" // 错误信息页面
  ],

仿照效法链接

  1. webview文档
  2. 小程序unionid介绍
  3. unionid获得情势

    2 赞 2 收藏 评论

图片 1

本文由118kj开奖现场发布于业界快讯,转载请注明出处:网页程序迁移至微信小程序web

关键词: