HBuilderX3.9.5 mac 版 异常

HBuilderX3.9.5 mac 版 异常

产品分类：HbuilderX

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS ventura13.5.2

HBuilderX版本号：3.95

### 操作步骤：

```vue
<template>  
    <waterfall :loadmoreoffset="100" ref="waterfall" class="waterfall" fixFreezing :bounce="false" :showScrollbar="false" :leftGap="12" :rightGap="12" :columnGap="10" :columnWidth="auto" :columnCount="2" @scroll="scroll" @loadmore="loadMore">  
        <header>  
            <!-- 渐变导航栏 -->  
            <view class="navbar" ref="navbar" :style="{ height: navTotalHeight + 'px' }" />  

            <view class="shop u-flex-y-center" :style="{ top: statusBarHeight + 'px' }">  
                <text class="shop-name u-line-1" ref="shopName">健康大药房</text>  
                <text class="shop-name-icon" ref="shopNameIcon">ㄑ</text>  
            </view>  

            <view ref="searchTop" class="search u-flex-y-center u-flex-end" :style="{ top: searchTop + 'px' }">  
                <view class="search-view" :style="{ width: searchWidth + 'px' }">  
                    <u-search ref="uSearch" placeholder="搜索商品名称、厂家" height="64rpx" bgColor="#F7F8FB" disabled :showAction="false" @click="onSearch" />  
                </view>  
            </view>  
        </header>  

        <header>  
            <!-- 顶部banner -->  
            <view ref="backTop" class="group-0">  
                <u-swiper :list="group0List" circular height="540rpx" radius="0" keyName="imageUrl" @click="clickBanner('top')" />  

                <!-- 金刚区 -->  
                <view v-if="group1List.length" class="group-1" style="margin-top: -24rpx">  
                    <view class="group-1-v">  
                        <uni-grid :column="4" :showBorder="false" :square="false">  
                            <uni-grid-item v-for="(item, index) in group1List" :index="index" :key="index" class="group-1-item">  
                                <view class="u-flex-y u-flex-center u-flex-items-center">  
                                    <image class="group-1-img" :src="item.imageUrl" mode="aspectFill" />  
                                    <text class="group-1-text u-line-1">{{ item.name }}</text>  
                                </view>  
                            </uni-grid-item>  
                        </uni-grid>  
                    </view>  
                </view>  

                <template v-for="(item,index) in sortList">  
                    <component :key="index" :is="item.componentName" :list="item.list" />  
                </template>  
            </header>  

            <!-- 推荐商品 -->  
            <cell v-for="(item,index) in goodsList" :key="item.goodsId">  
                <waterfall-item :item="item" :type="1" />  
            </cell>  
            <header class="load-more u-flex-xy-center">  
                <uni-load-more :status="loadStatus" />  
            </header>  

            <!-- 回到顶部 -->  
            <cover-view class="back-top">  
                <u-transition mode="fade" :duration="300" :show="backTopShow">  
                    <image class="back-top-img" src="/static/images/index/top.png" @click="onBackTop" />  
                </u-transition>  
            </cover-view>  
        </template>  
</template>  

<script>  
import one1 from '@/components/index/one1.vue'  
import one2 from '@/components/index/one2.vue'  
import one3 from '@/components/index/one3.vue'  
import one4 from '@/components/index/one4.vue'  
import one5 from '@/components/index/one5.vue'  
import { getHomeData } from '@/api/index.js'  
import { getGoodsPage } from '@/api/goods.js'  
import { isJsonString } from '@/utils/method.js'  
const dom = weex.requireModule('dom')  
const BindingX = uni.requireNativePlugin('bindingx')  
export default {  
    components: {  
        one1,  
        one2,  
        one3,  
        one4,  
        one5  
    },  
    data() {  
        return {  
            scrollTop: 0,  
            windowWidth: uni.$u.sys().windowWidth,  

            // nav导航栏总高度  
            navTotalHeight: 0,  
            searchOpacity: 0,  
            // 搜索框上移多少距离吸顶  
            distance: 0,  
            // 搜索框距离顶部的距离  
            searchTop: uni.$u.getPx('422rpx'),  
            // 搜索框初始宽度  
            searchWidth: uni.$u.getPx('686rpx'),  
            defSearchWidth: uni.$u.getPx('686rpx'),  
            // 搜索框吸顶宽度  
            endSearchWidth: uni.$u.getPx('468rpx'),  
            // 搜索框最多可变化的宽度 = 搜索框吸顶宽度 - 搜索框初始宽度  
            movingDistance: uni.$u.getPx('218rpx'),  

            // 顶部banner  
            group0List: [],  
            // 金刚区  
            group1List: [],  
            // 横向固定菜单(2个)  
            group2List: [],  
            group2Sort: 0,  
            // 运营banner  
            group3List: [],  
            group3Sort: 0,  
            // 热卖店铺  
            group4List: [],  
            group4Sort: 0,  
            // 店铺专区  
            group5List: [],  
            group5Sort: 0,  
            group5ShopId: 0,  
            // 热卖活动  
            group6List: [],  
            group6Sort: 0,  

            statusBarHeight: uni.$u.sys().statusBarHeight,  

            pageNum: 1,  
            pageSize: 10,  
            loadStatus: 'more',  
            goodsList: [],  

            swiperDotIndex: 0,  
            dotsStyles: {  
                backgroundColor: '#D8D8D8',  
                border: 'none',  
                selectedBackgroundColor: '#2DC8A1',  
                selectedBorder: 'none',  
                bottom: '16rpx'  
            },  

            sortList: []  
        }  
    },  

    binding: null,  

    computed: {  
        // 向下滑动超过500距离显示  
        backTopShow() {  
            return this.scrollTop > 500  
        }  
    },  

    onLoad() {  
        // 导航栏总高度  
        this.navTotalHeight = this.statusBarHeight + 44  

        // 搜索框上移多少距离吸顶  
        const top = (44 - uni.$u.getPx('64rpx')) / 2  
        this.distance = this.searchTop - this.statusBarHeight + top  

        this.getHomeData()  
        this.getGoodsList()  
    },  

    onReady() {  
        this.handleBindIngX()  
    },  

    onPullDownRefresh() {  
        console.log('下拉刷新')  
        // 重置 loadmore 事件  
        // this.$refs.backTop.resetLoadmore()  

        uni.stopPullDownRefresh()  
    },  

    methods: {  
        handleBindIngX() {  
            if (this.binding?.token) return  

            this.$nextTick(() => {  
                // BindingX 是weex提供的一种预描述交互语法。用来处理视图层的交互和动效  
                this.binding = BindingX.bind({  
                    eventType: 'scroll', // 描述事件触发类型是scroll触发  
                    anchor: this.getEl(this.$refs.waterfall), // 滚动容器  
                    props: [ // props数组用来描述伴随scroll事件需要改变的元素节点  
                        {  
                            // 导航栏渐变  
                            element: this.getEl(this.$refs.navbar), // 动画元素  
                            property: 'opacity', // 动画属性  
                            expression: `0+y/${ this.distance }` // 表达式 说明了y从0-180,对应的值是0-1  
                        },  
                        {  
                            // 左侧文字渐变  
                            element: this.getEl(this.$refs.shopName), // 动画元素  
                            property: 'color', // 动画属性  
                            expression: `evaluateColor("#FFFFFF","#333333",min(y,${ this.distance })/${ this.distance })`  
                        },  
                        {  
                            // 左侧文字右边小箭头渐变  
                            element: this.getEl(this.$refs.shopNameIcon), // 动画元素  
                            property: 'color', // 动画属性  
                            expression: `evaluateColor("#FFFFFF","#333333",min(y,${ this.distance })/${ this.distance })`  
                        },  
                        {  
                            // 搜索框背景渐变  
                            element: this.getEl(this.$refs.uSearch), // 动画元素  
                            property: 'background-color', // 动画属性  
                            expression: `evaluateColor("#FFFFFF","#F7F8FB",min(y,${ this.distance })/${ this.distance })`  
                        }  
                    ]  
                })  
                console.log('开始绑定动画', this.binding)  
            })  
        },  

        // 监听滚动处理  
        listenScrolle() {  
            // navOp 值: 0-1 1表示吸顶了  
            let navOp = this.scrollTop / this.distance  
            this.searchOpacity = navOp  

            if (navOp >= 1) navOp = 1  

            const widthRemain = this.windowWidth / 375 * this.movingDistance  
            const width = navOp > 0 ? this.defSearchWidth - widthRemain * navOp : this.endSearchWidth  

            // 初始宽度  
            if (navOp <= 0) return this.searchWidth = this.defSearchWidth  

            if (width <= this.endSearchWidth) {  
                this.searchWidth = this.endSearchWidth  
            } else {  
                this.searchWidth = width  
            }  
        },  

        // 获取元素  
        getEl(el) {  
            if (typeof el === 'string' || typeof el === 'number') return el  
            if (WXEnvironment) {  
                return el.ref  
            } else {  
                return el instanceof HTMLElement ? el : el.$el  
            }  
        },  

        // 首页运营板块  
        getHomeData() {  
            getHomeData().then(res => {  
                console.log('res', res.data)  
                res.data.forEach(item => {  
                    // 顶部banner  
                    if (item.sort == -2) {  
                        this.group0List = item.items || []  
                    }  
                    // 金刚区  
                    else if (item.sort == -1) {  
                        this.group1List = item.items || []  
                    }  
                    // 横向固定菜单(2个)  
                    else if (item.type == 1) {  
                        this.group2Sort = item.sort  
                        const arr = item.items || []  
                        arr.forEach(item2 => {  
                            if (isJsonString(item2.expand)) {  
                                const expandObj = JSON.parse(item2.expand)  
                                item2.backgroundImage = expandObj.backgroundImage  
                                item2.nameColor = expandObj.nameColor  
                                item2.subNameColor = expandObj.subNameColor  
                            } else {  
                                item2.backgroundImage = 'linear-gradient(to bottom, #FBEDE0, #FFFFFF)'  
                                item2.nameColor = '#008E6A'  
                                item2.subNameColor = '#4A9F8B'  
                            }  
                        })  
                        this.group2List = arr  
                        this.sortList.push({  
                            componentName: 'one1',  
                            sort: item.sort,  
                            list: arr  
                        })  
                    }  
                    // 运营banner  
                    else if (item.type == 2) {  
                        this.group3List = item.items || []  
                        this.group3Sort = item.sort  
                        this.sortList.push({  
                            componentName: 'one2',  
                            sort: item.sort,  
                            list: item.items || []  
                        })  
                    }  
                    // 热卖店铺  
                    else if (item.type == 3) {  
                        this.group4List = item.items || []  
                        this.group4Sort = item.sort  
                        this.sortList.push({  
                            componentName: 'one3',  
                            sort: item.sort,  
                            list: item.items || []  
                        })  
                    }  
                    // 店铺专区  
                    else if (item.type == 4) {  
                        this.group5List = item.items || []  
                        this.group5Sort = item.sort  
                        this.group5ShopId = item.objId  
                        this.sortList.push({  
                            componentName: 'one4',  
                            sort: item.sort,  
                            list: item.items || []  
                        })  
                    }  
                    // 热卖活动  
                    else if (item.type == 5) {  
                        this.group6List = item.items || []  
                        this.group6Sort = item.sort  
                        this.sortList.push({  
                            componentName: 'one5',  
                            sort: item.sort,  
                            list: item.items || []  
                        })  
                    }  
                })  

                console.log('sortList', this.sortList)  
            })  
        },  

        // 点击banner  
        clickBanner(type) {  
            if (type == 'top') {  

            } else if (type == 'yy') {  

            }  
        },  

        // 回到顶部  
        onBackTop() {  
            dom.scrollToElement(this.$refs.backTop, {  
                offset: 0,  
                animated: false  
            })  
        },  

        // 页面滚动监听  
        scroll(e) {  
            this.scrollTop = Math.abs(e.contentOffset.y)  
            this.listenScrolle()  
        },  

        // 上拉加载  
        loadMore() {  
            if (this.loadStatus === 'noMore') return  

            this.pageNum++  
            this.getGoodsList()  
        },  

        // 轮播图切换  
        swiperChange(e) {  
            this.swiperDotIndex = e.detail.current  
        },  

        // 首页商品列表  
        getGoodsList() {  
            return new Promise((resolve) => {  
                this.loadStatus = 'loading'  
                getGoodsPage({  
                    pageNum: this.pageNum,  
                    pageSize: this.pageSize  
                }).then(res => {  
                    this.goodsList = this.pageNum == 1 ? res.data : this.goodsList.concat(res.data)  
                    this.loadStatus = res.data.length >= this.pageSize ? 'more' : 'noMore'  
                    // this.$forceUpdate()  
                    resolve()  
                })  
            })  
        },  

        // 点击搜索  
        onSearch() {  
            // 跳转到列表筛选页  
        }  
    }  
}  
</script>  

<style lang="scss" scoped>  
.back-top {  
    position: fixed;  
    right: 24rpx;  
    bottom: 40rpx;  
    z-index: 999;  

    &-img {  
        width: 72rpx;  
        height: 72rpx;  
    }  
}  

.load-more {  
    width: 750rpx;  
}  

.group-1 {  
    width: 750rpx;  
    margin-bottom: 20rpx;  
    padding: 0 24rpx;  

    &-v {  
        background-color: #ffffff;  
        padding: 32rpx 0 0;  
        border-radius: 16rpx;  
    }  

    .group-1-item {  
        margin-bottom: 26rpx;  

        .group-1-img {  
            width: 112rpx;  
            height: 112rpx;  
            margin-bottom: 14rpx;  
        }  

        .group-1-text {  
            font-size: 28rpx;  
            color: #333333;  
            line-height: 40rpx;  
            text-align: center;  
        }  
    }  
}  

.group-0 {  
    flex: 1;  
    width: 750rpx;  
    height: 540rpx;  
}  

.navbar {  
    width: 750rpx;  
    position: fixed;  
    left: 0;  
    top: 0;  
    z-index: 8;  
    opacity: 0;  
    background-color: #ffffff;  
}  

.shop {  
    position: fixed;  
    left: 0;  
    z-index: 10;  
    padding-left: 46rpx;  
    height: 44px;  

    .shop-name {  
        font-size: 26rpx;  
        font-weight: bold;  
        color: #FFFFFF;  
        line-height: 36rpx;  
        margin-right: 4rpx;  
    }  

    .shop-name-icon {  
        font-size: 20rpx;  
        font-weight: bold;  
        line-height: 36rpx;  
        color: #FFFFFF;  
        transform: rotate(-90deg);  
    }  
}  

.search {  
    position: fixed;  
    left: 0;  
    z-index: 10;  
    width: 750rpx;  
    padding: 0 32rpx;  
    height: 44px;  
}  

.search-top {  
    position: fixed;  
    left: 0;  
    z-index: 10;  
    width: 750rpx;  
    padding: 0 32rpx;  
    height: 44px;  
    background-color: #DF7641;  
}  

.waterfall {  
    background-color: #F6F9FA;  
    position: relative;  
    flex: 1;  
    width: 750rpx;  
}  
</style>

预期结果：

正常

实际结果：

不正常，编译到安卓，控制台会报错

bug描述：

同样的代码编译到ios手机上正常，编译到安卓上就会偶然出现这个报错提示：
reportJSException >>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack -> Uncaught SyntaxError: Unexpected token ';'

而且编译到安卓后，每次保存控制台会出现2次编译结果，偶尔又只有出现一次
21:19:04.587 正在同步手机端程序文件...
21:19:04.620 正在同步手机端程序文件...