HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

h5地区选择器解决方案

省市选择

官方的地区选择并不支持h5,官方多级连选案例简直是一阔糊

那就用单选择器吧

                <picker @change="provinceChange" :value="provinceId" :range="provinceJson" range-key="name">  
                    <view class="uni-input">{{provinceJson[provinceId].name}}</view>  
                </picker>  

                <picker @change="regionChange" :value="regionId" :range="regionShowJson" range-key="name">  
                    <view class="uni-input">{{regionShowJson[regionId].name}}</view>  
                </picker>

先定义参数

                provinceId: 0,  
                regionId: 0,  
                regionShowJson: [  
                    {  
                        name:'请选择'  
                    }  
                ]  

//省市json在评论区

定义函数

            regionChange: function(e) {  
                // console.log(e.target)  
                console.log('picker发送选择改变,携带值为:' + e.target.value)  
                this.regionId = e.target.value  
            },  
            provinceChange: function(e) {  
                // console.log(e.target)  
                console.log('picker发送选择改变,携带值为:' + e.target.value)  
                this.provinceId = e.target.value  
                this.regionShowJson = this.regionJson[e.target.value].cities  
            },
继续阅读 »

官方的地区选择并不支持h5,官方多级连选案例简直是一阔糊

那就用单选择器吧

                <picker @change="provinceChange" :value="provinceId" :range="provinceJson" range-key="name">  
                    <view class="uni-input">{{provinceJson[provinceId].name}}</view>  
                </picker>  

                <picker @change="regionChange" :value="regionId" :range="regionShowJson" range-key="name">  
                    <view class="uni-input">{{regionShowJson[regionId].name}}</view>  
                </picker>

先定义参数

                provinceId: 0,  
                regionId: 0,  
                regionShowJson: [  
                    {  
                        name:'请选择'  
                    }  
                ]  

//省市json在评论区

定义函数

            regionChange: function(e) {  
                // console.log(e.target)  
                console.log('picker发送选择改变,携带值为:' + e.target.value)  
                this.regionId = e.target.value  
            },  
            provinceChange: function(e) {  
                // console.log(e.target)  
                console.log('picker发送选择改变,携带值为:' + e.target.value)  
                this.provinceId = e.target.value  
                this.regionShowJson = this.regionJson[e.target.value].cities  
            },
收起阅读 »

各种5+插件 uniapp插件集成 离线打包问题指导 欢迎咨询 qq 37894663

外包

各种5+插件、 uniapp插件集成 、离线打包问题指导 以及各种页面绘制 欢迎咨询 qq 37894663

各种5+插件、 uniapp插件集成 、离线打包问题指导 以及各种页面绘制 欢迎咨询 qq 37894663

iOS平台:用Native.js来写 如何判断系统功能权限是否开启

iOS 权限是否开启 Native.JS 权限判断 权限开启 授权 赋权

更新:插件市场已经提供了封装更完善版本:https://ext.dcloud.net.cn/plugin?id=594

1、推送

判断推送权限是否开启

var UIApplication = plus.ios.import("UIApplication");  
                var app = UIApplication.sharedApplication();  
                var enabledTypes = 0;  
                if (app.currentUserNotificationSettings) {  
                    var settings = app.currentUserNotificationSettings();  
                    enabledTypes = settings.plusGetAttribute("types");  
                    console.log("enabledTypes1:" + enabledTypes);  
                    if (enabledTypes == 0) {  
                        console.log("推送权限没有开启");  
                    }else {  
                        console.log("已经开启推送功能!")  
                    }  
                    plus.ios.deleteObject(settings);  
                } else {  
                    enabledTypes = app.enabledRemoteNotificationTypes();  
                    if (enabledTypes == 0) {  
                        console.log("推送权限没有开启!");  
                    } else {  
                        console.log("已经开启推送功能!")  
                    }  
                    console.log("enabledTypes2:" + enabledTypes);  
                }  
                plus.ios.deleteObject(app);  
                                plus.ios.deleteObject(UIApplication);

2、定位

判断定位权限是否开启

                                var cllocationManger = plus.ios.import("CLLocationManager");  
                var enable = cllocationManger.locationServicesEnabled();  
                var status = cllocationManger.authorizationStatus();  
                console.log("enable:" + enable);  
                console.log("status:" + status);  
                if (enable && status != 2) {  
                    console.log("手机系统的定位已经打开");  
                } else {  
                    console.log("手机系统的定位没有打开");  
                }  
                             plus.ios.deleteObject(cllocationManger);

3、麦克风

判断麦克风权限是否开启

                                var avaudiosession = plus.ios.import("AVAudioSession");  
                var avaudio = avaudiosession.sharedInstance();  
                var permissionStatus = avaudio.recordPermission();  
                console.log("permissionStatus:" + permissionStatus);  
                if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {   
                    console.log("麦克风权限没有开启");  
                } else {  
                    console.log("麦克风权限已经开启");  
                }  
                    plus.ios.deleteObject(avaudiosession);

4、相机

判断相机权限是否开启

                               var AVCaptureDevice = plus.ios.import("AVCaptureDevice");  
                var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');  
                console.log("authStatus:" + authStatus);  
                if (authStatus == 3) {  
                    console.log("相机权限已经开启");  
                } else {  
                    console.log("相机权限没有开启");  
                }  
                    plus.ios.deleteObject(AVCaptureDevice);

5、相册

判断相册权限是否开启

                              var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");  
                var authStatus = PHPhotoLibrary.authorizationStatus();  
                console.log("authStatus:" + authStatus);  
                if (authStatus == 3) {  
                    console.log("相册权限已经开启");  
                } else  {  
                    console.log("相册权限没有开启");  
                }  
                    plus.ios.deleteObject(PHPhotoLibrary);

6、通讯录

判断通讯录权限是否开启

                              var CNContactStore = plus.ios.import("CNContactStore");  
                var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);  
                if (cnAuthStatus == 3) {  
                    console.log("通讯录权限已经开启");  
                } else  {  
                    console.log("通讯录权限没有开启");  
                }  
                    plus.ios.deleteObject(CNContactStore);

7、日历

判断日历权限是否开启

                              var EKEventStore = plus.ios.import("EKEventStore");  
                  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);  
                if (ekAuthStatus == 3) {  
                    console.log("日历权限已经开启");  
                } else  {  
                    console.log("日历权限没有开启");  
                }  
                    plus.ios.deleteObject(EKEventStore);

8、备忘录

判断备忘录权限是否开启

                              var EKEventStore = plus.ios.import("EKEventStore");  
                  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);  
                if (ekAuthStatus == 3) {  
                    console.log("备忘录权限已经开启");  
                } else  {  
                    console.log("备忘录权限没有开启");  
                }  
                    plus.ios.deleteObject(EKEventStore);

9、网络

判断网络是否开启

                              var cellularData = plus.ios.newObject("CTCellularData");  
                var state = cellularData.plusGetAttribute("restrictedState");  
                if (state == 2) {  
                    console.log("已经开启了互联网权限:NotRestricted");  
                } else if (state == 0) {  
                    console.log("StateUnknown");  
                } else if (state == 1) {  
                    console.log("Restricted");  
                }  
                    plus.ios.deleteObject(cellularData);

9、蓝牙

判断蓝牙是否开启

判断蓝牙权限是否开启无法用native.js来写,可以用蓝牙模块的API, getBluetoothAdapterState(获取本机蓝牙适配器状态),onBluetoothAdapterStateChange(监听蓝牙适配器状态变化事件)来判断。

提示用户开启权限

跳转到应用的权限页面,下面写了一个提示框让用户去选择

                                      plus.nativeUI.confirm("XX权限没有开启,是否去开启?", function(e) {  
                        if (e.index == 0) {  
                            var UIApplication = plus.ios.import("UIApplication");  
                            var application2 = UIApplication.sharedApplication();  
                            var NSURL2 = plus.ios.import("NSURL");                        
                            var setting2 = NSURL2.URLWithString("app-settings:");  
                            application2.openURL(setting2);  

                            plus.ios.deleteObject(setting2);  
                            plus.ios.deleteObject(NSURL2);  
                            plus.ios.deleteObject(application2);  
                        }  
                    }, {  
                        "buttons": ["Yes", "No"],  
                        "verticalAlign": "center"  
                    });

安卓权限见:https://ask.dcloud.net.cn/article/35861

继续阅读 »

更新:插件市场已经提供了封装更完善版本:https://ext.dcloud.net.cn/plugin?id=594

1、推送

判断推送权限是否开启

var UIApplication = plus.ios.import("UIApplication");  
                var app = UIApplication.sharedApplication();  
                var enabledTypes = 0;  
                if (app.currentUserNotificationSettings) {  
                    var settings = app.currentUserNotificationSettings();  
                    enabledTypes = settings.plusGetAttribute("types");  
                    console.log("enabledTypes1:" + enabledTypes);  
                    if (enabledTypes == 0) {  
                        console.log("推送权限没有开启");  
                    }else {  
                        console.log("已经开启推送功能!")  
                    }  
                    plus.ios.deleteObject(settings);  
                } else {  
                    enabledTypes = app.enabledRemoteNotificationTypes();  
                    if (enabledTypes == 0) {  
                        console.log("推送权限没有开启!");  
                    } else {  
                        console.log("已经开启推送功能!")  
                    }  
                    console.log("enabledTypes2:" + enabledTypes);  
                }  
                plus.ios.deleteObject(app);  
                                plus.ios.deleteObject(UIApplication);

2、定位

判断定位权限是否开启

                                var cllocationManger = plus.ios.import("CLLocationManager");  
                var enable = cllocationManger.locationServicesEnabled();  
                var status = cllocationManger.authorizationStatus();  
                console.log("enable:" + enable);  
                console.log("status:" + status);  
                if (enable && status != 2) {  
                    console.log("手机系统的定位已经打开");  
                } else {  
                    console.log("手机系统的定位没有打开");  
                }  
                             plus.ios.deleteObject(cllocationManger);

3、麦克风

判断麦克风权限是否开启

                                var avaudiosession = plus.ios.import("AVAudioSession");  
                var avaudio = avaudiosession.sharedInstance();  
                var permissionStatus = avaudio.recordPermission();  
                console.log("permissionStatus:" + permissionStatus);  
                if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {   
                    console.log("麦克风权限没有开启");  
                } else {  
                    console.log("麦克风权限已经开启");  
                }  
                    plus.ios.deleteObject(avaudiosession);

4、相机

判断相机权限是否开启

                               var AVCaptureDevice = plus.ios.import("AVCaptureDevice");  
                var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');  
                console.log("authStatus:" + authStatus);  
                if (authStatus == 3) {  
                    console.log("相机权限已经开启");  
                } else {  
                    console.log("相机权限没有开启");  
                }  
                    plus.ios.deleteObject(AVCaptureDevice);

5、相册

判断相册权限是否开启

                              var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");  
                var authStatus = PHPhotoLibrary.authorizationStatus();  
                console.log("authStatus:" + authStatus);  
                if (authStatus == 3) {  
                    console.log("相册权限已经开启");  
                } else  {  
                    console.log("相册权限没有开启");  
                }  
                    plus.ios.deleteObject(PHPhotoLibrary);

6、通讯录

判断通讯录权限是否开启

                              var CNContactStore = plus.ios.import("CNContactStore");  
                var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);  
                if (cnAuthStatus == 3) {  
                    console.log("通讯录权限已经开启");  
                } else  {  
                    console.log("通讯录权限没有开启");  
                }  
                    plus.ios.deleteObject(CNContactStore);

7、日历

判断日历权限是否开启

                              var EKEventStore = plus.ios.import("EKEventStore");  
                  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);  
                if (ekAuthStatus == 3) {  
                    console.log("日历权限已经开启");  
                } else  {  
                    console.log("日历权限没有开启");  
                }  
                    plus.ios.deleteObject(EKEventStore);

8、备忘录

判断备忘录权限是否开启

                              var EKEventStore = plus.ios.import("EKEventStore");  
                  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);  
                if (ekAuthStatus == 3) {  
                    console.log("备忘录权限已经开启");  
                } else  {  
                    console.log("备忘录权限没有开启");  
                }  
                    plus.ios.deleteObject(EKEventStore);

9、网络

判断网络是否开启

                              var cellularData = plus.ios.newObject("CTCellularData");  
                var state = cellularData.plusGetAttribute("restrictedState");  
                if (state == 2) {  
                    console.log("已经开启了互联网权限:NotRestricted");  
                } else if (state == 0) {  
                    console.log("StateUnknown");  
                } else if (state == 1) {  
                    console.log("Restricted");  
                }  
                    plus.ios.deleteObject(cellularData);

9、蓝牙

判断蓝牙是否开启

判断蓝牙权限是否开启无法用native.js来写,可以用蓝牙模块的API, getBluetoothAdapterState(获取本机蓝牙适配器状态),onBluetoothAdapterStateChange(监听蓝牙适配器状态变化事件)来判断。

提示用户开启权限

跳转到应用的权限页面,下面写了一个提示框让用户去选择

                                      plus.nativeUI.confirm("XX权限没有开启,是否去开启?", function(e) {  
                        if (e.index == 0) {  
                            var UIApplication = plus.ios.import("UIApplication");  
                            var application2 = UIApplication.sharedApplication();  
                            var NSURL2 = plus.ios.import("NSURL");                        
                            var setting2 = NSURL2.URLWithString("app-settings:");  
                            application2.openURL(setting2);  

                            plus.ios.deleteObject(setting2);  
                            plus.ios.deleteObject(NSURL2);  
                            plus.ios.deleteObject(application2);  
                        }  
                    }, {  
                        "buttons": ["Yes", "No"],  
                        "verticalAlign": "center"  
                    });

安卓权限见:https://ask.dcloud.net.cn/article/35861

收起阅读 »

绿色风格mui微信端用户注册登录界面模板

mui

绿色风格mui微信端用户注册登录界面模板,登录注册验证是用的mui前端框架,包括手机号、密码验证

下载地址:https://www.sucaihuo.com/templates/1582.html

继续阅读 »

绿色风格mui微信端用户注册登录界面模板,登录注册验证是用的mui前端框架,包括手机号、密码验证

下载地址:https://www.sucaihuo.com/templates/1582.html

收起阅读 »

App平台iOS设备上因内存不足导致白屏、闪退的问题解决方案

拍照 iOS WKWebview白屏 白屏

原因

任何手机设备上,当手机内存不足时,os都会回收资源。一般是先回收后台打开的资源。如果当前应用占用的资源过高,当前应用也有可能崩溃。
尤其是在调用摄像头点击拍照时,手机内存占用会达到一个峰值,此时较容易出问题。

iOS上当内存不足时,根据uiwebview和wkwebview的不同,它自身有不同的回收策略。

  • 如果是uiwebview的app(常见于5+app),内存不足时整个app会崩溃,即闪退。
  • 如果是wkwebview的app(uni-app和wap2app在iOS上默认就是wkwebview),内存不足时,单个wkwebview会崩溃。也就是所谓的应用还在,而页面白屏。

这个问题在所有使用wkwebview的应用都会出现,比如微信的公众号网页里也存在。在微信小程序里,它做了一个自动恢复手段,可以让jscore存储数据状态,崩溃的wkwebview自动恢复。所以在遇到问题时,会白一下然后恢复渲染。

解决方案

  • uni-app因为引入了独立的jscore处理数据状态,jscore不会崩溃,所以官方采用了和微信小程序一致的策略,补充自动的白屏恢复能力。
  • uni-app中也可以使用nvue来避免这个问题,nvue页面不会出现内存不足引发的白屏崩溃。
  • 5+app、wap2app,一方面注意前端代码写法,减低内存使用。另外HBuilder2.3.4+开始支持配置WKWebview内核奔溃是重新启动应用还是重新加载页面的配置,详情参考:https://ask.dcloud.net.cn/article/36540。但整体而言,5+app和wap2app在WKWebview下问题很多,还有各种跨域限制,还是建议开发者尽快升级为uni-app。

在前端减少内存使用的注意

最重要的注意,就是图片渲染,尤其是大图片。

在页面上不要渲染多张大图,比如从摄像头或相册选择多张图,并缩放尺寸渲染在页面上,虽然肉眼看起来手机屏幕上是几张小图,但实际上是多张大图只是被缩小,这种情况非常耗费内存。一张图片3m,9张这样的大图同时渲染到屏幕上,什么手机都受不了。
一个缩略图控制在几k或十几k,才是合理的。

详情页面展现多张大图并不受影响。如果图片滚动在屏幕外,os内存不足时也会自动收回这些屏幕外图片占用的渲染资源,最吃资源的就是同屏渲染多张大图。

继续阅读 »

原因

任何手机设备上,当手机内存不足时,os都会回收资源。一般是先回收后台打开的资源。如果当前应用占用的资源过高,当前应用也有可能崩溃。
尤其是在调用摄像头点击拍照时,手机内存占用会达到一个峰值,此时较容易出问题。

iOS上当内存不足时,根据uiwebview和wkwebview的不同,它自身有不同的回收策略。

  • 如果是uiwebview的app(常见于5+app),内存不足时整个app会崩溃,即闪退。
  • 如果是wkwebview的app(uni-app和wap2app在iOS上默认就是wkwebview),内存不足时,单个wkwebview会崩溃。也就是所谓的应用还在,而页面白屏。

这个问题在所有使用wkwebview的应用都会出现,比如微信的公众号网页里也存在。在微信小程序里,它做了一个自动恢复手段,可以让jscore存储数据状态,崩溃的wkwebview自动恢复。所以在遇到问题时,会白一下然后恢复渲染。

解决方案

  • uni-app因为引入了独立的jscore处理数据状态,jscore不会崩溃,所以官方采用了和微信小程序一致的策略,补充自动的白屏恢复能力。
  • uni-app中也可以使用nvue来避免这个问题,nvue页面不会出现内存不足引发的白屏崩溃。
  • 5+app、wap2app,一方面注意前端代码写法,减低内存使用。另外HBuilder2.3.4+开始支持配置WKWebview内核奔溃是重新启动应用还是重新加载页面的配置,详情参考:https://ask.dcloud.net.cn/article/36540。但整体而言,5+app和wap2app在WKWebview下问题很多,还有各种跨域限制,还是建议开发者尽快升级为uni-app。

在前端减少内存使用的注意

最重要的注意,就是图片渲染,尤其是大图片。

在页面上不要渲染多张大图,比如从摄像头或相册选择多张图,并缩放尺寸渲染在页面上,虽然肉眼看起来手机屏幕上是几张小图,但实际上是多张大图只是被缩小,这种情况非常耗费内存。一张图片3m,9张这样的大图同时渲染到屏幕上,什么手机都受不了。
一个缩略图控制在几k或十几k,才是合理的。

详情页面展现多张大图并不受影响。如果图片滚动在屏幕外,os内存不足时也会自动收回这些屏幕外图片占用的渲染资源,最吃资源的就是同屏渲染多张大图。

收起阅读 »

APP+小程序+门店,强劲结合正确打造新流量池

5+App开发

身处全民生活互联网化时代,传统企业走互联网转型已是必然趋势。然而,如何结合自身门店、用户资源,通过开发App、小程序为业务增添加瓦,想必对所有传统行业业主来说,仍是一片未耕耘的土地。今天,就让我们一同借鉴百果园,这位历经十余载,门店超3700家,线上销量突破全年总销量20%以上的水果零售霸主,究竟是如何通过门店+App+小程序的方式,GET到新流量池的正确打造模式吧!

百果园核心战略:线上线下一体化

2016年年底,百果园正式开启了“线上线下一体化战略”布局,并从一二线城市进行扎根,近几年逐步下沉到三四线渠道。在运营环节中,百果园一方面大力开店建仓布局线下,降低冷链配送成本;另一方面搭建开发APP、小程序,并结合微信分别在用户、营销、配送服务等方面取得了可喜的进展,并通过爆款打造,以及小程序拼团也大幅增加了用户二次消费率。那么,微信、小程序、App、门店究竟都各自扮演了哪些角色?又对百果园巨大的销量,起到了怎样的推动作用呢?跟随力谱云的脚步,详细探究一番吧!

微信+小程序+App:逐一击破用户、营销、服务营垒

目前,搭建开发APP、小程序,以及微信生态已基本涵盖主流移动渠道,并且基于每个渠道的消费场景不同,用户重叠度也并不特别高,因而百果园分别通过微信社群、微信公众号,支付宝/微信小程序、百果园App及美团等第三方平台,在线上业务板块做了细分切割,并且这三者的销售关系并非此消彼长,而是在不断一同增长。平台细分如下,企业家们也可参考打造!

支付宝小程序:交易类服务平台。作为新晋入场角色,主要提供会员服务与到家到店服务,目前发展体量较小,但拥有着增速较快的良好势头。
微信社群+小程序+公众号:百果园的核心流量池场景,由门店+社群构成。主要用于辐射门店周边社区用户,与用户建立起积极的沟通渠道,并利用公众号、小程序,进行服务推广,帮助深度触达用户,唤醒消费。
微信小程序:百果园旗下共上线了3款微信小程序。百果园+,主要用于提供核心业务。百果园好礼,以礼品卡形式,为用户提供水果送礼的服务。百果心享,则专为付费会员提供服务。这三者业务分工不同,但可彼此跳转关联,多方打通微信生态圈业务。
App+美团、饿了么第三方平台:借由App平台功能齐全的特性,在开发属于自己企业APP的同时,合作美团、饿了么等第三方平台,主要用于为用户提供配送到家服务,进一步覆盖主流渠道线上用户。
营销战略:爆款与拼团双管齐下

在线上运营环节中,爆款推广和社区拼团都是百果园的一大变现利器。比如针对季节推选时令水果,能更好地刺激消费,提升业绩。在拼团方面,他们通过App进行试水,在取得令人惊喜的成绩后,便试图在App、小程序中都纷纷加入这一拼团要素,并且搭配到店服务,不仅可以提升销量,提升新用户对门店品牌的信赖感,更能加深用户的到店消费习惯,最后还可刺激二次消费,可谓一举多得。正所谓,战术不在乎多,而贵乎精,如果企业能依据自身产品、用户习惯,搭配几项有效的营销策略,必然能让平台更上一层楼。

想打造百果园App+小程序+..?力谱云一次就能Carry全场

如果您的企业正处于传统转型的阵痛之中,如果您寻求门店服务的新突破,如果您渴望收割移动洪荒流量,如果您也想复刻百果园式成功,一站式解决所有平台开发难题,与营销解决方案,就让力谱云来带您Carry全场吧!

力谱云,专注为企业用户提供新颖、热门、高效的场景化移动电商平台。支持一站式搭建App+小程序+微商城+移动网站,并打通了四大主流移动电商解决方案,分别为社交分销、社区团购、服务预订与入住、订货与供应链解决方案。无论商业模式是O2O、B2B、B2C、OMO,还是B2B2C模式,力谱云全都为您HOLD住。另外,在运营营销环节,配备分销、拼团、信息流、秒杀等数十种前沿营销工具,与会员运营工具,帮助企业轻松开展营销活动,并借助大数据实时捕捉平台、用户数据,为每一次的运营获取精准的市场确据。并且,通过力谱云,可省下传统App开发市场的90%成本,高效进行App平台搭建。

移动流量窗口仍在黄金期,而你的企业现在只缺线上平台与工具了!搭乘一站式开发的快速列车,让力谱云为您的移动之旅,一路用技术Carry到底吧!

继续阅读 »

身处全民生活互联网化时代,传统企业走互联网转型已是必然趋势。然而,如何结合自身门店、用户资源,通过开发App、小程序为业务增添加瓦,想必对所有传统行业业主来说,仍是一片未耕耘的土地。今天,就让我们一同借鉴百果园,这位历经十余载,门店超3700家,线上销量突破全年总销量20%以上的水果零售霸主,究竟是如何通过门店+App+小程序的方式,GET到新流量池的正确打造模式吧!

百果园核心战略:线上线下一体化

2016年年底,百果园正式开启了“线上线下一体化战略”布局,并从一二线城市进行扎根,近几年逐步下沉到三四线渠道。在运营环节中,百果园一方面大力开店建仓布局线下,降低冷链配送成本;另一方面搭建开发APP、小程序,并结合微信分别在用户、营销、配送服务等方面取得了可喜的进展,并通过爆款打造,以及小程序拼团也大幅增加了用户二次消费率。那么,微信、小程序、App、门店究竟都各自扮演了哪些角色?又对百果园巨大的销量,起到了怎样的推动作用呢?跟随力谱云的脚步,详细探究一番吧!

微信+小程序+App:逐一击破用户、营销、服务营垒

目前,搭建开发APP、小程序,以及微信生态已基本涵盖主流移动渠道,并且基于每个渠道的消费场景不同,用户重叠度也并不特别高,因而百果园分别通过微信社群、微信公众号,支付宝/微信小程序、百果园App及美团等第三方平台,在线上业务板块做了细分切割,并且这三者的销售关系并非此消彼长,而是在不断一同增长。平台细分如下,企业家们也可参考打造!

支付宝小程序:交易类服务平台。作为新晋入场角色,主要提供会员服务与到家到店服务,目前发展体量较小,但拥有着增速较快的良好势头。
微信社群+小程序+公众号:百果园的核心流量池场景,由门店+社群构成。主要用于辐射门店周边社区用户,与用户建立起积极的沟通渠道,并利用公众号、小程序,进行服务推广,帮助深度触达用户,唤醒消费。
微信小程序:百果园旗下共上线了3款微信小程序。百果园+,主要用于提供核心业务。百果园好礼,以礼品卡形式,为用户提供水果送礼的服务。百果心享,则专为付费会员提供服务。这三者业务分工不同,但可彼此跳转关联,多方打通微信生态圈业务。
App+美团、饿了么第三方平台:借由App平台功能齐全的特性,在开发属于自己企业APP的同时,合作美团、饿了么等第三方平台,主要用于为用户提供配送到家服务,进一步覆盖主流渠道线上用户。
营销战略:爆款与拼团双管齐下

在线上运营环节中,爆款推广和社区拼团都是百果园的一大变现利器。比如针对季节推选时令水果,能更好地刺激消费,提升业绩。在拼团方面,他们通过App进行试水,在取得令人惊喜的成绩后,便试图在App、小程序中都纷纷加入这一拼团要素,并且搭配到店服务,不仅可以提升销量,提升新用户对门店品牌的信赖感,更能加深用户的到店消费习惯,最后还可刺激二次消费,可谓一举多得。正所谓,战术不在乎多,而贵乎精,如果企业能依据自身产品、用户习惯,搭配几项有效的营销策略,必然能让平台更上一层楼。

想打造百果园App+小程序+..?力谱云一次就能Carry全场

如果您的企业正处于传统转型的阵痛之中,如果您寻求门店服务的新突破,如果您渴望收割移动洪荒流量,如果您也想复刻百果园式成功,一站式解决所有平台开发难题,与营销解决方案,就让力谱云来带您Carry全场吧!

力谱云,专注为企业用户提供新颖、热门、高效的场景化移动电商平台。支持一站式搭建App+小程序+微商城+移动网站,并打通了四大主流移动电商解决方案,分别为社交分销、社区团购、服务预订与入住、订货与供应链解决方案。无论商业模式是O2O、B2B、B2C、OMO,还是B2B2C模式,力谱云全都为您HOLD住。另外,在运营营销环节,配备分销、拼团、信息流、秒杀等数十种前沿营销工具,与会员运营工具,帮助企业轻松开展营销活动,并借助大数据实时捕捉平台、用户数据,为每一次的运营获取精准的市场确据。并且,通过力谱云,可省下传统App开发市场的90%成本,高效进行App平台搭建。

移动流量窗口仍在黄金期,而你的企业现在只缺线上平台与工具了!搭乘一站式开发的快速列车,让力谱云为您的移动之旅,一路用技术Carry到底吧!

收起阅读 »

ios 用户拒绝 相册访问 ,引导用户 到 设置页面,开启 相册访问权限

                            uni.chooseImage({  
                    count: 1,  
                    sizeType: ['original', 'compressed'],  
                    sourceType: ['album'],  
                    success: res => {  
                        console.log(res)  
                    },  
                    fail: err => {  
                        console.log('选择图片失败!')  
                        // #ifdef APP-PLUS  
                          if(plus.os.name == 'iOS') {  
                              var PHPhotoLibrary = plus.ios.importClass('PHPhotoLibrary')  
                              var PHAuthorizationStatus = PHPhotoLibrary.authorizationStatus()  
                              if(PHAuthorizationStatus != 3 ) {  
                                 uni.showModal({  
                                    content: '需要访问您的相册,请在设置里开启',  
                                    confirmText: '设置',  
                                    success: res => {  
                                        if(res.confirm) {  
                                            plus.runtime.openURL('app-settings://')  
                                        }  
                                    }  
                                 });   
                              }  
                          }  
                        // #endif  
                        console.log(JSON.stringify(err))  
                    }  
                })  
继续阅读 »
                            uni.chooseImage({  
                    count: 1,  
                    sizeType: ['original', 'compressed'],  
                    sourceType: ['album'],  
                    success: res => {  
                        console.log(res)  
                    },  
                    fail: err => {  
                        console.log('选择图片失败!')  
                        // #ifdef APP-PLUS  
                          if(plus.os.name == 'iOS') {  
                              var PHPhotoLibrary = plus.ios.importClass('PHPhotoLibrary')  
                              var PHAuthorizationStatus = PHPhotoLibrary.authorizationStatus()  
                              if(PHAuthorizationStatus != 3 ) {  
                                 uni.showModal({  
                                    content: '需要访问您的相册,请在设置里开启',  
                                    confirmText: '设置',  
                                    success: res => {  
                                        if(res.confirm) {  
                                            plus.runtime.openURL('app-settings://')  
                                        }  
                                    }  
                                 });   
                              }  
                          }  
                        // #endif  
                        console.log(JSON.stringify(err))  
                    }  
                })  
收起阅读 »

安卓获取已安装APP列表

Android uniapp

最近使用uniapp需要获取安卓手机已安装的应用列表
直接上代码

getAppList(){  
    plus.android.importClass('java.util.ArrayList');  
    plus.android.importClass('android.content.pm.PackageInfo');    
    plus.android.importClass('android.content.pm.PackageManager');  
    var ApplicationInfo = plus.android.importClass('android.content.pm.ApplicationInfo');  
    var MainActivity = plus.android.runtimeMainActivity();    
    var PackageManager = MainActivity.getPackageManager();    
    var pinfo = plus.android.invoke(PackageManager, 'getInstalledPackages', 0)    
    if (pinfo != null) {  
        var apklist = []  
        for (var i = 0; i < pinfo.size(); i++) {    
            //PackageInfo{4b45699f9d  com.tencent.mobileqq}    
            var pkginfo = pinfo.get(i);  
            var issysapk = ((pkginfo.plusGetAttribute("applicationInfo").plusGetAttribute("flags") & ApplicationInfo.FLAG_SYSTEM) != 0) ? true : false  
            if(issysapk == false){  
                const apkinfo = {  
                    appName:pkginfo.plusGetAttribute("applicationInfo").loadLabel(PackageManager).toString(),  
                    packageName:pkginfo.plusGetAttribute("packageName"),  
                    versionName:pkginfo.plusGetAttribute("versionName"),  
                    versionCode:pkginfo.plusGetAttribute("versionCode")  
                }  
                apklist.push(apkinfo)  
            }  

        }  
        //this.appList = apklist  
        //打印出所有的APP名称,包名,版本  
        console.log(JSON.stringify(apklist))  
    }  
}

直接调用此方法即可。

继续阅读 »

最近使用uniapp需要获取安卓手机已安装的应用列表
直接上代码

getAppList(){  
    plus.android.importClass('java.util.ArrayList');  
    plus.android.importClass('android.content.pm.PackageInfo');    
    plus.android.importClass('android.content.pm.PackageManager');  
    var ApplicationInfo = plus.android.importClass('android.content.pm.ApplicationInfo');  
    var MainActivity = plus.android.runtimeMainActivity();    
    var PackageManager = MainActivity.getPackageManager();    
    var pinfo = plus.android.invoke(PackageManager, 'getInstalledPackages', 0)    
    if (pinfo != null) {  
        var apklist = []  
        for (var i = 0; i < pinfo.size(); i++) {    
            //PackageInfo{4b45699f9d  com.tencent.mobileqq}    
            var pkginfo = pinfo.get(i);  
            var issysapk = ((pkginfo.plusGetAttribute("applicationInfo").plusGetAttribute("flags") & ApplicationInfo.FLAG_SYSTEM) != 0) ? true : false  
            if(issysapk == false){  
                const apkinfo = {  
                    appName:pkginfo.plusGetAttribute("applicationInfo").loadLabel(PackageManager).toString(),  
                    packageName:pkginfo.plusGetAttribute("packageName"),  
                    versionName:pkginfo.plusGetAttribute("versionName"),  
                    versionCode:pkginfo.plusGetAttribute("versionCode")  
                }  
                apklist.push(apkinfo)  
            }  

        }  
        //this.appList = apklist  
        //打印出所有的APP名称,包名,版本  
        console.log(JSON.stringify(apklist))  
    }  
}

直接调用此方法即可。

收起阅读 »

关于uniapp中使用web-view的经验

uniapp Webview

首先说一下环境,用的是HBX1.9.4,连接的网页是vue工程下的一个界面,存在路由的判断,我做的一些跳转都是在路由里面设置的
一开始,出现了一个很奇怪的问题,不知道是不是在vue中异步请求的问题,后来证明不是

document.addEventListener('UniAppJSBridgeReady', function () {  
      uni.reLaunch({  
           url: '../../pages/menu/menu?list='+JSON.stringify(appMenuList)  
       });  
});

在上一段代码中,我只要单独放一个输出语句,完全可以,但是只要加了跳转的语句,就不会触发
后来试了很多次,利用延时语句,发现是不定时的触发,偶尔性
后来网上查找资料参考了支付宝小程序的使用文档,模仿使用window.UniAppJSBridge,完美解决问题,之前看到有人说使用uni.postMessage的时候,uniapp并不能及时收到网页传回来的消息,这个我没有验证,感兴趣的可以试一试,我的代码如下:

 setTimeout(() => {  
                    if (window.UniAppJSBridge) {  
                        uni.reLaunch({  
                            url: '../../pages/menu/menu?list='+JSON.stringify(appMenuList)  
                        });  
                    } else {  
                        document.addEventListener('UniAppJSBridgeReady', function () {  
                            uni.reLaunch({  
                                url: '../../pages/menu/menu?list='+JSON.stringify(appMenuList)  
                            });  
                        });  
                    }  
                }, 100);

大家有问题,可以评论

继续阅读 »

首先说一下环境,用的是HBX1.9.4,连接的网页是vue工程下的一个界面,存在路由的判断,我做的一些跳转都是在路由里面设置的
一开始,出现了一个很奇怪的问题,不知道是不是在vue中异步请求的问题,后来证明不是

document.addEventListener('UniAppJSBridgeReady', function () {  
      uni.reLaunch({  
           url: '../../pages/menu/menu?list='+JSON.stringify(appMenuList)  
       });  
});

在上一段代码中,我只要单独放一个输出语句,完全可以,但是只要加了跳转的语句,就不会触发
后来试了很多次,利用延时语句,发现是不定时的触发,偶尔性
后来网上查找资料参考了支付宝小程序的使用文档,模仿使用window.UniAppJSBridge,完美解决问题,之前看到有人说使用uni.postMessage的时候,uniapp并不能及时收到网页传回来的消息,这个我没有验证,感兴趣的可以试一试,我的代码如下:

 setTimeout(() => {  
                    if (window.UniAppJSBridge) {  
                        uni.reLaunch({  
                            url: '../../pages/menu/menu?list='+JSON.stringify(appMenuList)  
                        });  
                    } else {  
                        document.addEventListener('UniAppJSBridgeReady', function () {  
                            uni.reLaunch({  
                                url: '../../pages/menu/menu?list='+JSON.stringify(appMenuList)  
                            });  
                        });  
                    }  
                }, 100);

大家有问题,可以评论

收起阅读 »

#APP的H5页面#教育类

5+App开发

UI设计已完成
开发类似于凯叔讲故事html5 App,(Android/iOS版)
有现成后台服务器和相应接口,
需有深圳开发者方便交流,要有webSocket及 支付相关经验开发
预算1万起,面谈

UI设计已完成
开发类似于凯叔讲故事html5 App,(Android/iOS版)
有现成后台服务器和相应接口,
需有深圳开发者方便交流,要有webSocket及 支付相关经验开发
预算1万起,面谈

DCloud appid 用途/作用/使用说明

appid

DCloud appid(以后简称 appid) 是 DCloud 应用的唯一标识,在 DCloud 提供的所有服务中,都会以 appid 来标记一个应用。注意这和各家小程序的appid以及Apple的appid(其实就是iOS的包名)是不同的体系。

本文将介绍DCloud appid 的各种使用场景。

管理 appid

创建应用

  • 在 HBuilderX 中创建项目时,HBuilderX 会自动联网生成 appid, 并将该 appid 保存在 manifest 文件中的 appid 字段;
  • 登录开发者中心,也可以创建 uniapp、5+app 等类型应用的 appid;
  • wap2app 项目比较特殊,wap2app 项目的 appid 是在 HBuilderX 中本地生成的,需要提交云打包后,appid 才会同步到服务端;如果在开发者中心的应用列表中查找不到 wap2app 项目的 appid,提交一次云打包即可。
  • 认领 wap2app appid:如果开发者发现自己创建 wap2app 项目 appid 被其他人占用时,可以登录开发者中心,点击“wap2app应用认领”完成自助认领。认领前请先确认是否是由同事或其他认识的人所创建,如由同事创建也可通过转让应用的方式将 appid 转移到对应账号下。

注意:以下场景不会自动生成 appid,开发者可以登录开发者中心自行创建。

  • 使用离线打包
  • 使用 cli 创建 uniapp 项目

创建者即为该应用的所有者。一个应用只能有一个所有者,但可以设置多个协作者。

查看应用列表

登录 开发者中心 可以查看自己创建的应用列表。

增加协作者

1个应用有一个管理员,但可以有多名协作开发者。
在使用app云端打包时,协作开发者也有权对该Appid进行云打包。
如何授权应用(设置协作者)

转让应用

应用的管理员可以将应用转让给他人。常见于员工离职和外包商转让给甲方。
如何转让应用

使用场景

  1. 云打包
    • DCloud 根据 appid 来判断用户是否有权限进行云打包。既不是所有者、又不是协作者,就无法打包;
    • 打包后的原生应用根据 appid 来管理本地资源。每个appid有独立的沙盒,存储是隔离的;
    • 热更新(wgt升级)通过 appid 来覆盖资源
  2. 数据统计
  3. 广告
  4. 换量
  5. uni push
  6. 制作发行页面
  7. 用户反馈
  8. 购买原生插件
  9. uni云端一体安全网络

修改 appid

  • 在 HBuilderX 打开 manifest.json,在“基础配置”界面点击“重新获取”,可以生成新的 appid。注意:项目名称不变时,不会分配新的 appid。
  • 通过 manifest.json 源码视图修改 appid,适用于需要将 appid 修改回历史 appid 的场景。

修改 appid 将会引发的问题

  • 使用新 appid 打包的应用在更新时,会丢失老版应用本地缓存的数据,包括plus.storage、uni.setStorage保存的数据、plus.io保存的文件、plus.sqlite的数据等
  • 无法使用新的 appid 进行 wgt 升级
  • 开发者中心提供的相关云服务会出现多个应用,如统计数据、广告、换量、崩溃日志、用户反馈数据等。
  • uni push需要重新配置,否则无法推送
  • 如果在插件市场购买过原生插件,这些插件会绑定appid。修改 appid 后无法继续使用插件,需要重新购买。
  • 已开通uniad增强广告的应用,修改 appid 后会导致广告无法正常展示。
  • uni云端一体安全网络将无法使用
继续阅读 »

DCloud appid(以后简称 appid) 是 DCloud 应用的唯一标识,在 DCloud 提供的所有服务中,都会以 appid 来标记一个应用。注意这和各家小程序的appid以及Apple的appid(其实就是iOS的包名)是不同的体系。

本文将介绍DCloud appid 的各种使用场景。

管理 appid

创建应用

  • 在 HBuilderX 中创建项目时,HBuilderX 会自动联网生成 appid, 并将该 appid 保存在 manifest 文件中的 appid 字段;
  • 登录开发者中心,也可以创建 uniapp、5+app 等类型应用的 appid;
  • wap2app 项目比较特殊,wap2app 项目的 appid 是在 HBuilderX 中本地生成的,需要提交云打包后,appid 才会同步到服务端;如果在开发者中心的应用列表中查找不到 wap2app 项目的 appid,提交一次云打包即可。
  • 认领 wap2app appid:如果开发者发现自己创建 wap2app 项目 appid 被其他人占用时,可以登录开发者中心,点击“wap2app应用认领”完成自助认领。认领前请先确认是否是由同事或其他认识的人所创建,如由同事创建也可通过转让应用的方式将 appid 转移到对应账号下。

注意:以下场景不会自动生成 appid,开发者可以登录开发者中心自行创建。

  • 使用离线打包
  • 使用 cli 创建 uniapp 项目

创建者即为该应用的所有者。一个应用只能有一个所有者,但可以设置多个协作者。

查看应用列表

登录 开发者中心 可以查看自己创建的应用列表。

增加协作者

1个应用有一个管理员,但可以有多名协作开发者。
在使用app云端打包时,协作开发者也有权对该Appid进行云打包。
如何授权应用(设置协作者)

转让应用

应用的管理员可以将应用转让给他人。常见于员工离职和外包商转让给甲方。
如何转让应用

使用场景

  1. 云打包
    • DCloud 根据 appid 来判断用户是否有权限进行云打包。既不是所有者、又不是协作者,就无法打包;
    • 打包后的原生应用根据 appid 来管理本地资源。每个appid有独立的沙盒,存储是隔离的;
    • 热更新(wgt升级)通过 appid 来覆盖资源
  2. 数据统计
  3. 广告
  4. 换量
  5. uni push
  6. 制作发行页面
  7. 用户反馈
  8. 购买原生插件
  9. uni云端一体安全网络

修改 appid

  • 在 HBuilderX 打开 manifest.json,在“基础配置”界面点击“重新获取”,可以生成新的 appid。注意:项目名称不变时,不会分配新的 appid。
  • 通过 manifest.json 源码视图修改 appid,适用于需要将 appid 修改回历史 appid 的场景。

修改 appid 将会引发的问题

  • 使用新 appid 打包的应用在更新时,会丢失老版应用本地缓存的数据,包括plus.storage、uni.setStorage保存的数据、plus.io保存的文件、plus.sqlite的数据等
  • 无法使用新的 appid 进行 wgt 升级
  • 开发者中心提供的相关云服务会出现多个应用,如统计数据、广告、换量、崩溃日志、用户反馈数据等。
  • uni push需要重新配置,否则无法推送
  • 如果在插件市场购买过原生插件,这些插件会绑定appid。修改 appid 后无法继续使用插件,需要重新购买。
  • 已开通uniad增强广告的应用,修改 appid 后会导致广告无法正常展示。
  • uni云端一体安全网络将无法使用
收起阅读 »

禁用软键盘方法

软键盘

// html  
<input type="number"  class="mui-input-clear"  value="" onclick="app.hideKeyBoard(this);">  

app.hideKeyBoard= function(dom) {  
        // 隐藏键盘  
        document.activeElement.blur();  
        setTimeout(function() {  
            _$(dom).focus()  
        }, 20)  

    }  

看了很多禁用软键盘的帖子 都不是很满意,通过测试,上面的技巧可以有效的禁用软键盘的弹出,其中_$是jq的$方法。这不是最好的方法,希望网友有更好的方法可以提供

继续阅读 »

// html  
<input type="number"  class="mui-input-clear"  value="" onclick="app.hideKeyBoard(this);">  

app.hideKeyBoard= function(dom) {  
        // 隐藏键盘  
        document.activeElement.blur();  
        setTimeout(function() {  
            _$(dom).focus()  
        }, 20)  

    }  

看了很多禁用软键盘的帖子 都不是很满意,通过测试,上面的技巧可以有效的禁用软键盘的弹出,其中_$是jq的$方法。这不是最好的方法,希望网友有更好的方法可以提供

收起阅读 »