微信小程序web-view，微信支付，分享

项目架构

image.png

image.png

image.png

一、微信支付

H5代码 在需要调用支付的地方写此段代码，需要注意的地方 获取package的时候如下图即可

image.png

        wx.miniProgram.getEnv(function (res) {
          if (res.miniprogram) {
            axios
              .get('请求地址+参数').then(res => {
                  let data=res.data
                //   alert(data.package)
                if(res){
                     let params= '?timestamp='+data.timeStamp+'&nonceStr='+data.nonceStr
                   +'&'+data.package+'&signType='+data.signType
                   +'&paySign='+data.paySign+'&orderId='+that.payCodeInfo;
                 
                // let params=JSON.stringify(res.data)
                    let path = '/page/wxpay/wxpay'+params;
                    //通过JSSDK的api使小程序跳转到指定的小程序页面
                    wx.miniProgram.navigateTo({
                    url: path
                    });
                }
                 
              })
          }
        })

微信waypay.js代码

 onLoad: function (options) {
    console.log(options)
    let orderid = options.orderId
    let that=this;
    wx.requestPayment({
      timeStamp: options.timestamp,
      nonceStr: options.nonceStr,
      package: 'prepay_id='+options.prepay_id,
      signType: options.signType,
      paySign: options.paySign,
      success:function(res){
        console.log(res)
        var pages=getCurrentPages();
        //当前页面
        var currpage=pages[pages.length-1]
        var prevpage=pages[pages.length-2]
        prevpage.setData({
          web_src: 'https://xxxxx/?orderId=' + orderid    //赋值会自动跳转到当前页面，你就可以在前端H5页面中通过url参数接收，然后判断是否支付成功后的操作
        })
        wx.navigateBack(); 
      },
      fail:function(res){
         var pages = getCurrentPages();  //获取你页数集  
         console.log(pages)//打印一下自己看一下
        // //当前页面
        var currpage = pages[pages.length - 1]
        var prevpage = pages[pages.length - 2]
        // prevpage.setData({
        //   web_src: 'https://xxxx.com/?orderId=' + orderid   //支付失败也可以写判断，我这里他就是自动自己回到付款页面，我就不在传值判断了
        // })
        wx.navigateBack(); 
      },
    })
  },

H5页面代码判断 这里的获取指定url参数方法有误，请注意查看

image.png

//获取指定的url中的参数
      GetUrlParam(paraName) {
        var url = document.location.toString();
        var arrObj = url.split("?");

        if (arrObj.length > 1) {
          var arrPara = arrObj[1].split("&");
          var arr;

          for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");
            if (arr != null && arr[0] == paraName) {
              return arr[1];
            }
          }
          return "";
        } else {
          return "";
        }
      }

openid的问题

小程序可以通过

wx.login({
  success:function(res){
    //code
    //通过res.code向后端请求接口获取openid，然后将openid传到H5页面中
     let promise = new Promise(function (resolve, reject) {
            wx.request({
              url: "https://xxxxx.com/xxx?code=" + code,
              header: {
                'content-type': 'application/json' // 默认值
              },
              method: 'GET',
              success: function (res) {
                resolve(res.data);
                reject("调用失败");
              },
              fail: function (res) {
                resolve(res);
                reject("调用失败");
              }
            })
          }).then(function (data) {
            that.setData({
              web_src: `https://xxxxx.com/?openid=${data.openid}`
            })
          });
        }
}
})

H5代码

      GetUrlParam(paraName) {
        var url = document.location.toString();
        var arrObj = url.split("?");

        if (arrObj.length > 1) {
          var arrPara = arrObj[1].split("&");
          var arr;

          for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");
            if (arr != null && arr[0] == paraName) {
              return arr[1];
            }
          }
          return "";
        } else {
          return "";
        }
      }
//获取指定参数的值
 let openid=this.GetUrlParam('openid')
         localStorage.setItem('openid',openid)

二、微信分享

H5页面代码

//首先在H5页面想要分享的页面写传递给小程序参数
const agent = navigator.userAgent.toLowerCase();
const isWechat = agent.match(/MicroMessenger/i) == 'micromessenger';
//为了兼容判断是否为微信，微信小程序、公众号环境
 if(this.isWechat){
//微信环境
          wx.miniProgram.getEnv(function (res) {
          if (res.miniprogram) {    
            //小程序环境
              var simg_url='设置的分享图的地址'
              var stit='设置的分享的标题'
              var info={
                  imgUrl:simg_url,
                  stit:stit
              }
              var json=JSON.stringify(info)  //转换成json字符串
              wx.miniProgram.postMessage({data:json})
          }
          })
    }else{
      //非微信环境
    }

小程序代码
page/index/index.js

  //接收网页传过来的值
  getmessage:function(res){
    console.log(res)
    let data=res.detail.data
//传过来的值不会替换删除而是累加，所以取最后一条数据
    let lastData=res.detail.data[res.detail.data.length-1]; 
    let json=JSON.parse(lastData)  //转换成json对象
    console.log(json.imgUrl)
    this.setData({
      shareImg: json.imgUrl,
      sharetit: json.stit
    })
  },
//点击右上角三点分享触发
onShareAppMessage: function (options) {
    //普通的分享，所有页面将会是您传递进来的标题和图片
   // let return_url = encodeURIComponent(options.webViewUrl)
    //var path = "page/share/share?shareUrl=" + return_url;
//根据当前的url路由关键词判断，其他的都为默认图片标题
 var path =''
    let return_url = encodeURIComponent(options.webViewUrl)
    if (return_url){
      if (return_url.indexOf("detail") == -1 && return_url.indexOf("share") == -1) {
        return_url = 'https://xxxx.com/'
        this.setData({
          shareImg: '默认图片',
          sharetit: '默认标题',
        })
      } else {
        return_url = encodeURIComponent(options.webViewUrl)
      }
    }else{
//为了兼容有些手机获取不到当前的h5url
      return_url = 'https://xxxx.com'
    }
    path = "page/share/share?shareUrl=" + return_url;
    return {
      title: this.data.sharetit,
      path: path,
      imageUrl: 'https://xxxx.com'+this.data.shareImg,
    }
  }

page/share/share.wxml

page/share/share.js

page({
    /**
   * 页面的初始数据
   */
  data: {
    share_src:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options &&options.shareUrl){
      this.setData({
        share_src:decodeURIComponent(options.shareUrl)
      })
    }
  },
})