unicloud开发公众号

大圣又归来 發表於 2022-2-27 14:25:00

1、准备域名，申请ssl
2、绑定unicloud云空间-云函数-函数列表-云函数域名绑定
3、云函数-详情-云函数Url化-配置路径
4、公众号后台绑定域名
5、云函数代码示例：记得安装sha1依赖，这个很简单（官方有）
<div class="cnblogs_code">
<pre>const sha1=require('sha1');

exports.main = (event, context) => {

let {queryStringParameters} = event;
let {signature,echostr,timestamp,nonce} = queryStringParameters;
let token = 'this is ok';

//字典排序
const str=.sort().join('');
const result=sha1(str);
let res;
if(result===signature){
 res = echostr;
}else{
 res = "fail";
}
//返回数据给客户端
return res;
};</pre>
</div>
6、至此接入成功。
7、准备开发开发公众号和小程序的连接。此时发现，需要获取access_token才能获取用户信息包含unionid。公众号需要绑定固定ip才能得到access_token。
所以必须使用腾讯云付费版服务空间,又重新选择了腾讯云服务空间。
8、不使用 uni-cloud-router ，配置公众号服务器域名直接可以成功，使用之后 token一直失败，猜测是uni-cloud-router自己封装了返回的格式。
可通过验证的代码，直接在 index.js中
<div class="cnblogs_code">
<pre>// 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=.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
// Event = evt
// 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;
// }</pre>
</div>
但是项目需要使用：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
<div id="highlighter_529569" class="syntaxhighlighter"> 
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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('#'),
 },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);
 }
 }
 });
 });
}
}
</pre>
</div>
　　
     2、main.js加载该文件，这样就可以全局使用wechat.js了
　
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// #ifdef H5
import wechat from './static/js/wechat.js';
Vue.prototype.$wechat = wechat;
// #endif
</pre>
</div>
　　
      3、页面中使用
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// #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
</pre>
</div>
　　
<div id="highlighter_579504" class="syntaxhighlighter">
<div class="bar show">
<div class="toolbar"> 11、公众号开发 调试 及缓存处理策略参照： cnblogs.com/Mvloveyouforever/p/16217859.html</div>
</div>
<div class="lines"> </div>
</div>
</div>
12、用云函数开发的时候，发现有时候是文件错误，看不出原因。这时候就用url访问接口，错误信息会明显很多了（需要把代码中try catch 去掉）。 
13、页面跳转传对象的正确写法，但官方有bug，第二次进入同一页面无法接收事件（官方尚未修复），所以目前用不了。
<div class="cnblogs_code">
<pre>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></pre>
</div>
 14、使用地图选点组件： https://lbs.qq.com/webApi/component/componentGuide/componentPicker
      申请key的时候，要启用webserviceAPI。添加白名单域名的时候不能漏了 qq.com  霍...
      backurl不能设置成  location.href 因为，第二次再选择的时候就乱了。 location.origin + '/...' 
来源：https://www.cnblogs.com/Mvloveyouforever/p/15942248.html

頁: [1]

琼殿技术论坛's Archiver

unicloud开发公众号