1、准备域名,申请ssl
2、绑定unicloud云空间-云函数-函数列表-云函数域名绑定
3、云函数-详情-云函数Url化-配置路径
4、公众号后台绑定域名
5、云函数代码示例:记得安装sha1依赖,这个很简单(官方有)
const sha1=require('sha1');
exports.main = (event, context) => {
let {queryStringParameters} = event;
let {signature,echostr,timestamp,nonce} = queryStringParameters;
let token = 'this is ok';
//字典排序
const str=[token,timestamp,nonce].sort().join('');
const result=sha1(str);
let res;
if(result===signature){
res = echostr;
}else{
res = "fail";
}
//返回数据给客户端
return res;
};
6、至此接入成功。
7、准备开发开发 公众号和小程序的连接。此时发现,需要获取access_token才能获取用户信息包含unionid。公众号需要绑定固定ip才能得到access_token。
所以必须使用腾讯云付费版服务空间,又重新选择了腾讯云服务空间。
8、不使用 uni-cloud-router ,配置公众号服务器域名直接可以成功,使用之后 token一直失败,猜测是uni-cloud-router自己封装了返回的格式。
可通过验证的代码,直接在 index.js中
// const sha1=require('sha1');
// const xml = require('./utils/xml')
// exports.main = async (event, context) => {
// let {httpMethod,queryStringParameters,body} = event;
// if (httpMethod=="POST")
// {
// return await postFun(body);
// }
// else
// //返回数据给客户端
// return getFun(queryStringParameters);
// };
// function getFun(params) {
// let {signature,echostr,timestamp,nonce} = params;
// let token = 'magichatdy';
// //字典排序
// const str=[token,timestamp,nonce].sort().join('');
// const result=sha1(str);
// let res;
// if(result===signature){
// res = echostr;
// }else{
// res = "fail";
// }
// return res;
// }
// async function postFun (bodystr) {
// let msg,MsgType,result;
// let body = await xml.xmlToJson(bodystr)
// msg = body ? body['xml']:'';
// if (!msg) {
// return 'error request.';
// }
// let {MsgType:mst,Event:evt} = msg;
// MsgType = mst[0]
// Event = evt[0]
// if(MsgType=='text'){
// // 文字回复
// result = xml.jsonToXml({
// xml: {
// ToUserName: msg.FromUserName,
// FromUserName: msg.ToUserName,
// CreateTime: Date.now(),
// MsgType: msg.MsgType,
// Content: msg.Content
// }
// })
// }else if(MsgType=='event'){
// // if (Event=='subscribe')
// // {
// // 关注回复
// result = xml.jsonToXml({
// xml: {
// ToUserName: msg.FromUserName,
// FromUserName: msg.ToUserName,
// CreateTime: Date.now(),
// MsgType: 'text',
// Content: "感谢关注"
// }
// })
// // }
// // if(Event=='unsubscribe')
// // {
// // }
// }else{
// // 其他回复
// result = 'success'
// }
// return result;
// }
但是项目需要使用:uni-cloud-router,所以目前的策略是,先以上边的方式验证通过,再使用 uni-cloud-router书写其他接口代码(包含事件接受与接口书写)
注:xxx/wx/index/sayHello 也会进入 xxx/wx 的 handle方法,所以可以这样解决。 不确定之后会不会出问题。
9、换成腾讯云以后,发现公众号那边发过来的消息需要 base64解码。。。。,阿里云就不用解码
let str = new Buffer(bodystr, 'base64').toString();
10、公众号微信支付:
1、在您的js公共文件夹下创建wechat.js
import Vue from "vue";
var jweixin = require('jweixin-module');
export default {
//调试模式
debug:false,
//权限
jsApiList:[
'getLocation'
],
//判断是否在微信中
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
},
//初始化sdk配置
initJssdk: function(callback, url) {
if (!this.isWechat()) {return;}
//服务端进行签名 ,可使用uni.request替换。 签名算法请看文档
Vue.prototype.$func.api(Vue.prototype.$apiConfig.wxjssdk(),{
url:url || location.href.split('#')[0],
},res => {
jweixin.config({
debug: res.debug || this.debug,
appId: res.appId,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: res.jsApiList || this.jsApiList
});
//配置完成后,再执行分享等功能
if (typeof callback === 'function') {
callback(res.data);
}
})
},
//准备就绪
ready:function(callback, url)
{
if (!this.isWechat()) {return;}
this.initJssdk(function(){
jweixin.ready(function() {
//配置完成后,再执行
if (typeof callback === 'function') {
callback(jweixin);
}
})
}, url)
},
closeWindow:function() {
this.ready(function(wx) {
wx.closeWindow();
})
},
//在需要定位页面调用
location: function(success, fail) {
this.ready(function(wx) {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
if (typeof success === 'function') {
success(res);
}
},
fail:function(res){
if (typeof fail === 'function') {
fail(res);
}
}
});
});
}
}
2、main.js加载该文件,这样就可以全局使用wechat.js了
// #ifdef H5
import wechat from './static/js/wechat.js';
Vue.prototype.$wechat = wechat;
// #endif
3、页面中使用
// #ifdef H5
//获取定位经纬度
const that = this;
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.location(function (res) {
that.latitude = res.latitude; //纬度
that.longitude = res.longitude; //经度
});
}
// #endif
调试 及缓存处理策略参照: cnblogs.com/Mvloveyouforever/p/16217859.html
12、用云函数开发的时候,发现有时候是文件错误,看不出原因。这时候就用url访问接口,错误信息会明显很多了(需要把代码中try catch 去掉)。
13、页面跳转传对象的正确写法,但官方有bug,第二次进入同一页面无法接收事件(官方尚未修复),所以目前用不了。
uni.navigateTo({
url: '',
success(res){
console.log(res)
res.eventChannel.emit('messageDetail', {
data: {
info: 'uniapp操作,长按复制,请求携带cookie - 走看看uniapp操作,长按复制,请求携带cookie - 走看看uniapp操作,长按复制,请求携带cookie - 走看看uniapp操作,长按复制,请求携带cookie - 走看看',
id: '1'
}
})
}
})
<template>
<view v-if="detail" class="message-detail">
{{detail.info}}
</view>
</template>
<script setup>
import {
getCurrentInstance,
ref
} from 'vue';
const {
proxy
} = getCurrentInstance();
const myEventChannel = proxy.getOpenerEventChannel();
const detail = ref();
console.log(myEventChannel)
myEventChannel.on('messageDetail', ({
data
}) => {
console.log(data);
detail.value = data;
});
</script>
<style lang="scss" scoped>
.message-detail {
padding: 30rpx;
}
</style>
14、使用地图选点组件: https://lbs.qq.com/webApi/component/componentGuide/componentPicker
qq.com
backurl不能设置成 location.href 因为,第二次再选择的时候就乱了。 location.origin + '/...'