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 + '/...'