功能示例图如下

用户点击一键登录，用户点击允许后获取用户手机号码

前端代码：

<button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" style="background: linear-gradient(55deg, #377ffd, #5db7fb);">
      一键登录
</button>

js代码

    // 手机号授权
    onGetPhoneNumber(e){

        // 用户已授权
        if (e.detail.errMsg === 'getPhoneNumber:ok') {
            const iv = e.detail.iv
            const code = e.detail.code
            const encryptedData = e.detail.encryptedData
            // 将 encryptedData 和 iv 发送到后端解密
            this.quickLogin(encryptedData, iv)
        } else {
            // 用户拒绝授权
            uni.showToast({
                title: '授权失败',
                icon: 'error'
            })
        }
    },


    quickLogin(_encryptedData=null, _iv=null){
        const that = this
        uni.login({
            provider: 'weixin',
            success: function(loginRes) {
                uni.getUserInfo({
                    success: (userInfoRes) => {

                        const iv = _iv ?? userInfoRes.iv 
                        const encryptedData = _encryptedData ?? userInfoRes.encryptedData

                        http.post('/user/login', {
                            iv: iv,
                            register: true,
                            code: loginRes.code,
                            encryptedData: encryptedData,
                        }).then(res => {
                            if(res.code == 0){
                                //登录成功，设置用户信息


                            }else{
                                uni.showModal({
                                    title: '登录失败',
                                    content: res.msg,
                                    showCancel: false,
                                    confirmText: '确定',
                                })
                            }
                        })

                    },fail: (res) =>{
                        console.log('失败', res)
                    }
                })
            },fail: (res) =>{
                console.log('失败', res)
            }
        })
    }

后端使用的是thinkphp6，和easyWeChat的SKD4.0版本
文档：https://easywechat.com/4.x/

    /**
     * 一键登录
     */
    public function quickLogin()
    {
        $param = $this->request->param();

        $code = $param['code'];
        $iv = $param['iv'];
        $encryptedData = $param['encryptedData'];

        $app = Factory::miniProgram($config);

         //根据code获取session_key
         $wxUserInfo = $this->app->auth->session($code);

        //消息解密。比如获取电话等功能，信息是加密的，需要解密。
        $data = $this->app->encryptor->decryptData($wxUserInfo['session_key'], $iv, $encryptedData);

        //输出
        dump($data);

//        [
//            "phoneNumber" => "手机号"
//            "purePhoneNumber" => "手机号"
//            "countryCode" => "86"
//            "watermark" => array:2 [
//            "timestamp" => 1721456497
//                "appid" => ""
//            ]
//        ]

        //登录逻辑...

    }

uniapp页面跳转方式和区别

第一：wx.navigatorTo  //新页面打开，默认会有返回按钮

第二：wx.redirectTo     //当前页面打开，默认无返回按钮

第三：wx.switchTab    //只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换

第四：wx.reLaunch    //关闭所有页面，打开应用内某个页面，默认无返回按钮】

隐藏左上角返回按钮和首页按钮

onShow() {
    uni.hideHomeButton()
    //wx.hideHomeButton()
},

<view v-html="article.desc"></view>
使用v-html显示富文本编辑器的内容时，里面如果添加了缩略图图片，在微信小程序中显示时会发现由于图片太大，导致图片显示时变形

导致图片溢出

解决：可以通过设置css样式来处理

//防止富文本图片宽度溢出
if(this.article.desc !=null || this.article.desc != ""){
    this.article.desc = this.article.desc.replace(/\<img/g, '<img style="max-width:100%;height;auto" ');
}

微信申请退款，报错证书验证失败

刚开始百度时，大部分都是在说配置错误导致的
后面在耐性仔细的查看的微信的说明文档后发现是需要去微信支付下载一个申请下载API证书
微信支付退款文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3

下载后，在退款接口中，请求微信接口时需要带上证书即可
注意：
证书pkcs12格式，证书pem格式
部分开发语言和环境，不能直接使用p12文件，而需要使用pem（列如PHP使用的是pem）

申请流程：

1、进到微信公众平台，点一下“点击注册”，挑选账号申请种类“小程序”，填好微信小程序用户信息，包含电子邮箱、登陆密码等。
2、登录到相对的电子邮箱激话账户。
3、激话 微信小程序 后，挑选“主体类型”。
4、申请注册好以后，就可以用新的微信小程序账户密码登陆后台管理，在【设置】里填好微信小程序的名字、头像、服务品类等信息内容，随后等候审批就可以。需要注意的是，如果你的服务类目与实际不符，那么是无法通过审核的。

需要客户提供的信息：

一、小程序信息：

1. 小程序名称。
2. 小程序简称（选填）。
3. 小程序头像（矩形、圆形）。
4. 向程序介绍。

二、小程序类目：

1. 小程序的服务类目，设置主营类目。

三、小程序备案：

wx.login获取code

后端在通过code获取微信用户的openid等信息

前端代码：

 wx.login({
            success: rs =>{
                var code = rs.code  //登录凭证

                if(code){
                    uni.getUserInfo({
                      provider: 'weixin',
                      success: res => {
                        // 成功获取用户信息
                        const userInfo = res.userInfo;

                        // 这里可以将获取到的用户信息发送到后端进行处理
                        uni.request(/wxlogin, {code : code}).then(res => {
                            if(res.code == 0){
                                uni.showToast({
                                    title:"微信登录成功",
                                    icon:"success"
                                })

                                //登录成功后的处理

                            }
                        });
                        // ...
                      },
                      fail: err => {
                        // 获取用户信息失败
                        console.log('获取用户信息失败', err);
                      }
                    });
                }

            }
        })`

场景：百度小程序使用宫格组件没有效果
处理流程

1、检查uniapp其他组件是否正常，正常

2、分析uni-grid源码，正常

3、分析uni-grid-item源码，有问题

// #ifdef H5
	mounted() {
		this.grid._getSize(width => {
			this.width = width;
		});
	},
	// #endif
	// #ifndef H5
	onReady() {
		this.grid._getSize(width => {
			this.width = width;
		});
	},
// #endif
	methods: {
		_onClick() {
			this.grid.change({
				detail: {
					index: this.index
				}
			});
		}
	}

该部分代码，只在h5下生效，百度小程序下，没有生效，导致宫格元素获取不到宽度，导致不显示，修改如下

// #ifdef H5 | MP-BAIDU
	mounted() {
		this.grid._getSize(width => {
			this.width = width;
		});
	},
	// #endif
	// #ifndef H5 | MP-BAIDU
	onReady() {
		this.grid._getSize(width => {
			this.width = width;
		});
	},

总结

1、中途，有考虑过自己不适用组件来完成。但被否决了，原因觉得是自己做成本一样高，如果其他地方也用到了这个组件，那么又得重新写一遍

2、在分析问题的时候，没有考虑到一个问题，就是这个组件在微信小程序下是正常的，而其他其他uniapp组件也是正常的情况下，很容易就可以分析出，是这个组件内缺少对百度小程序的支持，应该很容易联想到“ifdef”的使用

问题：所有请求接口都报错、net::ERR_EMPTY_RESPONSE

处理

1、关闭验证域名

2、检查接口在浏览器打开是否正常
3、重启小程序

问题：微信小程序支付报错：支付验证签名失败

分析：正确生成了微信订单，错误发生在签名阶段

处理：

1、检查参数数量时候匹配：appId、timeStamp、nonceStr、package、signType

2、检查后端参数字母大小写是否正常
3、检查小程序参数字母大小写是否正常

4、使用微信签名验证工具验证

微信支付流程：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3
下单：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1&index=1

签名算法：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3

接收支付通知：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7

查询订单：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_2

签名验证工具：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=20_1

报错信息：

This API has been unsupported hint

原因：微信有多个版本的接口、检查是否调用最新接口
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.send.html

认真检查接口参数是否一致、接口是否一致
附上：微信发送订阅消息文档
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.send.html

问题1、用习惯uniapp后,会不习惯微信小程序自带的标签。两者的差距很大

function _typeof2(o) {
  "@babel/helpers - typeof";
  return (_typeof2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
      return typeof o;
  } : function(o) {
      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  })(o);
}
 
 
function _typeof(o) {
  return "function" == typeof Symbol && "symbol" === _typeof2(Symbol.iterator) ? module.exports = _typeof = function(o) {
      return _typeof2(o);
  } : module.exports = _typeof = function(o) {
      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : _typeof2(o);
  }, _typeof(o);
}
 
 
module.exports = _typeof;

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showShareMenu({
withShareTicket: true
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '测试一下',
success: function (res) {
wx.hideShareMenu()
},
fail: function (res) {
}
}
}

onLoad: function (options) {
  wx.hideShareMenu() // 禁止页面转发
}

需求：在子页面不希望用户能返回主页
方法：在代码中添加

onShow(){
    wx.hideHomeButton();
}