HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

没有十年脑血栓做不出来这种跨平台设计

image map canvas 兼容性
<template>  
    <view>  
        <image ref="logo" class="logo" src="/static/logo.png"></image>  
        <text>{{cxtInfo}}</text>  
        <text>{{text}}</text>  
     <view class="center">  
        <canvas id="canvas" class="center" style="width: 200px;height: 200px;border: 1px solid red;" ></canvas>  
     </view>  
         <button @click="draw()">测试</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                cxt : null as CanvasRenderingContext2D | null,  
                cxtInfo:{},  
                text:"",  
                title: 'Hello'  
            }  
        },  
        onReady() {  
             console.info("onReady")  
             uni.createCanvasContextAsync({  
              id: 'canvas',  
              component: getCurrentInstance()?.proxy,  
              success: (context : CanvasContext) => {  
                const canvasContext = context.getContext('2d')!;  
                const canvas = canvasContext.canvas;  
                let {offsetWidth,offsetHeight} = canvas;  

                // 处理高清屏逻辑  
                const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;  
                this.cxtInfo = {offsetWidth,offsetHeight,dpr}  
                canvas.width = canvas.offsetWidth * dpr;  
                canvas.height = canvas.offsetHeight * dpr;  
                canvasContext.scale(dpr, dpr); // 仅需调用一次,当调用 reset 方法后需要再次 scale  
                this.cxt= canvasContext;  
              }  
            })  
        },  
        onLoad() {  
            console.info("onLoad")  
        },  
        methods: {  
            draw(){  
                const cxt =this.cxt!;  
                cxt.beginPath();  
                cxt.lineWidth = 2;  
                cxt.arc(75, 75, 50, 0, Math.PI * 2, true);  
                cxt.stroke();  

                let img=this.$refs["logo"] as UniImageElement;  
                if(img==null){  
                     return;  
                }  

                console.info ("img ",img);  
                console.info ("img.attributes ",img.attributes);  
                console.info ("img.src ",img.src);  
                let attrs= img.attributes ;  
             console.info ("attrs.size ",attrs.size);  

                // #ifdef  WEB  
                for(let i=0;i< attrs.length ; i++){  
                     let attr = attrs[i];   
                    console.info ("img.attributes."+attr["name"],"=", attr["value"] );  
                }  
                // #endif  
                // #ifdef APP  
                  attrs.forEach((v,k)=>{  //web平台没有  
                     console.info ("img.attributes."+k,v);  
                   })  
                // #endif  

                console.info ("img type",typeof img);  
                console.info (img instanceof Image);  
                let lc= img.lastChild;  
                console.info ("lastChild is not null ",lc!=null);  

                let bcr=img.getBoundingClientRect();  
                console.info ("BoundingClientRect ",bcr);  
                if(img instanceof Image){//安卓   
                    this.text="Image"  
                    cxt.drawImage(img,50,50);  
                }else if(lc!=null && lc instanceof Image){//Web  
                    this.text="Image.lastChild"  
                    cxt.drawImage(lc,100,100);  
                }else{//IOS  
                    this.text="new Image"  
                    let image = new Image(bcr.width, bcr.height)  
                    image.onload=(  )=>{  
                        console.info("image onload ",typeof image)  
                        cxt.drawImage(image,0,0,100,100);  
                    }  
                    image.src = img.attributes.get("src") as string;  
                }  

            }  
        }  
    }  
</script>  

<style>  
    .logo {  
        height: 100px;  
        width: 100px;  
        margin: 100px auto 25px auto;  

    }  

    .title {  
        font-size: 18px;  
        color: #8f8f94;  
    text-align: center;  
    }  
    .center {  
        height: 100%;  
        flex: auto;  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  
</style>  
UniElement Extends UniElement  // {src:string ,....}  
Image  Extends UniElement    // {src : string }  

CanvasRenderingContext2D   
drawImage(imageResource: Image, sx: number, sy: number): void  

Image 标签(UniElement )竟然和 Image 对象毫无关系
元素属性 attributes 对象 Map<string, any> 竟然无一方式可以跨平台遍历
且Image标签的src属性在不同平台所在位置还不一样
且 对于 attributes ["src"],attributes .get("src") 两张写法竟然还不等价
lc instanceof Image 如何不在前面排除null 竟然会报错null is not an object (evaluating 'Object.getPrototypeOf(e)') 而不是直接返回false

二进制是每种语言基础中的基础 文件读取 encoding 还给限制死了 只能是 base64 utf-8 然后文档还一边说可以不写 这操作就很魔幻

基本上所有api都支持 success,fail,complete 那么所有 opt 都继承 Iopt<S,E> 不就可以统一包装支持 Promise<S,E>了吗

复杂点如果传入了 success,fail,complete 就不返回 Promise 简单就不论是否传入都返回Promise 让opt中的success,fail,complete优先回调就好了

继续阅读 »
<template>  
    <view>  
        <image ref="logo" class="logo" src="/static/logo.png"></image>  
        <text>{{cxtInfo}}</text>  
        <text>{{text}}</text>  
     <view class="center">  
        <canvas id="canvas" class="center" style="width: 200px;height: 200px;border: 1px solid red;" ></canvas>  
     </view>  
         <button @click="draw()">测试</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                cxt : null as CanvasRenderingContext2D | null,  
                cxtInfo:{},  
                text:"",  
                title: 'Hello'  
            }  
        },  
        onReady() {  
             console.info("onReady")  
             uni.createCanvasContextAsync({  
              id: 'canvas',  
              component: getCurrentInstance()?.proxy,  
              success: (context : CanvasContext) => {  
                const canvasContext = context.getContext('2d')!;  
                const canvas = canvasContext.canvas;  
                let {offsetWidth,offsetHeight} = canvas;  

                // 处理高清屏逻辑  
                const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;  
                this.cxtInfo = {offsetWidth,offsetHeight,dpr}  
                canvas.width = canvas.offsetWidth * dpr;  
                canvas.height = canvas.offsetHeight * dpr;  
                canvasContext.scale(dpr, dpr); // 仅需调用一次,当调用 reset 方法后需要再次 scale  
                this.cxt= canvasContext;  
              }  
            })  
        },  
        onLoad() {  
            console.info("onLoad")  
        },  
        methods: {  
            draw(){  
                const cxt =this.cxt!;  
                cxt.beginPath();  
                cxt.lineWidth = 2;  
                cxt.arc(75, 75, 50, 0, Math.PI * 2, true);  
                cxt.stroke();  

                let img=this.$refs["logo"] as UniImageElement;  
                if(img==null){  
                     return;  
                }  

                console.info ("img ",img);  
                console.info ("img.attributes ",img.attributes);  
                console.info ("img.src ",img.src);  
                let attrs= img.attributes ;  
             console.info ("attrs.size ",attrs.size);  

                // #ifdef  WEB  
                for(let i=0;i< attrs.length ; i++){  
                     let attr = attrs[i];   
                    console.info ("img.attributes."+attr["name"],"=", attr["value"] );  
                }  
                // #endif  
                // #ifdef APP  
                  attrs.forEach((v,k)=>{  //web平台没有  
                     console.info ("img.attributes."+k,v);  
                   })  
                // #endif  

                console.info ("img type",typeof img);  
                console.info (img instanceof Image);  
                let lc= img.lastChild;  
                console.info ("lastChild is not null ",lc!=null);  

                let bcr=img.getBoundingClientRect();  
                console.info ("BoundingClientRect ",bcr);  
                if(img instanceof Image){//安卓   
                    this.text="Image"  
                    cxt.drawImage(img,50,50);  
                }else if(lc!=null && lc instanceof Image){//Web  
                    this.text="Image.lastChild"  
                    cxt.drawImage(lc,100,100);  
                }else{//IOS  
                    this.text="new Image"  
                    let image = new Image(bcr.width, bcr.height)  
                    image.onload=(  )=>{  
                        console.info("image onload ",typeof image)  
                        cxt.drawImage(image,0,0,100,100);  
                    }  
                    image.src = img.attributes.get("src") as string;  
                }  

            }  
        }  
    }  
</script>  

<style>  
    .logo {  
        height: 100px;  
        width: 100px;  
        margin: 100px auto 25px auto;  

    }  

    .title {  
        font-size: 18px;  
        color: #8f8f94;  
    text-align: center;  
    }  
    .center {  
        height: 100%;  
        flex: auto;  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  
</style>  
UniElement Extends UniElement  // {src:string ,....}  
Image  Extends UniElement    // {src : string }  

CanvasRenderingContext2D   
drawImage(imageResource: Image, sx: number, sy: number): void  

Image 标签(UniElement )竟然和 Image 对象毫无关系
元素属性 attributes 对象 Map<string, any> 竟然无一方式可以跨平台遍历
且Image标签的src属性在不同平台所在位置还不一样
且 对于 attributes ["src"],attributes .get("src") 两张写法竟然还不等价
lc instanceof Image 如何不在前面排除null 竟然会报错null is not an object (evaluating 'Object.getPrototypeOf(e)') 而不是直接返回false

二进制是每种语言基础中的基础 文件读取 encoding 还给限制死了 只能是 base64 utf-8 然后文档还一边说可以不写 这操作就很魔幻

基本上所有api都支持 success,fail,complete 那么所有 opt 都继承 Iopt<S,E> 不就可以统一包装支持 Promise<S,E>了吗

复杂点如果传入了 success,fail,complete 就不返回 Promise 简单就不论是否传入都返回Promise 让opt中的success,fail,complete优先回调就好了

收起阅读 »

发布鸿蒙App,领取现金奖励

鸿蒙next

> 如果你的应用用户体量较大,比如日活超过1万,欢迎联系我们,报名参加更高激励活动,若审核成功,奖励金额至少2100元起。

为了丰富鸿蒙生态,为国产操作系统生态做贡献,DCloud联合华为推出开发者激励计划,uni-app开发者只需将 uni-app 项目发行为鸿蒙App,即可获得现金激励,欢迎各位开发者积极提交。

激励规则

根据应用是否在华为应用市场,或者其他手机终端厂商(仅指荣耀、小米、OPPO、vivo、Apple)应用市场、小程序平台(微信、支付宝、抖音、小红书)面向中国境内(不含中国香港、中国澳门、中国台湾)上架发布,将应用分为以下两类:

  • 成熟应用:在2024年9月30日前(含当日)在上述应用分发平台为在架状态;
  • 新应用:新开发的应用,在2024年9月30日前(含当日)未在上述应用分发平台上架;

说明:

  • 成熟应用的名称需要与此前在上述应用分发平台上架的应用名称一样。
  • 按照华为的政策,应用市场仅包含如上华为、荣耀、小米、OPPO、vivo、Apple几家应用市场,不含应用宝、360等三方应用商店;
  • 小程序平台仅含微信、支付宝、抖音、小红书四家,不含百度、京东等;

成熟应用

评选规则:

  • 2024年12月31日之前,完成鸿蒙App上架评审并正式上架;

奖励规则:

  • 满足如上评选条件,即可获得1000元现金奖励,以及价值1万元的流量扶持赠送金;
  • 满足如上评选条件,且通过uni-pay对接华为支付,或通过uni-id对接华为登录,额外奖励500元现金;

新应用

评选规则:

  • 2024年12月31日之前,完成鸿蒙App上架评审并正式上架;
  • 应用完成上架后次日起7日累计活跃设备数达到100;因为华为的评审截止日为12月31日,故建议在2024年12月23日之前完成上架;

奖励规则:

  • 同时满足如上两个评选条件,即可获得1000元现金奖励,以及价值1万元的流量扶持赠送金;
  • 同时满足如上两个评选条件,且通过uni-pay对接华为支付,或通过uni-id对接华为登录,额外奖励500元现金;

参与细则

1、开发者需将DCloud绑定为鸿蒙商店服务商,并在线签订激励分享承诺函,详见元服务发行与上架
2、激励发放前,DCloud及华为有权再次核实计划申请人资格和相关信息。开发者需保证提交信息真实有效,若存在欺诈或不当行为(如恶意刷量、提供虚假APP备案证明等作弊行为、侵犯他人知识产权,或者存在任何违法违规或违反本计划协议的行为),DCloud有权追回已发放激励等权益,取消参与本计划资格,并追究其法律责任;
3、开发者应确保提供其真实有效的收款账号信息,若其自身原因(包括但不限于账号注销、被冻结、无法收款等)导致激励发放失败,由此引发的后果和损失由开发者自行承担;
4、现金激励为含税金额;
5、为了确保活动的公平性和正向激励导向,DCloud在法律允许范围内可优化本计划规则,请您以最新发布的规则为准。
6、如您对本计划的规则有任何疑问,请通过uni-im与我们联系。

继续阅读 »

> 如果你的应用用户体量较大,比如日活超过1万,欢迎联系我们,报名参加更高激励活动,若审核成功,奖励金额至少2100元起。

为了丰富鸿蒙生态,为国产操作系统生态做贡献,DCloud联合华为推出开发者激励计划,uni-app开发者只需将 uni-app 项目发行为鸿蒙App,即可获得现金激励,欢迎各位开发者积极提交。

激励规则

根据应用是否在华为应用市场,或者其他手机终端厂商(仅指荣耀、小米、OPPO、vivo、Apple)应用市场、小程序平台(微信、支付宝、抖音、小红书)面向中国境内(不含中国香港、中国澳门、中国台湾)上架发布,将应用分为以下两类:

  • 成熟应用:在2024年9月30日前(含当日)在上述应用分发平台为在架状态;
  • 新应用:新开发的应用,在2024年9月30日前(含当日)未在上述应用分发平台上架;

说明:

  • 成熟应用的名称需要与此前在上述应用分发平台上架的应用名称一样。
  • 按照华为的政策,应用市场仅包含如上华为、荣耀、小米、OPPO、vivo、Apple几家应用市场,不含应用宝、360等三方应用商店;
  • 小程序平台仅含微信、支付宝、抖音、小红书四家,不含百度、京东等;

成熟应用

评选规则:

  • 2024年12月31日之前,完成鸿蒙App上架评审并正式上架;

奖励规则:

  • 满足如上评选条件,即可获得1000元现金奖励,以及价值1万元的流量扶持赠送金;
  • 满足如上评选条件,且通过uni-pay对接华为支付,或通过uni-id对接华为登录,额外奖励500元现金;

新应用

评选规则:

  • 2024年12月31日之前,完成鸿蒙App上架评审并正式上架;
  • 应用完成上架后次日起7日累计活跃设备数达到100;因为华为的评审截止日为12月31日,故建议在2024年12月23日之前完成上架;

奖励规则:

  • 同时满足如上两个评选条件,即可获得1000元现金奖励,以及价值1万元的流量扶持赠送金;
  • 同时满足如上两个评选条件,且通过uni-pay对接华为支付,或通过uni-id对接华为登录,额外奖励500元现金;

参与细则

1、开发者需将DCloud绑定为鸿蒙商店服务商,并在线签订激励分享承诺函,详见元服务发行与上架
2、激励发放前,DCloud及华为有权再次核实计划申请人资格和相关信息。开发者需保证提交信息真实有效,若存在欺诈或不当行为(如恶意刷量、提供虚假APP备案证明等作弊行为、侵犯他人知识产权,或者存在任何违法违规或违反本计划协议的行为),DCloud有权追回已发放激励等权益,取消参与本计划资格,并追究其法律责任;
3、开发者应确保提供其真实有效的收款账号信息,若其自身原因(包括但不限于账号注销、被冻结、无法收款等)导致激励发放失败,由此引发的后果和损失由开发者自行承担;
4、现金激励为含税金额;
5、为了确保活动的公平性和正向激励导向,DCloud在法律允许范围内可优化本计划规则,请您以最新发布的规则为准。
6、如您对本计划的规则有任何疑问,请通过uni-im与我们联系。

收起阅读 »

发布鸿蒙元服务,领取现金奖励

鸿蒙next

> 如果你是服务商、外包商,承诺上架25个元服务,欢迎点此联系我们,我们可提供单独技术支持,以及可帮助协调免费的鸿蒙测试机。

为了丰富鸿蒙生态,为国产操作系统生态做贡献,DCloud联合华为推出开发者激励计划,uni-app开发者只需将 uni-app 项目发行为鸿蒙元服务,即可获得现金激励,欢迎各位开发者积极提交。

激励规则

根据应用是否在华为应用市场,或者其他手机终端厂商(仅指荣耀、小米、OPPO、vivo、Apple)应用市场、小程序平台(微信、支付宝、抖音、小红书)面向中国境内(不含中国香港、中国澳门、中国台湾)上架发布,将应用分为以下两类:

  • 成熟应用:在2024年9月30日前(含当日)在上述应用分发平台为在架状态;
  • 新应用:新开发的应用,在2024年9月30日前(含当日)未在上述应用分发平台上架;

说明:

  • 成熟应用的名称需要与此前在上述应用分发平台上架的应用名称一样。
  • 按照华为的政策,应用市场仅包含如上华为、荣耀、小米、OPPO、vivo、Apple几家应用市场,不含应用宝、360等三方应用商店;
  • 小程序平台仅含微信、支付宝、抖音、小红书四家,不含百度、京东等;

成熟应用

评选规则:

  • 2024年12月31日之前,完成元服务上架评审并正式上架;

奖励规则:

  • 满足如上评选条件,即可获得600元现金奖励,以及价值6000元的流量扶持赠送金;

新应用

评选规则:

  • 2024年12月31日之前,完成元服务上架评审并正式上架;
  • 应用完成上架后次日起7日累计活跃设备数达到100;因为华为的评审截止日为12月31日,故建议在2024年12月23日之前完成上架;

奖励规则:

  • 同时满足如上两个评选条件,即可获得600元现金奖励,以及价值6000元的流量扶持赠送金;

参与细则

1、开发者需将DCloud绑定为鸿蒙商店服务商,并在线签订激励分享承诺函,详见元服务发行与上架
2、激励发放前,DCloud及华为有权再次核实计划申请人资格和相关信息。开发者需保证提交信息真实有效,若存在欺诈或不当行为(如恶意刷量、提供虚假APP备案证明等作弊行为、侵犯他人知识产权,或者存在任何违法违规或违反本计划协议的行为),DCloud有权追回已发放激励等权益,取消参与本计划资格,并追究其法律责任;
3、开发者应确保提供其真实有效的收款账号信息,若其自身原因(包括但不限于账号注销、被冻结、无法收款等)导致激励发放失败,由此引发的后果和损失由开发者自行承担;
4、现金激励为含税金额;
5、为了确保活动的公平性和正向激励导向,DCloud在法律允许范围内可优化本计划规则,请您以最新发布的规则为准。
6、如您对本计划的规则有任何疑问,请通过uni-im与我们联系。

继续阅读 »

> 如果你是服务商、外包商,承诺上架25个元服务,欢迎点此联系我们,我们可提供单独技术支持,以及可帮助协调免费的鸿蒙测试机。

为了丰富鸿蒙生态,为国产操作系统生态做贡献,DCloud联合华为推出开发者激励计划,uni-app开发者只需将 uni-app 项目发行为鸿蒙元服务,即可获得现金激励,欢迎各位开发者积极提交。

激励规则

根据应用是否在华为应用市场,或者其他手机终端厂商(仅指荣耀、小米、OPPO、vivo、Apple)应用市场、小程序平台(微信、支付宝、抖音、小红书)面向中国境内(不含中国香港、中国澳门、中国台湾)上架发布,将应用分为以下两类:

  • 成熟应用:在2024年9月30日前(含当日)在上述应用分发平台为在架状态;
  • 新应用:新开发的应用,在2024年9月30日前(含当日)未在上述应用分发平台上架;

说明:

  • 成熟应用的名称需要与此前在上述应用分发平台上架的应用名称一样。
  • 按照华为的政策,应用市场仅包含如上华为、荣耀、小米、OPPO、vivo、Apple几家应用市场,不含应用宝、360等三方应用商店;
  • 小程序平台仅含微信、支付宝、抖音、小红书四家,不含百度、京东等;

成熟应用

评选规则:

  • 2024年12月31日之前,完成元服务上架评审并正式上架;

奖励规则:

  • 满足如上评选条件,即可获得600元现金奖励,以及价值6000元的流量扶持赠送金;

新应用

评选规则:

  • 2024年12月31日之前,完成元服务上架评审并正式上架;
  • 应用完成上架后次日起7日累计活跃设备数达到100;因为华为的评审截止日为12月31日,故建议在2024年12月23日之前完成上架;

奖励规则:

  • 同时满足如上两个评选条件,即可获得600元现金奖励,以及价值6000元的流量扶持赠送金;

参与细则

1、开发者需将DCloud绑定为鸿蒙商店服务商,并在线签订激励分享承诺函,详见元服务发行与上架
2、激励发放前,DCloud及华为有权再次核实计划申请人资格和相关信息。开发者需保证提交信息真实有效,若存在欺诈或不当行为(如恶意刷量、提供虚假APP备案证明等作弊行为、侵犯他人知识产权,或者存在任何违法违规或违反本计划协议的行为),DCloud有权追回已发放激励等权益,取消参与本计划资格,并追究其法律责任;
3、开发者应确保提供其真实有效的收款账号信息,若其自身原因(包括但不限于账号注销、被冻结、无法收款等)导致激励发放失败,由此引发的后果和损失由开发者自行承担;
4、现金激励为含税金额;
5、为了确保活动的公平性和正向激励导向,DCloud在法律允许范围内可优化本计划规则,请您以最新发布的规则为准。
6、如您对本计划的规则有任何疑问,请通过uni-im与我们联系。

收起阅读 »

项目运行到鸿蒙手机,应用图标一直是H,应用名一直是HBuilder问题

项目运行到鸿蒙手机,应用图标一直是H,应用名一直是HBuilder问题

应用运行到鸿蒙手机和鸿蒙模拟器,应用图标一直是H,应用名一直是HBuilder,在自动生成的harmony-configs文件夹下也没有配置的文件,

  1. 这时候需要你将DevEco Studio 下生成的resource 文件复制一份,放在相应的文件夹下。
  2. 修改根据module.json5文件中的"icon": "$media:layered_image",
    "label": "$string:EntryAbility_label",
    "startWindowIcon": "$media:startIcon",修改对应文件夹下的字符串或者图片资源。
  3. 重新运行到鸿蒙设备。如果运行到手机上的应用图标还是H,名字还是HBuilder。这是因为有缓存的问题。
  4. 找到unpackage 文件夹删除里面的debug文件夹(编译时候自动生成的)。打包鸿蒙app的时候遇到上面情况,删掉release文件夹重新运行。

就可以解决以上问题。

继续阅读 »

项目运行到鸿蒙手机,应用图标一直是H,应用名一直是HBuilder问题

应用运行到鸿蒙手机和鸿蒙模拟器,应用图标一直是H,应用名一直是HBuilder,在自动生成的harmony-configs文件夹下也没有配置的文件,

  1. 这时候需要你将DevEco Studio 下生成的resource 文件复制一份,放在相应的文件夹下。
  2. 修改根据module.json5文件中的"icon": "$media:layered_image",
    "label": "$string:EntryAbility_label",
    "startWindowIcon": "$media:startIcon",修改对应文件夹下的字符串或者图片资源。
  3. 重新运行到鸿蒙设备。如果运行到手机上的应用图标还是H,名字还是HBuilder。这是因为有缓存的问题。
  4. 找到unpackage 文件夹删除里面的debug文件夹(编译时候自动生成的)。打包鸿蒙app的时候遇到上面情况,删掉release文件夹重新运行。

就可以解决以上问题。

收起阅读 »

我的mac打包自定义基座,运行也选了自定义基座

提示如下

{
"data": {
"id": "window"
},
"code": 0,
"msg": "创建成功"
}

但是界面没有悬浮窗显示出来

继续阅读 »

提示如下

{
"data": {
"id": "window"
},
"code": 0,
"msg": "创建成功"
}

但是界面没有悬浮窗显示出来

收起阅读 »

uniapp 微信自动播放背景音乐插件

现在不管是 audio 还是 video(带音频) 都没办法做自动播放,受到浏览器阻止自动播放策略的约束;

还好微信内置浏览器拥有一些特殊api,可以实现自动播放。闲话少说直接看效果,微信扫一扫下面的二维码查看

其实 iOS 实现起来比较简单,只需要监听 WeixinJSBridgeReady 或者 weixin. ready 就可以正常播放 audio 元素的音频;

Android 实现起来相对麻烦一点,需要借助 soundjs 库来完成。这里我参考借鉴 superzdd 大佬的实验 wechat-h5-backgound-music-survey,有兴趣的可以去了解一下~

这里面比较麻烦的一个事情是。。。。 iOS方案和Android方案相互是不兼容的!

所以我把他封装成了一个 jssdk 插件,可以快速使用并且完美兼容微信 AndroidiOS 以及一般手机浏览器 (触摸)

好省去一些时间浪费在做兼容这件事上,有兴趣的欢迎前来使用~ 并且项目长期维护, 有问题可以直接提交问题

插件地址:https://ext.dcloud.net.cn/plugin?id=20174

继续阅读 »

现在不管是 audio 还是 video(带音频) 都没办法做自动播放,受到浏览器阻止自动播放策略的约束;

还好微信内置浏览器拥有一些特殊api,可以实现自动播放。闲话少说直接看效果,微信扫一扫下面的二维码查看

其实 iOS 实现起来比较简单,只需要监听 WeixinJSBridgeReady 或者 weixin. ready 就可以正常播放 audio 元素的音频;

Android 实现起来相对麻烦一点,需要借助 soundjs 库来完成。这里我参考借鉴 superzdd 大佬的实验 wechat-h5-backgound-music-survey,有兴趣的可以去了解一下~

这里面比较麻烦的一个事情是。。。。 iOS方案和Android方案相互是不兼容的!

所以我把他封装成了一个 jssdk 插件,可以快速使用并且完美兼容微信 AndroidiOS 以及一般手机浏览器 (触摸)

好省去一些时间浪费在做兼容这件事上,有兴趣的欢迎前来使用~ 并且项目长期维护, 有问题可以直接提交问题

插件地址:https://ext.dcloud.net.cn/plugin?id=20174

收起阅读 »

uniapp同城社区交友 仿小红书 APP小程序源码 含后台管理和网页端

uniapp

出售一套自己写的uniapp仿小红书同城社区交友源码 包含后端和网页端

https://shop.abyssdawn.com/

继续阅读 »

出售一套自己写的uniapp仿小红书同城社区交友源码 包含后端和网页端

https://shop.abyssdawn.com/

收起阅读 »

uniapp运行鸿蒙安装项目依赖失败

鸿蒙

运行的时候包安装一依赖失败

检查下项目所在电脑的目录是否有中文存在

运行的时候包安装一依赖失败

检查下项目所在电脑的目录是否有中文存在

quill-delta-converter 公共模块不存在,请在 uniCloud/database 目录右击“配置schema扩展公共模块“添加 quill-delta-converter 模块

uniCloud

问题描述1

在uni-admin项目中,导入uni-cms运行,通常就会出现如下报错,quill-delta-converter 公共模块不存在,请在 uniCloud/database 目录右击"配置schema扩展公共模块"添加 quill-delta-converter 模块。

解决办法1

只需要按照上面的方法,在uniCloud目录下找到database目录,右击添加 quill-delta-converter 模块即可解决

可以看一下database目录下面创建了一个新文件package.json,代码如下所示,就说明已经关联好了,可以简单看一下即可

{  
  "name": "database",  
  "dependencies": {  
    "quill-delta-converter": "file:../../uni_modules/uni-cms/uniCloud/cloudfunctions/common/quill-delta-converter"  
  },  
  "extensions": {}  
}

通常来讲,这样操作完成之后,再刷新项目,之前的报错将不会存在,保险起见,可以重新启动一下项目,即可解决第一个问题。

问题描述2

在“本地云函数”调试uniadmin以及uni-cms,完全正常,没有问题,上线之前,将cloudfunction以及database全部上传到云端,然后在本地“连接云端云函数”,发现上面的问题再次出现,用户端项目使用的是uni-cms-article,也报同样的错误,明明我们已经安装第一种方法配置schema扩展公共模块quill-delta-converter,那为什么还报错那?

解决办法2

上传到云端,不单单是将cloudfunctions和database全部上传,如果你在database关联了公共模块或者扩展库,那么就需要“上传Schema扩展Js的配置”,这个很关键,这个过程其实相当于你的npm i安装一样,只有配置项,没有安装依赖,那云端肯定是不行的。

总结

我做项目出现这个问题的时候,花了好久的时间才看报错知道的这个问题,在这里记录一下,如果你也遇到了这个问题,帮你解决了,请给点赞支持一下哦,我是咸虾米_感谢大家。

继续阅读 »

问题描述1

在uni-admin项目中,导入uni-cms运行,通常就会出现如下报错,quill-delta-converter 公共模块不存在,请在 uniCloud/database 目录右击"配置schema扩展公共模块"添加 quill-delta-converter 模块。

解决办法1

只需要按照上面的方法,在uniCloud目录下找到database目录,右击添加 quill-delta-converter 模块即可解决

可以看一下database目录下面创建了一个新文件package.json,代码如下所示,就说明已经关联好了,可以简单看一下即可

{  
  "name": "database",  
  "dependencies": {  
    "quill-delta-converter": "file:../../uni_modules/uni-cms/uniCloud/cloudfunctions/common/quill-delta-converter"  
  },  
  "extensions": {}  
}

通常来讲,这样操作完成之后,再刷新项目,之前的报错将不会存在,保险起见,可以重新启动一下项目,即可解决第一个问题。

问题描述2

在“本地云函数”调试uniadmin以及uni-cms,完全正常,没有问题,上线之前,将cloudfunction以及database全部上传到云端,然后在本地“连接云端云函数”,发现上面的问题再次出现,用户端项目使用的是uni-cms-article,也报同样的错误,明明我们已经安装第一种方法配置schema扩展公共模块quill-delta-converter,那为什么还报错那?

解决办法2

上传到云端,不单单是将cloudfunctions和database全部上传,如果你在database关联了公共模块或者扩展库,那么就需要“上传Schema扩展Js的配置”,这个很关键,这个过程其实相当于你的npm i安装一样,只有配置项,没有安装依赖,那云端肯定是不行的。

总结

我做项目出现这个问题的时候,花了好久的时间才看报错知道的这个问题,在这里记录一下,如果你也遇到了这个问题,帮你解决了,请给点赞支持一下哦,我是咸虾米_感谢大家。

收起阅读 »

个人接单,经验丰富,页面 小程序 APP开发均可

外包接单

工作之余,想整点外快 找合作开发也可 --联系方式vx:Y1910710026

工作之余,想整点外快 找合作开发也可 --联系方式vx:Y1910710026

接单

uniapp 外包接单

详情咨询v lairsyz

详情咨询v lairsyz

nativejs android获取wifi强度及状态

Native.JS Android
const Context = plus.android.importClass("android.content.Context");  
const WifiManager = plus.android.importClass("android.net.wifi.WifiManager");  
const wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);  
const WifiInfo = plus.android.importClass("android.net.wifi.WifiInfo");  

const isWifiEnabled = wifiManager.isWifiEnabled();  
if (!isWifiEnabled) {  
    // 未开启wifi  
    // ....  
    return;  
}  

const connectionInfo = wifiManager.getConnectionInfo();  
const ipAddress = connectionInfo.getIpAddress();  
if (!ipAddress) {  
    // WiFi未连接  
    // ....  
    return;  
}  

// wifi已连接  
const rssi = connectionInfo.getRssi();  
// 0格 rssi<=-100  
// 1格 (-100, -88]  
// 2格 (-88, -77]  
// 3格 (-77, -55]  
// 4格 rssi>=-55
继续阅读 »
const Context = plus.android.importClass("android.content.Context");  
const WifiManager = plus.android.importClass("android.net.wifi.WifiManager");  
const wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);  
const WifiInfo = plus.android.importClass("android.net.wifi.WifiInfo");  

const isWifiEnabled = wifiManager.isWifiEnabled();  
if (!isWifiEnabled) {  
    // 未开启wifi  
    // ....  
    return;  
}  

const connectionInfo = wifiManager.getConnectionInfo();  
const ipAddress = connectionInfo.getIpAddress();  
if (!ipAddress) {  
    // WiFi未连接  
    // ....  
    return;  
}  

// wifi已连接  
const rssi = connectionInfo.getRssi();  
// 0格 rssi<=-100  
// 1格 (-100, -88]  
// 2格 (-88, -77]  
// 3格 (-77, -55]  
// 4格 rssi>=-55
收起阅读 »