微信开发常见问题01
微信开发常见问题01
微信开发常见问题01

常用依赖包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#支付常见包
"weixin-js-sdk": "^1.6.0",
"weixin-jsapi": "^1.1.0"
npm install weixin-js-sdk
npm install weixin-jsapi

#富文本
"mp-html": "^2.5.0",
npm install mp-html

#网路请求
"miniprogram-api-promise": "^1.0.4",
npm install miniprogram-api-promise

#国际化
"miniprogram-i18n-plus": "^0.3.0",
npm install miniprogram-i18n-plus

#国密
"sm-crypto": "^0.3.13"
npm install 0.3.13

小程序支付API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 这些需要的参数后端都会处理好返回
wx.requestPayment(
{
  timeStamp: "1696907024", // 支付签名时间戳
  nonceStr: "xxxxxxxxxxxxx", // 支付签名随机串，不长于 32 位
  package: "prepay_id=xxxxxxxxx", // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: "xxxxxxxxxxxxx", // 支付签名
  success: function (res) {
  },
  fail: function (res) {
  },	
  complete: function (res) {
  }
})

// 注意: package 和 paySign 这2个参数, 传递的时候需要用 encodeURIComponent 编码
//       接受后用 decodeURIComponent 解码


//==========其他让后端从银联获取支付的参数信息
appId 和 openid 这2个参数
appId: 小程序的appId,在小程序后台可以看到
openid: 当前用户的openid,可以通过微信方法 wx.login({}) 换取 openid
  1. 官网:小程序调起支付API
  2. 接口凭证 wx.login

小程序支付(嵌入H5页面)

场景描述: 在小程序中嵌入H5页面后, 使用小程序支付

解决方案: 后H5页面跳转到小程序页面后,由小程序发起支付动作

常遇到问题:

  1. H5页面是不能直接调用起小程序支付,原因: 微信官方不允许
  2. H5直接走公众号的付款可以走通
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// H5跳转小程序代码
import wxJDK from 'weixin-js-sdk'

// 参数转化为url地址方式
const converToUrl = requestParams => {
  let params = [];
  Object.entries(requestParams).forEach(([key, value]) => {
    let param = key + '=' + value;
    params.push(param);
  });
  return  params.join('&');
}

let params = {
    orderNum: '1234567', // 业务单号
    totalAmount: 1.00*100, // 金额 分
    returnUrl: "https://www.dafei.com/foo", // 回调url
    subOpenId: "", // 微信用户子标识
    subAppId: "", // 微信子商户appId
}
 
let wxParams = converToUrl(params)
let url = `/pages/h5Pay/index?${wxParams}`  // tip: 正确小程序中存在地址
wxJDK.miniProgram.navigateTo({url:url})

其他总结

1) weixin-jsapi 和 weixin-js-sdk 都是调用不起微信小程序支付,但是可以走公众号的支付
2) 小程序自己可以调用微信的小程序支付功能

相关官方文档:
JSAPI调起支付API
商户申请的公众号对应的appid，由微信支付生成，可在公众号后台查看
SAPI调起支付API

小程序webview内h5不可以调用小程序支付,相关文档
小程序是否能直接跳转到H5支付?

小程序打开外部链接

1
2
3
4
5
6
7
8
9
<!-- 
    01)需要登录后开发才可以
    02)需要把这行代码单独写到一个空页面中 
-->
<web-view src="http://localhost:8000/fei"></web-view>


<!--pages/navigation/navigation.wxml-->
<web-view src="https://www.github.com/dafei"></web-view>

H5返回到小程序页面

1
2
3
4
import wxJDK from 'weixin-js-sdk'

// 小程序中已经存在的页面地址: /pages/h5Back/index
wxJDK.miniProgram.navigateTo({ url: '/pages/h5Back/index' })

H5禁用缓存

1
2
3
4
5
6
<!-- 过期时间 -->
<meta http-equiv="Expires" content="0">
<!-- 禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出 -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

H5适配移动端

1
2
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

普通复制连接

1
2
3
4
5
6
7
8
9
10
11
12
// 源生就是复制当前连接(移动端)
const onCopyFei = () => {
  // let url = 'https://www.baidu.com'
  let url = window.location.href
  let oInput = document.createElement('input')
  oInput.value = url
  document.body.appendChild(oInput)
  oInput.select() // 选择对象;
  console.log(oInput.value)
  document.execCommand('Copy') // 执行浏览器复制命令
  oInput.remove()
}

页面跳转和提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 场景描述: 调佣接口后页面跳转提示会消失, 这里用定时器处理
const that = this
wx.navigateBack({
  delta: 1,
  success() {
    setTimeout(() => {
      wx.showToast({
        title: that.data.submitSuccess, // 注意这里引用
        icon: 'success',
        duration: 2000,
        mask: true
      })
    }, 0)
  }
})

底部

没有了