HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【交流】大家都怎么使用UNIAPP的呢?

混合开发

用了这么长时间的UNI-APP,一直在思考一个问题:怎么使用UNI-APP是最容易对项目进行维护和迭代开发的呢?

不知道大家都是怎么用的:

  • 跨端开发技术应用

    1. 一个项目代码,支持多端应用: 比如同时支持H5、小程序、Android APP、IOS APP,充分使用UNI-APP预编译技术。
    2. 统一技术栈,支持多个项目开发: 比如统一使用Vue框架,以每个端单独建立一个项目为主。
  • 实际项目使用情况

    1. 一个项目代码同时支持了Android APP、IOS APP
    2. 一个项目代码同时支持了Android APP、IOS APP、小程序(weapp、alipay)应用
    3. 一个项目代码同时支持了H5、Android APP、IOS APP
    4. 一个项目代码同时支持了H5、小程序(weapp、alipay)应用
    5. 分别创建不同的项目代码维护H5、小程序、Android APP、IOS APP应用
继续阅读 »

用了这么长时间的UNI-APP,一直在思考一个问题:怎么使用UNI-APP是最容易对项目进行维护和迭代开发的呢?

不知道大家都是怎么用的:

  • 跨端开发技术应用

    1. 一个项目代码,支持多端应用: 比如同时支持H5、小程序、Android APP、IOS APP,充分使用UNI-APP预编译技术。
    2. 统一技术栈,支持多个项目开发: 比如统一使用Vue框架,以每个端单独建立一个项目为主。
  • 实际项目使用情况

    1. 一个项目代码同时支持了Android APP、IOS APP
    2. 一个项目代码同时支持了Android APP、IOS APP、小程序(weapp、alipay)应用
    3. 一个项目代码同时支持了H5、Android APP、IOS APP
    4. 一个项目代码同时支持了H5、小程序(weapp、alipay)应用
    5. 分别创建不同的项目代码维护H5、小程序、Android APP、IOS APP应用
收起阅读 »

nvue中使用swiper的显示问题

nvue

今天遇到一个问题,之前在vue下运行的swiper无论如何都无法正常运行,就是显示不出来。经过反复试验,总算发现了问题所在。

之前的vue写法是

没有问题,然而转到nvue,中间的内容无论如何都无法显示了。很困惑。最后发现不能使用block来做循环,必须直接在swiper-item上进行循环

这样就可以显示了,具体原因没有看,给大家一个参考,避免多花时间。

继续阅读 »

今天遇到一个问题,之前在vue下运行的swiper无论如何都无法正常运行,就是显示不出来。经过反复试验,总算发现了问题所在。

之前的vue写法是

没有问题,然而转到nvue,中间的内容无论如何都无法显示了。很困惑。最后发现不能使用block来做循环,必须直接在swiper-item上进行循环

这样就可以显示了,具体原因没有看,给大家一个参考,避免多花时间。

收起阅读 »

renderjs-echarts-demo 在APP端和H5上的点击事件

demo就是官方提供的demo,
主要就是在main.js中加
//#ifdef H5
window.wx = {}
//#endif
但是加了是否会出现其他的问题,暂时不知道..

解决方案是在CSDN上看到的,具体原因不在解释;看图片
代码部分

<script>  
export default {  
    .......,  
    methods:{  
       onViewClick(options) {  
      console.log(options)  
    }  
    }  
}  
</script>  

<script module="echarts" lang="renderjs">  
    let myChart  
    export default {  
        data() {  
            return {  
                clickData: null  
            }  
        },  
        mounted() {  
            if (typeof window.echarts === 'function') {  
                this.initEcharts()  
            } else {  
                // 动态引入较大类库避免影响页面展示  
                const script = document.createElement('script')  
                // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算  
                script.src = 'static/echarts.js'  
                script.onload = this.initEcharts.bind(this)  
                document.head.appendChild(script)  
            }  
        },  
        methods: {  
            initEcharts() {  
                myChart = echarts.init(document.getElementById('echarts'))  
                // 观测更新的数据在 view 层可以直接访问到  
                let _this = this;  
                myChart.setOption(this.option);  

                myChart.on('click', function(e) {  
                    _this.clickData = e;  
                })  
            },  
            updateEcharts(newValue, oldValue, ownerInstance, instance) {  
                // 监听 service 层数据变更  
                myChart.setOption(newValue);  
            },  
            onClick(event, ownerInstance) {  
                // 调用 service 层的方法  
                let _this = this;  
                ownerInstance.callMethod('onViewClick', {  
                    name : _this.clickData.name,  
                    val : _this.clickData.value  
                })  
            }  
        }  
    }  
</script>
继续阅读 »

demo就是官方提供的demo,
主要就是在main.js中加
//#ifdef H5
window.wx = {}
//#endif
但是加了是否会出现其他的问题,暂时不知道..

解决方案是在CSDN上看到的,具体原因不在解释;看图片
代码部分

<script>  
export default {  
    .......,  
    methods:{  
       onViewClick(options) {  
      console.log(options)  
    }  
    }  
}  
</script>  

<script module="echarts" lang="renderjs">  
    let myChart  
    export default {  
        data() {  
            return {  
                clickData: null  
            }  
        },  
        mounted() {  
            if (typeof window.echarts === 'function') {  
                this.initEcharts()  
            } else {  
                // 动态引入较大类库避免影响页面展示  
                const script = document.createElement('script')  
                // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算  
                script.src = 'static/echarts.js'  
                script.onload = this.initEcharts.bind(this)  
                document.head.appendChild(script)  
            }  
        },  
        methods: {  
            initEcharts() {  
                myChart = echarts.init(document.getElementById('echarts'))  
                // 观测更新的数据在 view 层可以直接访问到  
                let _this = this;  
                myChart.setOption(this.option);  

                myChart.on('click', function(e) {  
                    _this.clickData = e;  
                })  
            },  
            updateEcharts(newValue, oldValue, ownerInstance, instance) {  
                // 监听 service 层数据变更  
                myChart.setOption(newValue);  
            },  
            onClick(event, ownerInstance) {  
                // 调用 service 层的方法  
                let _this = this;  
                ownerInstance.callMethod('onViewClick', {  
                    name : _this.clickData.name,  
                    val : _this.clickData.value  
                })  
            }  
        }  
    }  
</script>
收起阅读 »

【记录】微信支付,调起支付接口,payment微信:-1]General errors

微信支付

ios端可以调起支付 安卓端不能调起支付,会报General errors的错误
原因是在微信开放平台填写应该签名信息的时候使用了大写 用冒号隔开的签名
后来修改成 小写的一串就解决了 修改之后需要稍等一会 清除缓存应该就可以了 。 如果还是报错 那应该是其他原因。

继续阅读 »

ios端可以调起支付 安卓端不能调起支付,会报General errors的错误
原因是在微信开放平台填写应该签名信息的时候使用了大写 用冒号隔开的签名
后来修改成 小写的一串就解决了 修改之后需要稍等一会 清除缓存应该就可以了 。 如果还是报错 那应该是其他原因。

收起阅读 »

uni app环境下解决video无法跟随div滚动条滚动的问题

video

uni app环境下vue文件中,video因为用的是原生组件,所以只能跟随页面的滚动条。

假如你写了一个带滚动条的div,里面写了一个video标签,那对不起,video不会跟着滚动。

废话不多说,解决代码如下:

video组件的代码如下,实现思路就是借助iframe,通信就采用手动去触发事件

<template>  
    <iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank" style="border:1px solid;height: 300px;width: 100%"></iframe>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                onloadCode: `  
                const url = 'https://vd3.bdstatic.com/mda-mja2qsy47mbyh1xc/sc/cae_h264_clips/1633918903861514556/mda-mja2qsy47mbyh1xc.mp4?auth_key=1634030413-0-0-7898726f7bd328302e2119fdf694fd5e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='  
                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';  
                const iframe = top.document.getElementsByTagName('iframe')[0]  
                var evObj = document.createEvent('MouseEvents');  
                evObj.initEvent( 'event1', true, false );  
                iframe.dispatchEvent(evObj)  
                `  
            }   
        },  
        onShow() {  

        },  

        methods: {  
            event1(a) {  
                console.log(a)  
            },  
            event2(a) {  
                console.log(a)  
            }  
        }  
    }  
</script>  

<style>  
</style>  

以下是调用video,解决div滚动时video不跟随的代码

<template>  
    <view class="content">  
        <view class="text-area">  
            <div class="pos">  
                <Video />  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            </div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
        </view>  
    </view>  
</template>  

<script>  
    import Video from './video/index.vue'  
    export default {  
        components: {  
            Video  
        }  
    }  
</script>  

<style>  
    .pos {  
        position: fixed;  
        bottom: 0;  
        background: red;  
        left: 0;  
        right: 0;  
        height: 500px;  
        overflow: auto;  
    }  
    .zw {  
        word-break: break-all;  
        height: 800px;  
    }  
</style>

app运行效果图如下,可以看出video是可以跟随div滚动的

继续阅读 »

uni app环境下vue文件中,video因为用的是原生组件,所以只能跟随页面的滚动条。

假如你写了一个带滚动条的div,里面写了一个video标签,那对不起,video不会跟着滚动。

废话不多说,解决代码如下:

video组件的代码如下,实现思路就是借助iframe,通信就采用手动去触发事件

<template>  
    <iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank" style="border:1px solid;height: 300px;width: 100%"></iframe>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                onloadCode: `  
                const url = 'https://vd3.bdstatic.com/mda-mja2qsy47mbyh1xc/sc/cae_h264_clips/1633918903861514556/mda-mja2qsy47mbyh1xc.mp4?auth_key=1634030413-0-0-7898726f7bd328302e2119fdf694fd5e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='  
                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';  
                const iframe = top.document.getElementsByTagName('iframe')[0]  
                var evObj = document.createEvent('MouseEvents');  
                evObj.initEvent( 'event1', true, false );  
                iframe.dispatchEvent(evObj)  
                `  
            }   
        },  
        onShow() {  

        },  

        methods: {  
            event1(a) {  
                console.log(a)  
            },  
            event2(a) {  
                console.log(a)  
            }  
        }  
    }  
</script>  

<style>  
</style>  

以下是调用video,解决div滚动时video不跟随的代码

<template>  
    <view class="content">  
        <view class="text-area">  
            <div class="pos">  
                <Video />  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            </div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
        </view>  
    </view>  
</template>  

<script>  
    import Video from './video/index.vue'  
    export default {  
        components: {  
            Video  
        }  
    }  
</script>  

<style>  
    .pos {  
        position: fixed;  
        bottom: 0;  
        background: red;  
        left: 0;  
        right: 0;  
        height: 500px;  
        overflow: auto;  
    }  
    .zw {  
        word-break: break-all;  
        height: 800px;  
    }  
</style>

app运行效果图如下,可以看出video是可以跟随div滚动的

收起阅读 »

vue3编译到微信小程序,报错

bug提交

// 我在设置里面选了vue3版本其他没问题就是使用不了jsx
export default {
setup() {
const msg = ref(123);
const change = param => {
console.log(param);
msg.value ;
};
const dianWo = <button type="primary" onTap={change}>点我</button>

return () => (  
  <view class="index">  
    <view onTap={change.bind(null, 221)}>{msg.value}</view>  
    <button type="primary" onTap={change}>  
      {obj.zxc?.length}  
    </button>  
    {dianWo}  
  </view>  
);  

}
};

继续阅读 »

// 我在设置里面选了vue3版本其他没问题就是使用不了jsx
export default {
setup() {
const msg = ref(123);
const change = param => {
console.log(param);
msg.value ;
};
const dianWo = <button type="primary" onTap={change}>点我</button>

return () => (  
  <view class="index">  
    <view onTap={change.bind(null, 221)}>{msg.value}</view>  
    <button type="primary" onTap={change}>  
      {obj.zxc?.length}  
    </button>  
    {dianWo}  
  </view>  
);  

}
};

收起阅读 »

不小心点到大数据的控制台文件,导致HBX启动就卡死,解决办法。

打开这个路径 :C:\Users\Administrator\AppData\Roaming\HBuilder X\autosaves
里面有几个文件,看一下哪个最大。比如我的 是 1.43M 跟那些差距比较大,,直接拷贝出来桌面。再启动 就没有那个卡死的文件了
再删除即可。
我这个的文件名没有后缀 c9b43b5121437ec2868cb22cdc559342_

继续阅读 »

打开这个路径 :C:\Users\Administrator\AppData\Roaming\HBuilder X\autosaves
里面有几个文件,看一下哪个最大。比如我的 是 1.43M 跟那些差距比较大,,直接拷贝出来桌面。再启动 就没有那个卡死的文件了
再删除即可。
我这个的文件名没有后缀 c9b43b5121437ec2868cb22cdc559342_

收起阅读 »

安卓华为手机,设置了亮度,系统亮度调节app亮度不改变?

plus.screen.setBrightness(0.8);
if(that.brightness > 0.8){
return false
}
uni.setScreenBrightness({
value: 0.8,
success: function () {
console.log('success');
}
});

继续阅读 »

plus.screen.setBrightness(0.8);
if(that.brightness > 0.8){
return false
}
uni.setScreenBrightness({
value: 0.8,
success: function () {
console.log('success');
}
});

收起阅读 »

今天一更新版本他把我几个页面的代码里的中文全部改成了乱码

咨询下Hbuilder版本问题

今天一更新版本他把我几个页面的代码里的中文全部改成了乱码这该怎么办,一个个改回来工程量有点大

今天一更新版本他把我几个页面的代码里的中文全部改成了乱码这该怎么办,一个个改回来工程量有点大

【北京】个人项目,之前做了2年了。现在有些功能需要修改。

外包

使用的nvue开发的。 要求高手,2年以上uniapp相关开发经验。

最好在北京,可以在你附近 或者你指定一个方便的地方现场开发。

可选远程开发。远程开发可能效率不太好。

有意请加我VX: xiaoxuetong888 。联系我时请友情出示一下 开发过的作品。我不懂技术 只能通过开发过的作品来判断。

继续阅读 »

使用的nvue开发的。 要求高手,2年以上uniapp相关开发经验。

最好在北京,可以在你附近 或者你指定一个方便的地方现场开发。

可选远程开发。远程开发可能效率不太好。

有意请加我VX: xiaoxuetong888 。联系我时请友情出示一下 开发过的作品。我不懂技术 只能通过开发过的作品来判断。

收起阅读 »