uni-app接入微信支付，手抓手教，学不会别干开发了

npm install weixin-js-sdk

/*
 * 微信(公众号)支付工具js
 */

import jWeixin from 'weixin-js-sdk'

export default {
  install(app) {
    app.config.globalProperties.$weChatPay = function(data, callback, errorCallback) {
      let [appId, timeStamp, nonceStr, signature, packages, sign] = [data.appId, data.timeStamp, data
        .nonceStr, data
        .paySign, data.package, data.paySign
      ];

      jWeixin.config({
        debug: false,
        appId,
        timeStamp,
        nonceStr,
        signature,
        jsApiList: ['chooseWXPay']
      });
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          appId: appId,
          timeStamp: timeStamp,
          nonceStr: nonceStr,
          package: packages,
          signType: 'RSA',
          paySign: sign
        },
        res => {
          // 坑1: 微信支付新规则,支付成功时不会返回这,所以此处的代码成功时不会被调用.
          // 支付成功时，如果没开通"点金计划"，页面会被关闭，具体参考（1）
          // 
          // 失败时：页面不会被关闭，会正常调用后续代码.
          uni.showModal({
            title: '提示',
            content: `支付返回数据: ${JSON.stringify(res)}`,
          })
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            callback(res)
          } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
            errorCallback(res)
          }
        }
      )

    };
  }
};

import {
  createSSRApp
} from 'vue'
import App from './App';

import wechatPayApi from './common/wechatPayUtil.js'

export function createApp() {
  const app = createSSRApp(App)
  app.use(wechatPayApi);

  return {
    app
  }
}

<uv-button
  style="margin-left: 10rpx"
  type="primary"
  class="comment-botton"
  @click="checkWeixinJSBridge(item)"
  icon="edit-pen"
  icon-color="#fff"
  text="立即支付"
></uv-button>

// 微信官方提供的兼容方法.
checkWeixinJSBridge(item) {
  if (typeof WeixinJSBridge == 'undefined') {
    //
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', this.callWechatPay(item), false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', this.callWechatPay(item));
      document.attachEvent('onWeixinJSBridgeReady', this.callWechatPay(item));
    }
  } else {
    this.callWechatPay(item);
  }
},
// 调用微信支付
callWechatPay(item) {
  if (!item.orderId) {
    uni.showToast({
      icon: 'error',
      title: '支付订单获取失败,请稍候重试!'
    });
    return;
  }
  uni.showLoading({
    title: '拉取支付信息中...请稍等'
  });
  const parent = this;

  let url = '查询微信支付所需参数-后台接口';
  let params = {
    orderId: item.orderId,
    // 参数......
  };

  uni.request({
    url: url,
    method: 'POST',
    data: params,
    success: (res) => {
      let result = res.data;
      let wepayObj = {
        appId: result.appId,
        timeStamp: result.timeStamp,
        nonceStr: result.nonceStr,
        package: result.package,
        signType: 'RSA',
        paySign: result.sign
      };

      parent.$weChatPay(
        wepayObj,
        function(res) {
          // 这个地方不会被调用.
          // 因为微信规则修改,支付成功后,需要开通"点金计划",会跳转到点金计划的页面.
          // 
          console.log('成功', res);
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          });
          // 跳转订单列表.
          uni.redirectTo({
            url: './index'
          });
        },
        function(e) {
          // 支付失败时,这里会被调用.
          uni.showToast({
            title: '支付失败或取消支付',
            icon: 'error'
          });
          console.log('支付失败或取消支付', e);
        }
      );
    },
    fail: (err) => {}
  });

}