HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

mui上传头像带裁剪压缩

头像裁剪 图片上传

> 根据 https://ask.dcloud.net.cn/article/id-754 项目进行优化修改

项目引用:
jquery.min.js
mui.js
mui.css

优化内容:
修复了原贴的一些BUG
新增拖动放大选框功能

源码下载:
见附件

继续阅读 »

> 根据 https://ask.dcloud.net.cn/article/id-754 项目进行优化修改

项目引用:
jquery.min.js
mui.js
mui.css

优化内容:
修复了原贴的一些BUG
新增拖动放大选框功能

源码下载:
见附件

收起阅读 »

uni-app开发的真是心累

HBuilder X uniapp

开发的真是心累 升级一个版本就开始担心报错

开发的真是心累 升级一个版本就开始担心报错

uni-app获取视频缩略图封面插件

uni-app获取视频缩略图封面插件:https://ext.dcloud.net.cn/plugin?id=1577

uni-app获取视频缩略图封面插件:https://ext.dcloud.net.cn/plugin?id=1577

webview通过uni.postMessage传值提示UniPlusBridge is not defined

Webview

我是vue打包成html嵌套到web-view 本人试了好多次

 文档  https://ask.dcloud.net.cn/article/35083  给的js不好使  
  <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>  

 

解决方案:
更换js 就ok了

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>  

希望能帮助到大家

继续阅读 »

我是vue打包成html嵌套到web-view 本人试了好多次

 文档  https://ask.dcloud.net.cn/article/35083  给的js不好使  
  <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>  

 

解决方案:
更换js 就ok了

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>  

希望能帮助到大家

收起阅读 »

有没有想把uni-app微信项目打包后作为一个目录或者分包用于其他的小程序项目?我有个方案

可以用uniapp2wxpack,在原有的uni-app项目上安装就行

uniapp2wxpack npm包

演示项目

开发模式下,可能会出现没有读写权限或者有些文件没有构建出来的情况,如果出现这种情况就关掉微信开发者工具,dev任务处于监听状态后,再打开微信开发者工具预览

继续阅读 »

可以用uniapp2wxpack,在原有的uni-app项目上安装就行

uniapp2wxpack npm包

演示项目

开发模式下,可能会出现没有读写权限或者有些文件没有构建出来的情况,如果出现这种情况就关掉微信开发者工具,dev任务处于监听状态后,再打开微信开发者工具预览

收起阅读 »

uni-app 支付宝小程序如何使用 mqtt

uniapp

uni-app 支付宝小程序如何使用 mqtt

uni-app 支付宝小程序如何使用 mqtt

团队开发APP、APP定制开发

App 移动APP

app开发

  1. 需求整理
  2. 预算评估
  3. 原型设计
  4. UI设计
  5. 开发
  6. 测试调试
  7. 发布到应用市场
  8. 运营迭代
  9. 日常维护

app开发

  1. 需求整理
  2. 预算评估
  3. 原型设计
  4. UI设计
  5. 开发
  6. 测试调试
  7. 发布到应用市场
  8. 运营迭代
  9. 日常维护

HBuilderX报错【插件xx下载错误,请检查网络是否正常!】的解决方法,可自己手动安装

HBuilderX报错【插件xx下载错误,请检查网络是否正常!】的解决方法,可自己手动安装 我写了一个教程,我自己摸索出来的,
你们可以看下:
https://www.jianshu.com/p/f084d1ff5302

HBuilderX报错【插件xx下载错误,请检查网络是否正常!】的解决方法,可自己手动安装 我写了一个教程,我自己摸索出来的,
你们可以看下:
https://www.jianshu.com/p/f084d1ff5302

【分享】uniapp打包后html文件里标签不要移除引号

uniapp

在项目根目录新建vue.config.js,添加如下代码。

 chainWebpack: config => {  
        //通过运行 vue inspect plugins 的值html插件别名。。  
        config.plugin('html-index').tap(args => {  
            args[0].minify = {  
                removeAttributeQuotes: false  
            }  
            return args  
        })  
    },

之前按照vue官方文档查的说添加
有的说添加

config.plugin('html').tap

报错说

TypeError: Cannot set property 'minify' of undefined

通过运行

vue inspect plugins

看到插件列表,htmlWebpackPlugin别名改成了html-index

继续阅读 »

在项目根目录新建vue.config.js,添加如下代码。

 chainWebpack: config => {  
        //通过运行 vue inspect plugins 的值html插件别名。。  
        config.plugin('html-index').tap(args => {  
            args[0].minify = {  
                removeAttributeQuotes: false  
            }  
            return args  
        })  
    },

之前按照vue官方文档查的说添加
有的说添加

config.plugin('html').tap

报错说

TypeError: Cannot set property 'minify' of undefined

通过运行

vue inspect plugins

看到插件列表,htmlWebpackPlugin别名改成了html-index

收起阅读 »

动态设置原生导航栏搜索框中的placeholder的提示内容

导航栏 App入门

为什么要动态设置原生导航栏搜索框中placeholder的提示内容呢?

一般原生导航栏搜索框中placeholder的提示内容是在pages.json中app-plus中设置,就相当于默认值,偶尔业务需求可能要改变值

需求:
大多数商城商品搜索框placeholder中都会自动显示一些热搜商品名称,
点击搜索后这些热搜商品可以直接进行搜索,可以有效提高用户对某一系列产品的搜索率

实现方法:

       //这个操作一般放在 onLoad 函数中  

       uni.request({ //发起网络请求  
                url: 'https://xxx.xxx.com,   //要显示的文字数据接口  
                success: (res) => {  
                 console.log(res.data);  
                    this.value = res.data.title   //将请求结果赋值data函数中定义的vlaue值中  
                    var _this=this   //这个我知道你懂的  
                    let webview = this.$mp.page.$getAppWebview();  //获取当前窗口实例  
                            webview.setStyle({'titleNView':{"searchInput": { //修改当前窗口search样式  
                                                                      "placeholder": _this.value,  
                                     }    
                    }})   
                } //成功回调结束  
            });

我也是uni-app小白一枚,有不对的地方各位多多指教

想学吗,我教你呀!保你会

继续阅读 »

为什么要动态设置原生导航栏搜索框中placeholder的提示内容呢?

一般原生导航栏搜索框中placeholder的提示内容是在pages.json中app-plus中设置,就相当于默认值,偶尔业务需求可能要改变值

需求:
大多数商城商品搜索框placeholder中都会自动显示一些热搜商品名称,
点击搜索后这些热搜商品可以直接进行搜索,可以有效提高用户对某一系列产品的搜索率

实现方法:

       //这个操作一般放在 onLoad 函数中  

       uni.request({ //发起网络请求  
                url: 'https://xxx.xxx.com,   //要显示的文字数据接口  
                success: (res) => {  
                 console.log(res.data);  
                    this.value = res.data.title   //将请求结果赋值data函数中定义的vlaue值中  
                    var _this=this   //这个我知道你懂的  
                    let webview = this.$mp.page.$getAppWebview();  //获取当前窗口实例  
                            webview.setStyle({'titleNView':{"searchInput": { //修改当前窗口search样式  
                                                                      "placeholder": _this.value,  
                                     }    
                    }})   
                } //成功回调结束  
            });

我也是uni-app小白一枚,有不对的地方各位多多指教

想学吗,我教你呀!保你会

收起阅读 »

宿主App与小程序相互通讯

小程序SDK unimpsdk

请移步 新的文档。此文档以停止更新

宿主App与小程序相互通讯

注:2.6.10 版本开始支持此功能

宿主 App 向小程序发送事件

iOS 平台

API

Class DCUniMPSDKEngine.h  
/// 向小程序发送事件  
/// @param event 事件名称  
/// @param data 数据:NSString 或 NSDictionary 类型  
+ (void)sendUniMPEvent:(NSString *)event data:(id)data;

示例

[DCUniMPSDKEngine sendUniMPEvent:@"NativeEvent" data:@{@"msg":@"native message"}];

Android 平台

API

DCUniMPSDK.getInstance().sendUniMPEvent(event, data)

参数说明

参数 类型 必填 说明
event String 触发事件的event
data String或JSON 事件的携带参数

返回值

类型 说明
boolean true表示事件通知成功。false表示失败。可通过log查看。

示例

JSONObject data = new JSONObject();  
data.put("sj", "点击了关于");  
DCUniMPSDK.getInstance().sendUniMPEvent("gy", data);

小程序平台

监听宿主App发送事件

示例

uni.onNativeEventReceive((event,data)=>{  
    console.log('接收到宿主App消息:' + event + data);  
    this.nativeMsg = '接收到宿主App消息 event:' + event + " data: " + data;  
})

参数说明

属性 类型 说明
event String 事件名称
data String / JsonObject 宿主传递的数据

小程序向宿主 App 发送事件

小程序平台

API

向宿主App发送事件

uni.sendNativeEvent(event,callback)

参数说明

属性 类型 说明
event String 事件名称
callback Function 宿主App回调方法,参数可以是 String 或 JsonObject,取决于宿主的实现

示例

// 向宿主App发送事件  
uni.sendNativeEvent('unimp-event', {  
    msg: 'unimp message!!!'  
}, ret => {  
    this.nativeMsg = '宿主App回传的数据:' + ret;  
})

iOS 平台

当接收到小程序发送的事件会触发 DCUniMPSDKEngineDelegate 的协议方法,需宿主App实现该方法

协议方法说明

/// 监听小程序向原生发送事件方法  
/// @param event 事件名称  
/// @param data 数据:NSString 或 NSDictionary 类型  
/// @param callback 回调数据给小程序  
- (void)onUniMPEventReceive:(NSString *)event data:(id)data callback:(DCUniMPKeepAliveCallback)callback;  

DCUniMPKeepAliveCallback 说明  
/// 回调数据给小程序的 block 定义  
/// result:回调参数支持 NSString 或 NSDictionary 类型  
/// keepAlive:如果 keepAlive 为 YES,则可以多次回调数据给小程序,反之触发一次后回调方法即被移除  
typedef void (^DCUniMPKeepAliveCallback)(id result, BOOL keepAlive);  

示例

/// 监听小程序发送的事件方法  
- (void)onUniMPEventReceive:(NSString *)event data:(id)data callback:(DCUniMPKeepAliveCallback)callback {  

    NSLog(@"Receive UniMP event: %@ data: %@",event,data);  

    // 回传数据给小程序  
    // DCUniMPKeepAliveCallback 用法请查看定义说明  
    if (callback) {  
        callback(@"native callback message",NO);  
    }  
}

Android 平台

API

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(callBack)
设置监听小程序发送给宿主的事件

参数说明

参数 类型 必填 说明
callBack IOnUniMPEventCallBack 小程序触发event事件接口

返回值

示例

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(new DCUniMPSDK.IOnUniMPEventCallBack() {  
    @Override  
    public void onUniMPEventReceive(String event, Object data, DCUniMPJSCallback callback) {  
        Log.d("cs", "onUniMPEventReceive    event="+event);  
        //回传数据给小程序  
        callback.invoke( "收到消息");  
    }  
});
继续阅读 »

请移步 新的文档。此文档以停止更新

宿主App与小程序相互通讯

注:2.6.10 版本开始支持此功能

宿主 App 向小程序发送事件

iOS 平台

API

Class DCUniMPSDKEngine.h  
/// 向小程序发送事件  
/// @param event 事件名称  
/// @param data 数据:NSString 或 NSDictionary 类型  
+ (void)sendUniMPEvent:(NSString *)event data:(id)data;

示例

[DCUniMPSDKEngine sendUniMPEvent:@"NativeEvent" data:@{@"msg":@"native message"}];

Android 平台

API

DCUniMPSDK.getInstance().sendUniMPEvent(event, data)

参数说明

参数 类型 必填 说明
event String 触发事件的event
data String或JSON 事件的携带参数

返回值

类型 说明
boolean true表示事件通知成功。false表示失败。可通过log查看。

示例

JSONObject data = new JSONObject();  
data.put("sj", "点击了关于");  
DCUniMPSDK.getInstance().sendUniMPEvent("gy", data);

小程序平台

监听宿主App发送事件

示例

uni.onNativeEventReceive((event,data)=>{  
    console.log('接收到宿主App消息:' + event + data);  
    this.nativeMsg = '接收到宿主App消息 event:' + event + " data: " + data;  
})

参数说明

属性 类型 说明
event String 事件名称
data String / JsonObject 宿主传递的数据

小程序向宿主 App 发送事件

小程序平台

API

向宿主App发送事件

uni.sendNativeEvent(event,callback)

参数说明

属性 类型 说明
event String 事件名称
callback Function 宿主App回调方法,参数可以是 String 或 JsonObject,取决于宿主的实现

示例

// 向宿主App发送事件  
uni.sendNativeEvent('unimp-event', {  
    msg: 'unimp message!!!'  
}, ret => {  
    this.nativeMsg = '宿主App回传的数据:' + ret;  
})

iOS 平台

当接收到小程序发送的事件会触发 DCUniMPSDKEngineDelegate 的协议方法,需宿主App实现该方法

协议方法说明

/// 监听小程序向原生发送事件方法  
/// @param event 事件名称  
/// @param data 数据:NSString 或 NSDictionary 类型  
/// @param callback 回调数据给小程序  
- (void)onUniMPEventReceive:(NSString *)event data:(id)data callback:(DCUniMPKeepAliveCallback)callback;  

DCUniMPKeepAliveCallback 说明  
/// 回调数据给小程序的 block 定义  
/// result:回调参数支持 NSString 或 NSDictionary 类型  
/// keepAlive:如果 keepAlive 为 YES,则可以多次回调数据给小程序,反之触发一次后回调方法即被移除  
typedef void (^DCUniMPKeepAliveCallback)(id result, BOOL keepAlive);  

示例

/// 监听小程序发送的事件方法  
- (void)onUniMPEventReceive:(NSString *)event data:(id)data callback:(DCUniMPKeepAliveCallback)callback {  

    NSLog(@"Receive UniMP event: %@ data: %@",event,data);  

    // 回传数据给小程序  
    // DCUniMPKeepAliveCallback 用法请查看定义说明  
    if (callback) {  
        callback(@"native callback message",NO);  
    }  
}

Android 平台

API

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(callBack)
设置监听小程序发送给宿主的事件

参数说明

参数 类型 必填 说明
callBack IOnUniMPEventCallBack 小程序触发event事件接口

返回值

示例

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(new DCUniMPSDK.IOnUniMPEventCallBack() {  
    @Override  
    public void onUniMPEventReceive(String event, Object data, DCUniMPJSCallback callback) {  
        Log.d("cs", "onUniMPEventReceive    event="+event);  
        //回传数据给小程序  
        callback.invoke( "收到消息");  
    }  
});
收起阅读 »