自定义导航栏对齐胶囊按钮，实现方法是通过获取胶囊按钮的顶部(top)高度和自身高度(height)，动态设置导航栏的样式(style)。

通过uni.getMenuButtonBoundingClientRect()，可以获取胶囊按钮的布局位置信息，包括width、height、top、bottom、left、right。

1、定义变量

export default {
   data() {
         return {
           searchBarTop: 0,   //搜索栏的外边框高度，单位px
            searchBarHeight: 0,  //搜索栏的高度，单位px
        }
    }
}

2、获取胶囊按钮的布局位置信息

onLoad(){
   let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
   this.searchBarTop = menuButtonInfo.top;
   this.searchBarHeight = menuButtonInfo.height;
}

3、绑定搜索栏的style

<view 
   class="search-bar-container" 
   :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
</view>

完整代码

<template>   
    <view 
       class="search-bar-container" 
       :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
   </view>
</template>

<script>
    export default {
        data() {
            return {
               searchBarTop: 0,   //搜索栏的外边框高度，单位px
                searchBarHeight: 0,  //搜索栏的高度，单位px
            }
        },
       onLoad(){
           let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
           this.searchBarTop = menuButtonInfo.top;
           this.searchBarHeight = menuButtonInfo.height;
       }
   }
</script>

各家小程序实现机制不同，可能存在的平台兼容问题

1. 浏览器内核差异

各家小程序的浏览器内核不同，可能会造成css兼容性问题，更多细节参考：https://ask.dcloud.net.cn/article/1318

1. 自定义组件渲染差异

微信(可以使用virtualHost配置)/QQ/百度/抖音这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，在写样式时需要注意：

• 使用flex布局时，直接给自定义组件的父元素设置为display:flex不能影响到自定义组件内部的根节点，需要设置当前自定义组件为display:flex才可以。
• 在自定义组件内部设置根元素高度为100%，不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以。

支付宝小程序默认启用了virtualHost配置不会插入节点，一般不存在如上问题。

#vendor.js过大的处理方式

小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。

关于体积控制，参考如下：

• 使用运行时代码压缩
  • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
  • cli创建的项目可以在package.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
• 使用分包优化，关于分包优化的说明

以下是PHP版实现，重点是，checkSessionKey接口要求加密的内容是空的，不能给空数组，需要对空字符串加密。(不包含openid，accesstoken，sig_method等)

hash_hmac加密时，key是用户的sessionKey。

private function signature(array &$data, string $openid): string
{
    $sessionKey = $this->getSessionKey($openid);
    $s = empty($data) ? "" : json_encode($data);
    return hash_hmac('sha256', $s, $sessionKey);
}



private function sign(array &$data, string $openid): array
{
	$data['signature'] = $this->sign($data, $openid);
	$data['sig_method'] = 'hmac_sha256'; // 固定参数
	$data['access_token'] = "后端保存的access_token";
	$data['openid'] = $openid;// 用户openid
	
	return $data;
}

$data = [];
$this->sign($data, $openid);

// 以下是laravel的http客户端请求方法，重点是签名完的数据用http_build_query拼接成query，并发送get请求。
$response = Http::acceptJson()->get('https://api.weixin.qq.com/wxa/checksession', http_build_query($data));

1. 创建一个CanvasContext对象，以获取绘图上下文。
2. 实现绘画事件的处理，包括开始绘画、移动和结束绘画。在事件处理函数中，需要配置动作坐标，以便在画布上绘制图形。
3. 创建一个清除画布的函数，用于重置坐标的高和宽，以便清除画布上的内容。
4. 实现保存画布内容的功能。在画布上绘制完成后，调用savePic函数将画布内容保存为图片。可以使用wx.canvasToTempFilePath方法将canvas内容保存为临时路径，然后再保存到相册中。

// 初始化画布const ctx = wx.createCanvasContext('canvas')

// 开始绘画事件处理函数function canvasStart(event) {
	ctx.beginPath()
	ctx.moveTo(event.changedTouches[0].x, event.changedTouches[0].y)
}

// 移动绘画事件处理函数function canvasMove(event) {
	ctx.lineTo(event.changedTouches[0].x, event.changedTouches[0].y)
	ctx.stroke()
}

// 结束绘画事件处理函数function canvasEnd(event) {
	ctx.draw()
}

// 清除画布函数function clearCanvas() {
	ctx.clearRect(0, 0, canvasWidth, canvasHeight)
}

// 保存画布内容函数function savePic() {
	wx.canvasToTempFilePath({
	canvasId: 'canvas',
	success: function (res) {
		const tempFilePath = res.tempFilePath
		wx.saveImageToPhotosAlbum({
		filePath: tempFilePath,
		success: function (res) {
		wx.showToast({ title: '保存成功', icon: 'success' })
	},
	fail: function (res) { console.log(res) }
	})
	},
	fail: function (res) { console.log(res) }
	}, 500)
}