WeChat アプレットは、ページ上の優先度が高いためにキャンバスをブロックできない問題を解決します。

、

解決策 1:

ポップアップ ボックスにイメージ、ビュー、またはボタン タグのみがある場合は、cover-view と cover-image を直接使用します。

解決策 2:

ポップアップに input などの他のラベルがある場合。上記のスキームには欠点があります。入力が隠れてしまい正常に表示できなくなります。この状況を考慮して、今回私が採用した解決策は、キャンバスをピクチャ表示に変換することです。

ここでは vant コンポーネント ライブラリを使用していますが、解決策は、主にindex.js ファイルを変更することによって、コンポーネントのソース コードを変更することです。

Index.js:、、

methods(){
    //添加方法
getImage() {
            const {
                pixelRatio
            } = wx.getSystemInfoSync();
            const width = 130,
                height = 130,
                _this = this
                _this.img = []
            wx.createSelectorQuery().in(_this)
                .select('#van-circle')
                .node()
                .exec(function (res) {
                    console.log("11",res[0])
                    wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        // 画布区域的高宽
                        width,
                        height,
                        // 生成图片的高宽 如果图片不清晰 需要增加pixelRatio
                        destWidth: width * pixelRatio,
                        destHeight: height * pixelRatio,
                        // 当前canvasid
                        canvasId: "van-circle",
                        // 导出图片类型
                        fileType: 'png',
                        // 如果当前canvas的type='2d' 需要指定当前canvas元素
                        // node可以通过 wx.createSelectorQuery
                        canvas: res[0].node,
                        success(imgRes) {
                            // 生成图片
                            _this.img.push(imgRes.tempFilePath)
                            _this.triggerEvent('getImg', imgRes)
                            console.log('imgRes.tempFilePath', _this.img);
                        },
                        fail(error) {
                            console.log(error);
                        }
                    },_this);
                })

        },
},
mounted(){
    //调用这个方法
    this.getImage()
}

 親コンポーネントで呼び出される

js:dada で 2 つの変数を定義します: img1:null;

 wxml:js

<view class="comprehensive-score">
                    <van-circle wx:if="{
   
   { !img1 }}" bindgetImg="getImg" value="{
   
   { total_score }}" text="{
   
   {total_score}}"
                        stroke-width="8" layer-color="#F7F6F5" color="{
   
   {gradientColor}}" />
                    <view class="inn" wx:else>
                        <text class="inntext">{
   
   { total_score }}</text>
                        <image mode="aspectFill" src="{
   
   { img1 }}"></image>
                    </view>
                    <text>综合得分</text>
                </view>

 インデックス.js:

 methods: {
        getImg(e) {
            this.setData({ img1: e.detail.tempFilePath })
            console.log("getImg",e.detail.tempFilePath)
        }
    }