澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

[小程序支付] 微信小程序内嵌网页web-view开拓教程
分类:网页制作

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

2018/08/02 · JavaScript · 小程序

原稿出处: NeoPasser   

小程序以后进一步流行,可是集团的成都百货上千品种都是用网页写的,小程序语法不匹配原生网页,使得旧有项目搬迁至小程序代价极高。

小程序在此之前开放了webview作用,能够说是网页应用的一大福音了,但是微信的webview有一点点坑,那篇作品正是列举一下本人在开拓进度中境遇的局地主题材料以及本人找到的片段减轻方案。

依据厂家事务供给,在做Android开辟的还要,还得同步进行另三个种类的微信小程序开荒,不能,公司调节,节约本钱,研究开发也收缩了数不清人,只得边学边开垦...

为了方便开拓者灵活配置小程序,微信小程序开放了内嵌网页技术。那表示小程序的内容不再局限于pages和large,大家得以依附内嵌网页丰裕小程序的故事情节。上面附上详细的付出教程(含录像操作以及注意事项)

相见的难题

  1. openid登入难题
  2. webview动态src
  3. 付出功用
  4. 享用功效
  5. 环视普通二维码跳转特定页面
  6. 回到按键缺点和失误难题

但是微信三月公布了小程序帮衬web-view的音讯,让此番开辟减了无数的职业量,重倘使Bluetooth设备的数量收罗及上传

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

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

澳门太阳娱乐集团官网 1

2) 侧边-设置-开荒设置-业务域名-配置

澳门太阳娱乐集团官网 2

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

澳门太阳娱乐集团官网 3

4) 填写小程序职业域名,域名需ICP备案

澳门太阳娱乐集团官网 4

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

澳门太阳娱乐集团官网 5

6) 小程序职业域名配置完毕

澳门太阳娱乐集团官网 6

7) 展开微信开采者工具,加多小程序项目

澳门太阳娱乐集团官网 7

8) 踏入小程序调节和测量试验,点击尾巴部分导航-外链页page10001,左侧找到page壹仟1.wxml,删除原有代码,插入

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

澳门太阳娱乐集团官网 8

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

备考:此处开采者需创新到教程库版本1.6.4

澳门太阳娱乐集团官网 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来区分客商的独一性,因为假使是同三个微信开放平台帐号下的位移选拔、网址选用和大伙儿帐号,客户的unionid是独一的。换句话说,同一客户,对同一个微信开放平台下的不及接纳,unionid是平等的。

做完以上步骤,就足以调用小程序api wx.getUserInfo() 来博取客商信息了,此步骤要求打开后台音讯解密进程,在此就不再赘言,结合小程序api文档操作就好。

获得到unioid之后,将unionid信息拼接到src就可以张开网页登入操作了(前提是网页能够用跳转链接的措施登入,类似民众号页面获得openid的款型)。

  • web-view

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

1)业务域名需ICP备案,新域名备案24小时后就可以配置,域名不协理IP地址及端口号

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

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

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=' + encodeUGL450IComponent(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. 每种小程序账号仅援助配置贰拾贰个域名,种种域名最多绑定十多个小程序,每种小程序一年内最多帮衬修改域名肆拾六遍

分享作用

小程序直接分享的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 + '?'

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

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

除了这几个之外分享功用之外,小程序还足以经过安顿,完毕扫描普通二维码跳转特定页面包车型大巴功力。

以下是微信对此成效的介绍

为了便于小程序开垦者更简便易行地拓展小程序,宽容线下已部分二维码,微信公众平台开放扫描普通链接二维码跳转小程序工夫。

职能介绍

平凡链接二维码,是指开采者使用工具对网页链接举办编码后生成的二维码。

线下商家可不需改造线下二维码,在小程序后台达成都部队署后,就可以在顾客扫描普通链接二维码时展开小程序,使用小程序的魔法。
对于平日链接二维码,近期支撑采纳微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码准则

据书上说二维码跳转法则,开垦者要求填写需求跳转小程序的二维码准则。须要如下:

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

回到按键缺点和失误难题

一旦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" // 错误信息页面
  ],

一点也不细略,一行代码化解,小程序中的web-view会自动占据整个页面,所以不可能在web-view上再覆盖view

参照链接

  1. webview文档
  2. 小程序unionid介绍
  3. unionid获得格局

    2 赞 2 收藏 评论

澳门太阳娱乐集团官网 10

  1. 顾客能够因此<web-view src="
  2. 网页能够运用wx.miniProgram.navigateTo、wx.miniProgram.navigateBack等接口调节小程序的跳转,并传值
  3. 网页能够调用JSSDK钦赐的js方法
  4. 客商分享时可获取当前web-view的url,即在onShareAppMessage回调中回到webViewUrl参数。 示例代码:
Page({ onShareAppMessage { console.log(options.webViewUrl) }})
  1. ios若jssdk接口调用无响应,可在<web-view />的src后拉长#wechat_redirect试试
  2. web-view空白难点,请晋级微信顾客端到 6.5.16
  3. web-view不帮衬支付

最先的作品:简书ThinkinLiu 博客: IT老五ps: 初学小程序,精晓还不深,只能写写那一个浅显的东西,恐怕具备遗漏或不当,希望能建议,后续有越多少深度入,会进展局部补给

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:[小程序支付] 微信小程序内嵌网页web-view开拓教程

上一篇:CSS布局奇技淫巧:宽度自适应 下一篇:【澳门太阳娱乐集团官网】浅谈Web自适应
猜你喜欢
热门排行
精彩图文