uni-app开发微信公众号

uni-app , , , 评论

记录一下uni-app开发微信公众号遇到的问题。

之前用 uni-app 开发App，小程序，这次用来开发微信公众号，防止客户后期 ”变卦“，要做app或者小程序。当然也遇到一些问题；

问题1 如何调起微信支付

  • 判断window原型链是否有 ” WeixinJSBridge “
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (window.hasOwnProperty('WeixinJSBridge')) {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						 "appId":"wx2421b1c4370ec43b",     //公众号ID，由商户传入     
             "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
             "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
             "package":"prepay_id=u802345jgfjsdfgsdg888",     
             "signType":"MD5",         //微信签名方式：     
             "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
					},
					(res) => {
					    if (res.err_msg === "get_brand_wcpay_request:ok") {
								this.$toast.success('支付成功');
								// ....  支付成功后操作
					    } else {
								this.$toast.warning('支付失败');
								// ....  支付失败后操作
						}
				
					});
				} else {
					this.$toast.warning('支付失败');
				}

问题2 海报下载

  1. 尝试拼canvas后，转为base64下载，但是不成功，微信公众号不允许此行为；

  2. 微信公众号虽然不支持下载，但是可以长按图片图片保存

    • canvas容器
    1
    2
    <canvas canvas-id="myCanvas" id="myCanvas" ref="myCanvas" style=" position:fixed; top:0;left:10000px; width: 985px; height: 1585px"></canvas>

    • Canvas 海报生成
    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
    // 绘制canvas图片
    var bgPath = '/static/images/bg_invite.jpg'   // 本地静态资源图片
    var name = this.details.name;
    var img_base64 = this.details.img_base64;    // 远程拿下来的二维码base64
    const ctx = uni.createCanvasContext('myCanvas')	

    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0,0,985,1585);

    uni.downloadFile({
        url: bgPath, //仅为示例，并非真实的资源
        success: (res) => {
    		console.log('bgPath_res:', res)
    		ctx.drawImage(res.tempFilePath, 0, 0, 985, 1280)
    		uni.downloadFile({
    		    url: img_base64, //仅为示例，并非真实的资源
    		    success: (res) => {
    				console.log('img_base64_res:', res)
    				ctx.drawImage(res.tempFilePath, 40, 1330, 200, 200)
    				
    				ctx.setFillStyle('#fff');
    				ctx.setFontSize(46)
    				ctx.fillText('邀请得奖励了！', 360, 1100)
    				
    				ctx.setFillStyle('#3C3C3C');
    				ctx.setFontSize(46)
    				ctx.fillText(name, 280, 1390)
    				
    				ctx.setFillStyle('#3C3C3C');
    				ctx.setFontSize(36)
    				ctx.fillText('关注车汇管,让养车轻松起来！', 280, 1490)
    				ctx.draw()
    				
    		    }
    		});
    		
        }
    })
    • 从 生成的海报canvas，获取base64，放进img 标签
    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
    	<view class="wrapper-poster" v-if="is_show_poster">
    	<view class="wrapper-poster-inner">
    		<image 
    			class="img-poster"
    			:src="poster_base64" 
    			mode=""
    		></image>
    	</view>
    	<text class="txt-tip">长按图片保存</text>
    	<button class="btn-close"
    		@click="is_show_poster = false"
    	><text class="iconfont icondelete2"></text></button>
    </view>
    	
    	<script>
    	downloadQr() {
    		console.log('----');
    		let canvas = document.getElementById('myCanvas').getElementsByTagName('canvas')[0];
    		let href = canvas.toDataURL() // 获取canvas对应的base64编码
    		
    		uni.showLoading({
    			title: '正在保存...'
    		});
    		setTimeout(() => {
    			this.poster_base64 = href;
    			// let a = document.createElement('a') // 创建a标签
    			// a.download = this.details.name+'的邀请海报.png' // 设置图片名字
    			// a.href = href
    			// a.dispatchEvent(new MouseEvent('click'))
    			 uni.hideLoading();
    			 this.is_show_poster = true;
    		}, 1000);
    		return;
    	}
    	</script>

问题3 调用微信公众号的导航

  • 引入 jssdk
1
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  • 微信公众号官方是这么用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wx.getLocation({//
      type:'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {
        console.log(res.latitude); console.log(res.longitude);
        wx.openLocation({
          latitude: 31, // 纬度，范围为-90~90，负数表示南纬
          longitude: 121, // 经度，范围为-180~180，负数表示西经
          scale: 8, // 缩放比例
          name:"测试",
          address:"测试详细地址",
          success:function(r){
            console.log(r)
          }
        })
      }
    })

然而当放进uni-app后会报错

后来查阅得知 uni-app 内 ’wx‘ 关键字被重写，所以需要另辟蹊径，使用关键字 ‘ jWeixin ’，如下：

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
let config = {
	appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
};
jWeixin.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  ...config,
  jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
});

jWeixin.error((res) => {
  this.$toast.warning('开启导航失败');
});

jWeixin.ready(() => {
	jWeixin.openLocation({
	  latitude: this.latitude, // 纬度，浮点数，范围为90 ~ -90
	  longitude: this.longitude, // 经度，浮点数，范围为180 ~ -180。
	  name: this.store_details.store_name, // 位置名
	  address: this.store_details.store_name, // 地址详情说明
	  scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
	  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
	});
});

BruceLeeWeb Developer

个人简介。