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

小程序现在越来越流行，但是公司的很多项目都是用网页写的，小程序语法不兼容原生网页，使得旧有项目迁移至小程序代价很高；
小程序之前开放了webview功能，可以说是网页应用的一大福音了，但是微信的webview有一些坑，这篇文章就是列举一下我在开发过程中遇到的一些问题以及我找到的一些解决方案。

遇到的问题

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

openid登录问题

微信webview的使用方法很简单，只要如下设置src就可以展示具体的网站了。

<!-- 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的形式)。

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>

支付功能

webview里面可以通过jssdk来实现一些小程序功能，但不能直接调用小程序的支付功能，这时候我们就需要转变一下策略了：

  1. 在网页里引入微信jssdk
  2. 在网页需要发起支付的地方，调用跳转页面的接口，控制小程序跳转到小程序的支付页面（这个要在小程序里单独写的）,跳转的时候，需要把订单的一些信息都拼接到链接里,订单信息由后台返回，需要通过微信支付系统的统一下单接口，具体参看支付文档。
  3. 跳转到小程序支付页面后，由小程序页面发起支付，支付完成后跳转回webview页面，通过之前设置的动态src，控制webview跳转到特定的页面。
// 网页引入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里读取链接信息。
// 网页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函数再进行处理，实现普通二维码跳转。
// 对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无法使用微信的返回按钮了，这时候只要在webview页面前多加一个跳转页面就好了（第一个页面也可以设置成获取用户权限的页面，不过我感觉这样体验不好，也不是所有页面都要用户获取了权限才可以使用）

最终的页面层级

"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获取方式

原文地址：https://www.cnblogs.com/baimeishaoxia/p/11875849.html

时间： 2024-07-31 20:45:57

网页程序迁移至微信小程序web-view详解的相关文章

小程序-文章：微信小程序常见的UI框架/组件库总结

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

Django+小程序技术打造微信小程序助手

Django+小程序技术打造微信小程序助手 深入Django视图层,实践与理论相结合,带你系统地梳理视图层知识点 分层次介绍Django视图层的重要知识点,包括 HTTP请求和应答在Django框架中相应的Request对象/Response对象:Django的路由以及RESTful API设计:Django的文件管理:类视图简化视图层逻辑等等重要知识点:最后有关于视图层的实战内容. 3-1 Request&Response对象 3-2 Django的RESTful URL设计 3-3 实现个人

【微信小程序】认识微信小程序

目前微信小程序已经支持个人版了 罗列一下微信开发的一些资料和工具 (如果你还不了解微信小程序如何操作请点击  新手教程 )里面罗列了 开发者工具 如何使用 和 微信的基本操作 很详细 一.微信开发者工具 官方下载地址如下: windows 64 . windows 32 . mac 二.第一个小程序 1.创建第一个应用,如果你还没有APPID 那么在开发的时候可以选择无APPID ,这样可以创建应用但是有部分功能是有限制的. 2.包含的目录文件 pages是存储页面及页面配置的 如果添加页面需要

微信小程序篇（微信小程序的支付）

微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口!!! 首先调用统一下单接口我们需要知道一些信息 var bookingNo = 'davdian' + this.createNonceStr() + this.createTimeStamp() var deferred = Q.defer() var appid = config.appId

微信小程序篇（微信小程序的支付）转载 “微信小程序联盟”

微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口!!! 首先调用统一下单接口我们需要知道一些信息 var bookingNo = 'davdian' + this.createNonceStr() + this.createTimeStamp() var deferred = Q.defer() var appid = config.appId

程序与页面—微信小程序前端开发工具

你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好.紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式.最后客户端会装载 logs.js,你可以看到 logs.js 的大体内容就是: Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } }) Page

微信小程序用户身份-微信小程序前端开发工具

一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的. 管理员可在小程序管理后台统一管理项目成员(包括开发者.体验者及其他成员).设置项目成员的权限,包括:开发者/体验者权限.登录小程序管理后台.开发管理.查看小程序数据分析等. 管理入口位于:小程序管理后台 - 用户身份 – 成员管理 权限 说明 开发者权限 可使用小程序开发者工具及开发版小程序进行开发 体验者权限 可使用体验版小程序 登录 可登录小程序管理后台,无需管理员确认 数据分析 使用小程序数据分析功能查看小程序数据 开发管理

小程序+巧应用-微信小程序开发实战pdf

下载地址:网盘下载 系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及

ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备

前言 暂无 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单片机采集的温湿度数据. 一,硬件程序 硬件程序采用基础篇 https://www.cnblogs.com/yangfengwu/p/11762609.html  的底层硬件程序 该源码已经拷贝到了当前测试目录 二,微信小程序源码 测试准备工作 一,下载单片机程序(请自行下载) 二,打开微信小程序软件,导入本节工程 三,把小程序安装到手机运行 四,调整波