菜单

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

2019年4月22日 - Html/Html5

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

而外分享功效之外,小程序还是可以透过布署,落成扫描普通二维码跳转特定页面包车型客车功用。

以下是微信对此功能的介绍

为了方便小程序开采者更轻巧地推广小程序,兼容线下已有个别2维码,微信公众平台开放扫描普通链接二维码跳转小程序技能。

效果介绍

一般说来链接二维码,是指开辟者使用工具对网页链接进行编码后生成的二维码。

线下商家可不需更改线下二维码,在小程序后台达成布局后,就能够在用户扫描普通链接2维码时展开小程序,使用小程序的功力。
对于普通链接2维码,近期支撑采用微信“扫1扫”或微信内长按识别二维码跳转小程序.

2维码规则

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

  1. 二维码规则的域名须通过ICP备案的辨证。
  2. 支持http、https、ftp起首的链接(如:http://wx.qq.comhttps://wx.qq.com/mp/、https://wx.qq.com/mp?id=123)。
  3. 2个小程序帐号可配备不多于11个2维码前缀规则。

前缀占用规则

开采者可采纳是不是占用符合二维码相配规则的全部子规则。如选用占用,则此外帐号不可申请选拔满意该前缀相称规则的其余子规则。

如:若开荒者A配置二维码规则:https://wx.qq.com/mp?id=123,并精选“占用全数子规则“,别的开垦者将不得以铺排满意前缀相配的孙菲菲则如https://wx.qq.com/mp?id=1234

作者推荐的章程

webview达成格局

  1. 安装跳转功用小程序后台就可以安装,链接是分为4部分,路https://www.example.com/wxmin…

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

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)
    }
}
  1. 私家开辟者无法运用
  2. 亟需安顿域名,且域名需ICP备案二四时辰以上,不协理ip及端口
  3. 需使用https
  4. 各种小程序账号仅协助配置十七个域名,每一种域名最多绑定1九个小程序,各类小程序一年内最多支持修改域名四17回

分享效能

小程序间接分享的webview所在的页面,若是要求增加页面参数,那大家就供给处理一下了。

  1. webview内是不可能直接发起分享的,须求先用wx.miniProgram.postMessage接口,把要求分享的新闻,推送给小程序;推送给小程序的新闻不是实时管理的,而是用户点击了分享开关之后,小程序才回去读取的,这将要求每个需求分享的页面再进来的时候就发起wx.miniProgram.postMessage推送分享消息给小程序。
  2. 小程序页面通过bindmessage绑定的函数读取post消息,分享的音讯会是三个列表,大家取最终1个享受就好,把分享音信管理好,存到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. 用户能够透过<web-view
    src=”http://itlao5.com/wp/archives/136"&gt;&lt;/web-view&gt;传参给web-view中的html
  2. 网页能够行使wx.miniProgram.navigateTo、wx.miniProgram.navigateBack等接口调节小程序的跳转,并传值
  3. 网页能够调用JSSDK钦赐的js方法
  4. 用户分享时可得到当前web-view的url,即在onShareAppMessage回调中回到webViewUrl参数。
    示例代码:

再次回到按键缺点和失误难题

若果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

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

2018/08/02 · JavaScript
· 小程序

最初的小说出处: NeoPasser   

小程序今后更是流行,可是集团的重重种类都以用网页写的,小程序语法不合作原生网页,使得旧有等级次序搬迁至小程序代价异常高。

小程序在此之前开放了webview成效,能够说是网页应用的一大福音了,不过微信的webview有一对坑,那篇文章就是列举一下本人在付出进度中相见的有的难题以及自个儿找到的局部缓慢解决方案。

只是微信一月表露了小程序接济web-view的消息,让本次开辟减了过多的职业量,主假诺蓝牙五.0设备的多寡搜聚及上传

参照链接

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

    2 赞 2 收藏
    评论

图片 1

支出成效

webview里面可以通过jssdk来贯彻部分小程序成效,但不可能一向调用小程序的成本作用,那时候我们就供给扭转一下陈设了:

  1. 在网页里引进微信jssdk
  2. 在网页需求倡导支付的地点,调用跳转页面包车型地铁接口,调节小程序跳转到小程序的开垦页面(这么些要在小程序里独自写的),跳转的时候,必要把订单的某些音信都凑合到链接里,订单音讯由后台重回,供给通过微信支付体系的统一下单接口,具体参看支付文书档案。
  3. 跳转到小程序支付页面后,由小程序页面发起支付,支付成功后跳转回webview页面,通过以前安装的动态src,调节webview跳转到特定的页面。

JavaScript

// 网页引进jssdk // 网页发起支付 wx.miniProgram.navigateTo({ //
payData由后台再次回到,首借使内需联合下单平台的prepay_id url:
‘../pay/index?data=’ + encodeU猎豹CS陆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. ios若jssdk接口调用无响应,可在<web-view
    />的src后增加#wechat_redirect试试
  2. web-view空白难点,请进级微信客户端到 6.五.1陆
  3. web-view不协理开拓

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来分别用户的唯一性,因为只倘诺同3个微信开放平台帐号下的活动应用、网址使用和群众帐号,用户的unionid是绝无仅有的。换句话说,同一用户,对同二个微信开放平台下的例外应用,unionid是同等的。

做完以上步骤,就足以调用小程序api wx.getUserInfo()
来得到用户新闻了,此步骤须求开始展览后台音信解密进程,在此就不再赘言,结合小程序api文档操作就好。

获得到unioid之后,将unionid消息拼接到src就能够举办网页登6操作了(前提是网页能够用跳转链接的艺术登入,类似群众号页面得到openid的样式)。

<web-view src="https://www.itlao5.com"></web-view>

相遇的标题

  1. openid登入难题
  2. webview动态src
  3. 开垦功效
  4. 分享功能
  5. 扫描普通贰维码跳转特定页面
  6. 再次回到按键缺点和失误难题

依照厂商专门的学业须求,在做Android开采的还要,还得同步进行另3个项目标微信小程序支付,不能够,企业调解,节资,研究开发也减小了点不清人,只得边学边开垦…

webview动态src

微信的webview有个坑的地方,不会动态的监听src的变化,那就导致了1个主题素材,要透过更动src落成页面跳转就不得以了。
自作者尝试了有的主意之后,找到了多少个减轻方案:

微信webview在页面load的时候会加载贰次webview,大家就使用那几个特点来贯彻动态src难题。

  1. 第3把要跳转的链接新闻设置成全局变量,要改成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=一&b=二’ //
直接调用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>

原稿:简书ThinkinLiu 博客: IT老5ps:
初学小程序,精晓还不深,只好写写这个浅显的事物,大概具备遗漏或不当,希望能提议,后续有更加多少深度入,会开始展览一些补充

Page({ onShareAppMessage { console.log(options.webViewUrl) }})

于是乎,就去探听了须臾间web-view

相关文章

发表评论

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

网站地图xml地图