uni-app 引入本地iconfont的正确姿势

uniapp

iconfont文件里面包含 iconfont.ttf、iconfont.css，将 iconfont.ttf文件转位 base64。
推荐转换工具地址：https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置，并且设置代码如下：

@font-face {  
  font-family: "iconfont";  
  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}  
.iconfont {  
  display: inline-block;  
}

最后则再项目中App.vue中引入iconfont.css文件

<style>  
@import "./font/iconfont.css";  
</style>

在任意组件中使用方法：

<view class="iconfont icon-XXX"></view>

经测试在H5及小程序中可以正常使用

备注：
iconfont文件是使用的阿里图标库： https://www.iconfont.cn

继续阅读 »

iconfont文件里面包含 iconfont.ttf、iconfont.css，将 iconfont.ttf文件转位 base64。
推荐转换工具地址：https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置，并且设置代码如下：

@font-face {  
  font-family: "iconfont";  
  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}  
.iconfont {  
  display: inline-block;  
}

最后则再项目中App.vue中引入iconfont.css文件

<style>  
@import "./font/iconfont.css";  
</style>

在任意组件中使用方法：

<view class="iconfont icon-XXX"></view>

经测试在H5及小程序中可以正常使用

备注：
iconfont文件是使用的阿里图标库： https://www.iconfont.cn

收起阅读 »

uni-app在H5平台使用video.js，以及播放m3u8格式的视频

video.js

创建模板文件index.html，在模版内引用video.js

<!DOCTYPE html>  
<html lang="zh-CN">  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
        <title>  
            <%= htmlWebpackPlugin.options.title %>  
        </title>  
        <script>  
            document.addEventListener('DOMContentLoaded', function() {  
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
            })  
        </script>  
        <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />  
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">  
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>  
    </head>  
    <body>  
        <noscript>  
            <strong>Please enable JavaScript to continue.</strong>  
        </noscript>  
        <div id="app"></div>  
        <!-- built files will be auto injected -->  
    </body>  
</html>

在manifest.json内配置index.html路径
在vue文件内使用video.js初始化播放器

<template>  
    <view class="content">  
        <view class="video-js" ref="video">  

        </view>  
    </view>  
</template>  

<script>  
    export default {  
        onReady() {  
            // #ifdef H5  
            var video = document.createElement('video')  
            video.id = 'video'  
            video.style = 'width: 300px;height: 150px;'  
            video.controls = true  
            var source = document.createElement('source')  
            source.src = 'http://yf.ugc.v.cztv.com/cztv/ugcvod/2018/04/14/A98CD7B26B06D94A5CEA56AA7D723572/h264_800k_mp4.mp4_playlist.m3u8'  
            video.appendChild(source)  
            this.$refs.video.$el.appendChild(video)  
            videojs('video')  
            // #endif  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

注意事项

示例工程见附件
如果视频源格式为m3u8，m3u8文件可能遇到跨域问题，请自行百度

继续阅读 »

创建模板文件index.html，在模版内引用video.js

<!DOCTYPE html>  
<html lang="zh-CN">  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
        <title>  
            <%= htmlWebpackPlugin.options.title %>  
        </title>  
        <script>  
            document.addEventListener('DOMContentLoaded', function() {  
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
            })  
        </script>  
        <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />  
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">  
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>  
    </head>  
    <body>  
        <noscript>  
            <strong>Please enable JavaScript to continue.</strong>  
        </noscript>  
        <div id="app"></div>  
        <!-- built files will be auto injected -->  
    </body>  
</html>

在manifest.json内配置index.html路径
在vue文件内使用video.js初始化播放器

<template>  
    <view class="content">  
        <view class="video-js" ref="video">  

        </view>  
    </view>  
</template>  

<script>  
    export default {  
        onReady() {  
            // #ifdef H5  
            var video = document.createElement('video')  
            video.id = 'video'  
            video.style = 'width: 300px;height: 150px;'  
            video.controls = true  
            var source = document.createElement('source')  
            source.src = 'http://yf.ugc.v.cztv.com/cztv/ugcvod/2018/04/14/A98CD7B26B06D94A5CEA56AA7D723572/h264_800k_mp4.mp4_playlist.m3u8'  
            video.appendChild(source)  
            this.$refs.video.$el.appendChild(video)  
            videojs('video')  
            // #endif  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

注意事项

示例工程见附件
如果视频源格式为m3u8，m3u8文件可能遇到跨域问题，请自行百度

收起阅读 »

uni-app 中的条件编译

条件编译 uniapp

uni-app 将已经将可以跨平台兼容处理的组件及 API 等进行了封装，但是部分平台的特性无法跨平台。
由此，uni-app 提供了条件编译的方案，来处理不同平台的特定或差异。

语法

ifdef：if defined 正向条件，也就是说在 XX 平台下生效。
ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。
endif：条件结束
%PLATFORM%：平台名称

%PLATFORM% 可取值

APP-PLUS
APP-PLUS-NVUE
H5
MP-WEIXIN
MP-ALIPAY
MP-BAIDU
MP

示例

以下这段代码，只会在 5+App 环境下生效/存在。

// #ifdef APP-PLUS  
const uuid = plus.device.uuid;  
// #endif

除了支持单个平台的条件编译外，还支持使用 || 来满足多平台条件编译。

这个组件会在微信小程序及百度小程序环境下生效：

<!-- #ifdef MP-WEIXIN || MP-BAIDU -->  
<button @getuserinfo="getUserInfo">获取用户信息</button>  
<!-- #endif -->

不同文件或语言中，注释的方式有所不同。在实际使用中一定要注意，不要随意复制导致语法错误。

组件

组件的注释，就是 HTML 标签的注释语法。

<!-- #ifdef MP-WEIXIN -->  
<ad unit-id="123456789"></ad>  
<!-- #endif -->

CSS

在 CSS 中使用条件编译，往往是因为某些平台的内置组件的样式，会影响到一血界面的渲染。

/* #ifdef MP-ALIPAY*/  
input {  
    padding: 0;  
}  
/* #endif */

还有一种场景就是不同平台下，页面的样式的确会有设计上的差异。
这种情况，可以使用 CSS 的条件编译来处理，也可以配合组件的条件编译来处理。

.app-text {  
    color: #007AFF;  
}  
.weixin-text {  
    color: #FF3333;  
}

<!-- #ifdef APP-PLUS -->  
<text class="app-text">text</text>  
<!-- #endif -->  
<!-- #ifdef MP-WEIXIN -->  
<text class="weixin-text">text</text>  
<!-- #endif -->

这样的话，在 5+App 上这个文字的颜色是蓝色，在微信小程序上就是红色。

这个方案还可以进一步调整，就是在计算属性中使用条件编译，动态绑定组件的 class。

JavaScript

平台特有的 API 或功能，需要使用条件编译来处理。

// #ifdef APP-PLUS  
plus.speech.startRecognize(options, function (result) {  
    console.log('语音识别成功');  
}, function (error) {  
    console.log('语音识别失败');  
});  
// #endif

pages.json

除了在页面内容的代码中支持条件编译外，uni-app 还支持在 pages.json 中通过条件编译来组织多平台的页面。
这样做可以大幅减少生成的代码体积，尤其是在小程序平台。

当然，普通的 json 文件中是不支持注释的。pages.json 中条件编译的校验以及代码提示等，是由 HBuilderX 来支持完成的。

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333"  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
        // #ifdef APP-PLUS  
        , {  
            "path": "pages/speech/speech"  
        }  
        // #endif  
    ]  
}

在 pages.json 中使用条件编译，需要注意以下几个点：

如果页面是 pages 的最终一项，那么分隔符逗号需要在花括号前。上面例子，就是这种场景。
globalStyle 的条件编译，推荐使用平台节点来处理。

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333",  
        "mp-weixin": {  
            "backgroundColor": "#FFFFFF"  
        },  
        "mp-alipay": {  
            "titleBarColor": "#FFFFFF"  
        }  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
    ]  
}

平台节点下面的配置，建议参考特定平台的配置说明，直接使用平台的特有属性。

static

为了进一步减少应用的包体积，用于存放静态资源的 static 目录同样支持了条件编译。

支持的目录名

app-plus
h5
mp-weixin
mp-alipay
mp-baidu

具体的使用，可以参考下 hello-uniapp 中在 static/app-plus 下存放 location@3x.png。
hello-uniapp 中这样处理，解决了两个问题：

iOS 平台地图的覆盖物，使用高清图时，文件名称需要以 @2x/@3x 结尾。
支付宝小程序，项目中不能出现 @ 等特殊符号命名的文件。

结束

uni-app 中的条件编译，就分享到这里。大家在使用的过程中，如果有问题或者更好的想法，欢迎在下方进行讨论。

继续阅读 »

uni-app 将已经将可以跨平台兼容处理的组件及 API 等进行了封装，但是部分平台的特性无法跨平台。
由此，uni-app 提供了条件编译的方案，来处理不同平台的特定或差异。

语法

ifdef：if defined 正向条件，也就是说在 XX 平台下生效。
ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。
endif：条件结束
%PLATFORM%：平台名称

%PLATFORM% 可取值

APP-PLUS
APP-PLUS-NVUE
H5
MP-WEIXIN
MP-ALIPAY
MP-BAIDU
MP

示例

以下这段代码，只会在 5+App 环境下生效/存在。

// #ifdef APP-PLUS  
const uuid = plus.device.uuid;  
// #endif

除了支持单个平台的条件编译外，还支持使用 || 来满足多平台条件编译。

这个组件会在微信小程序及百度小程序环境下生效：

<!-- #ifdef MP-WEIXIN || MP-BAIDU -->  
<button @getuserinfo="getUserInfo">获取用户信息</button>  
<!-- #endif -->

不同文件或语言中，注释的方式有所不同。在实际使用中一定要注意，不要随意复制导致语法错误。

组件

组件的注释，就是 HTML 标签的注释语法。

<!-- #ifdef MP-WEIXIN -->  
<ad unit-id="123456789"></ad>  
<!-- #endif -->

CSS

在 CSS 中使用条件编译，往往是因为某些平台的内置组件的样式，会影响到一血界面的渲染。

/* #ifdef MP-ALIPAY*/  
input {  
    padding: 0;  
}  
/* #endif */

还有一种场景就是不同平台下，页面的样式的确会有设计上的差异。
这种情况，可以使用 CSS 的条件编译来处理，也可以配合组件的条件编译来处理。

.app-text {  
    color: #007AFF;  
}  
.weixin-text {  
    color: #FF3333;  
}

<!-- #ifdef APP-PLUS -->  
<text class="app-text">text</text>  
<!-- #endif -->  
<!-- #ifdef MP-WEIXIN -->  
<text class="weixin-text">text</text>  
<!-- #endif -->

这样的话，在 5+App 上这个文字的颜色是蓝色，在微信小程序上就是红色。

这个方案还可以进一步调整，就是在计算属性中使用条件编译，动态绑定组件的 class。

JavaScript

平台特有的 API 或功能，需要使用条件编译来处理。

// #ifdef APP-PLUS  
plus.speech.startRecognize(options, function (result) {  
    console.log('语音识别成功');  
}, function (error) {  
    console.log('语音识别失败');  
});  
// #endif

pages.json

除了在页面内容的代码中支持条件编译外，uni-app 还支持在 pages.json 中通过条件编译来组织多平台的页面。
这样做可以大幅减少生成的代码体积，尤其是在小程序平台。

当然，普通的 json 文件中是不支持注释的。pages.json 中条件编译的校验以及代码提示等，是由 HBuilderX 来支持完成的。

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333"  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
        // #ifdef APP-PLUS  
        , {  
            "path": "pages/speech/speech"  
        }  
        // #endif  
    ]  
}

在 pages.json 中使用条件编译，需要注意以下几个点：

如果页面是 pages 的最终一项，那么分隔符逗号需要在花括号前。上面例子，就是这种场景。
globalStyle 的条件编译，推荐使用平台节点来处理。

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333",  
        "mp-weixin": {  
            "backgroundColor": "#FFFFFF"  
        },  
        "mp-alipay": {  
            "titleBarColor": "#FFFFFF"  
        }  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
    ]  
}

平台节点下面的配置，建议参考特定平台的配置说明，直接使用平台的特有属性。

static

为了进一步减少应用的包体积，用于存放静态资源的 static 目录同样支持了条件编译。

支持的目录名

app-plus
h5
mp-weixin
mp-alipay
mp-baidu

具体的使用，可以参考下 hello-uniapp 中在 static/app-plus 下存放 location@3x.png。
hello-uniapp 中这样处理，解决了两个问题：

iOS 平台地图的覆盖物，使用高清图时，文件名称需要以 @2x/@3x 结尾。
支付宝小程序，项目中不能出现 @ 等特殊符号命名的文件。

结束

uni-app 中的条件编译，就分享到这里。大家在使用的过程中，如果有问题或者更好的想法，欢迎在下方进行讨论。

收起阅读 »

1，手机桌面(暂只支持Android)
2，微信搜索
3，线下扫码
4，微信菜单“发现”——“小程序”
5，小程序识别码
6，好友分享小程序
7，公众号关联推送
8，附近的小程序
9，小程序列表(历史记录)
10，公众号菜单直达
11，聊天窗口
12，群资料页-群小程序
13，微信支付入口
14，微信支付结果页
15，公众号底部菜单
16，小程序跳转
17，通过APP打开小程序
18，公众号详情页
19，卡券页面
20，朋友圈
21，通讯录
22，微信群的分享
23，通过图片打开链接小程序
24，通过文字链接打开小程序
25，小程序与新媒体
26，小程序与广告推广
27，关键词搜索
28，“搜一搜”里面
29，小程序置顶
30，星标小程序
31，门店小程序跳转服务小程序
32，小程序与立减金
33，聊天小程序
34，公众号广告
35，LBS推广
36，qq浏览器
37，朋友圈广告
38，微信搜索出现小程序入口
39，第三方应用小程序
40，腾讯系pc入口

继续阅读 »

在nvue中使用sass less

nvue sass

烦啊，为了能在nvue中使用sass，我将hx安装包研究了个透，怎么做都不行，尽管找到了nvue的webpack，添加了sassloader一样不行。
后来没想到这么简单............

----右键项目根目录
----打开命令行
----npm init -y （初始化项目）
----npm install sass-loader -D （安装sass）

这样nvue中style标签就可以lang=scss啦
虽然还是不能嵌套书写，但是能继承已经很好了，配合上uni.scss（nvue需要手动@import），最大程度的可以跟vue文件公用样式

less stylus 应该无差异

继续阅读 »

Android 离线录音崩溃

录音时报这个错误，
No implementation found for void io.dcloud.feature.audio.mp3.SimpleLame.init(int, int, int, int, int)
把下面的文件添加上就好了

小程序/uniapp支持的css选择器一览

DCloud css 选择器小程序 uniapp

本次测试主要参考文档为

w3school CSS 选择器参考手册
(主要是安卓/ios/微信小程序的css选择器兼容)

入坑uniapp/小程序过程中看到dcloud/微信对支持的css选择器的描述只有六个,
分别是.class , #id , element , element,element , :before , :after
但是看到dcloud给uniapp写的花里胡哨的uni的ui库,
还有各种花里胡哨的小程序,
并且uniapp还表明支持之前各种无dom的ui库,
所以我觉得事情并没有这么简单,
趁着元旦放假,抽出一下午时间,
本单身肥宅猿测试了下w3c提供的选择器,
也当是踩一回uni/小程序的坑吧

具体支持情况见下表(Y表示支持,N表示不支持)

图挂了请前往segmentfault查看

(问答社区的makedown语法支持比较少,请前往segmentfault查看表格)
点我前往查看

写在后面

至于其他厂商的小程序
我也没有踩坑经验
但是可参考微信小程序的兼容
毕竟是微信把小程序推起来之后
其他厂商才开始出小程序
(最开始的时候支付宝小程序抄微信小程序源码事件还有人记得不)

> (好像不弄套自己家的小程序出来,自己就不是大厂了似得)
> 求求你别更新了,我学不过来了.jpg
> 手动狗头.jpg

继续阅读 »

uni-app 打包 H5 单页面应用渠道参数的传递和获取如： index.html?channelid=icefrog

业务前景：
采用uni-app开发的项目发型打包生成 H5-手机版单页面应用 打包出来的总入口页面是index.html

业务需求：
在外界直接打开index.html 总入口页面时需要传递参数及获取参数用于区分渠道来源或分享标记

相关尝试：
this.$route.query this.$route.params 等操作无效获取不到首页面的参数

解决方案：
在App.vue 应用生命周期的 onLaunch（）中采用JS直接提取链接参数然后针对参数进行拆分
如：https://www.xxx.com/h5/index.html?sceneid=h5&wxcode=xxx&puid=fff

onLaunch（）{

let tmpUrlSearch = window.location.search;// 得到：?sceneid=h5&wxcode=xxx&puid=fff
let tmpParas=GetRequestParameters(tmpUrlSearch);
let tmpSceneID = tmpParas["sceneid"];//提取参数
}；

网上抄的一段儿方法：
export const GetRequestParameters=(locationsearch) =>{

let url = locationsearch;  
let theRequest = new Object();  
if (url.indexOf("?") != -1) {  
    let str = url.substr(1);  
    let strs = str.split("&");  
    for (let i = 0; i < strs.length; i++) {  
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);  
    }  
}  
return theRequest;

}

继续阅读 »

业务前景：
采用uni-app开发的项目发型打包生成 H5-手机版单页面应用 打包出来的总入口页面是index.html

业务需求：
在外界直接打开index.html 总入口页面时需要传递参数及获取参数用于区分渠道来源或分享标记

相关尝试：
this.$route.query this.$route.params 等操作无效获取不到首页面的参数

解决方案：
在App.vue 应用生命周期的 onLaunch（）中采用JS直接提取链接参数然后针对参数进行拆分
如：https://www.xxx.com/h5/index.html?sceneid=h5&wxcode=xxx&puid=fff

onLaunch（）{

let tmpUrlSearch = window.location.search;// 得到：?sceneid=h5&wxcode=xxx&puid=fff
let tmpParas=GetRequestParameters(tmpUrlSearch);
let tmpSceneID = tmpParas["sceneid"];//提取参数
}；

网上抄的一段儿方法：
export const GetRequestParameters=(locationsearch) =>{

let url = locationsearch;  
let theRequest = new Object();  
if (url.indexOf("?") != -1) {  
    let str = url.substr(1);  
    let strs = str.split("&");  
    for (let i = 0; i < strs.length; i++) {  
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);  
    }  
}  
return theRequest;

}

收起阅读 »

力谱云为您制作专业的社区团购APP平台

5+App开发

力谱云为您制作专业的社区团购APP平台

想要制作好一款社区团购App平台，看似简单、门槛低，实际上APP制作需要很强的系统软件支持和运营体系，目前，力谱云平台所打造的一站式社区团购解决方案中，包含商城端、社区团长管理端、企业平台管理端以及配送端等，全程贯穿从商品交易到订单配送、提货、售后等各个商业场景。

商城端：购物商城、众多促销工具、拼团拉新、分销推广、自提/配送、会员中心、在线客服，支持小程序+App+微商城平台开发，致力于让企业更好的利用微信进行拉新，用App做好后续用户运营工作。

社区团长管理App：社区订单处理、佣金查看、佣金提现、销售报表、社区会员查看。

PC端/移动端管理平台：社区团长管理、商品管理、订单管理、促销管理、佣金审批、会员管理。

配送端App：配送员接单、配送员定位、路线导航、配送报表、配送员提现。

通过力谱云平台，即可以节约传统开发市场至少90%的App开发成本，快速上线一款高性价比的社区拼团App，以及所有系列运营辅助产品。并且，从研发到运营后期，力谱云全程技术覆盖。在营销环节，力谱云拥有拼团、小红书信息流、多级分销、限时抢购、满减优惠、代金券、预付卡等数十种丰富营销工具可供平台运营者，根据营销方针进行调用，更能极大刺激销售业绩的增长。目前，不少传统生鲜企业、连锁便利店企业等，都通过力谱云平台的一站式移动电商解决方案，快速上线了如小菜场、优鲜同城、超人便利等，与社区团购行业同类型的优质竞品商城平台。

有人说社区团购是新零售的新破局、是人场货的模式重构、是草根团队逆袭互联巨头的另一座丰碑。但无可否认的是，消费升级的趋势依旧在持续，只要市场潜力依旧，社交+新物种模式的革新，都将无法停下前进的脚步。

继续阅读 »

力谱云为您制作专业的社区团购APP平台

想要制作好一款社区团购App平台，看似简单、门槛低，实际上APP制作需要很强的系统软件支持和运营体系，目前，力谱云平台所打造的一站式社区团购解决方案中，包含商城端、社区团长管理端、企业平台管理端以及配送端等，全程贯穿从商品交易到订单配送、提货、售后等各个商业场景。

商城端：购物商城、众多促销工具、拼团拉新、分销推广、自提/配送、会员中心、在线客服，支持小程序+App+微商城平台开发，致力于让企业更好的利用微信进行拉新，用App做好后续用户运营工作。

社区团长管理App：社区订单处理、佣金查看、佣金提现、销售报表、社区会员查看。

PC端/移动端管理平台：社区团长管理、商品管理、订单管理、促销管理、佣金审批、会员管理。

配送端App：配送员接单、配送员定位、路线导航、配送报表、配送员提现。

通过力谱云平台，即可以节约传统开发市场至少90%的App开发成本，快速上线一款高性价比的社区拼团App，以及所有系列运营辅助产品。并且，从研发到运营后期，力谱云全程技术覆盖。在营销环节，力谱云拥有拼团、小红书信息流、多级分销、限时抢购、满减优惠、代金券、预付卡等数十种丰富营销工具可供平台运营者，根据营销方针进行调用，更能极大刺激销售业绩的增长。目前，不少传统生鲜企业、连锁便利店企业等，都通过力谱云平台的一站式移动电商解决方案，快速上线了如小菜场、优鲜同城、超人便利等，与社区团购行业同类型的优质竞品商城平台。

有人说社区团购是新零售的新破局、是人场货的模式重构、是草根团队逆袭互联巨头的另一座丰碑。但无可否认的是，消费升级的趋势依旧在持续，只要市场潜力依旧，社交+新物种模式的革新，都将无法停下前进的脚步。

收起阅读 »

制作社区团购APP的前期准备工作有哪些，力谱云分析

5+App开发

无人零售火爆过后，社区团购俨然成为了目前最为炙手可热的新风口项目。作为一个在《APP制作> 技术上并无特别创新的商业模式，却有着“社交+拼团”模式的天然引流神力，并且复购率极高，获客成本低廉，企业可以轻易地进行快速且大规模的商业模式复制。那么，作为中小玩家的你，是否也有兴趣从0开始制作并运营一款属于自己的社区团购APP呢？今天，》力谱云《就为您深入分析一番，关于制作社区团购APP前，企业家必须重点关心的几大要素。

社区团购市场究竟有多大？

根据目前开发的>》社区团购App平台》战况来说，社区团购在未来潜力无限，市场规模巨大。为何如此断言呢？从其流量模式来说，每一个社区都是流量点，目前扩张最凶猛且前景广阔的当属二三线城市为主。力谱云分析，假设一个二三线城市，拥有500-600个小区，每个小区月营收达到5-6W，那么这个城市将为企业带来预计3亿到4亿左右的年创收，这也难怪目前各路企业都在进行着争分夺秒的市场抢占。

跻身社区团购赛道的企业都有哪些？

社区团购模式优势显著，从企业角度看，现金流好、零库存、低损耗、无需门店成本、低成本即可获取大规模订单、熟人拼团更可刺激高复购率。当前社区团购的现状与盈利点都呈现优质。因此，跻身社区团购赛道的资本家不少，创业者更多，目前普遍有以下三类。

1 本地商超、传统连锁便利店：以便利店店长+社群”模式，从普通的O2O电商平台脱引而出，推广物廉价美的产品。
2 升级转型企业：多数为从事生鲜、日用品方面的转型企业。
3 互联网巨头企业。

如何做好投身打造社区团购App的先期准备？

首先，企业需要衡量好自身的资源优势。虽然社区团购App无论是在开发技术上，还是模式上并没有根本性的创新，但是想要玩转好社区团购，最重要的是在商品、物流、平台以及KOL分销者这四大方面进行深入的拓展。

其一，良好的商品品质，保证了在社区团购中，熟人社交模式，不会收到重创，从而导致团购业绩的下滑。
其二，团购配送普遍需要当日达/次日达配送，企业需要结合自身业务，选择更快捷、低损耗的配送方案。
其三，团购平台的搭建很重要，除了微信商城之外，还需要团长端、企业管理端等辅助运营平台。
其四，如何拓展团长，也就是KOL分销者，对于业绩的拉动有着举足轻重的作用。目前的典型团购模式中，包含一种“宝妈（无店铺）+社群”；另一种为“社区店+社群”，前者目前为最新营销模式，应用更为广泛。

继续阅读 »

无人零售火爆过后，社区团购俨然成为了目前最为炙手可热的新风口项目。作为一个在《APP制作> 技术上并无特别创新的商业模式，却有着“社交+拼团”模式的天然引流神力，并且复购率极高，获客成本低廉，企业可以轻易地进行快速且大规模的商业模式复制。那么，作为中小玩家的你，是否也有兴趣从0开始制作并运营一款属于自己的社区团购APP呢？今天，》力谱云《就为您深入分析一番，关于制作社区团购APP前，企业家必须重点关心的几大要素。

社区团购市场究竟有多大？

根据目前开发的>》社区团购App平台》战况来说，社区团购在未来潜力无限，市场规模巨大。为何如此断言呢？从其流量模式来说，每一个社区都是流量点，目前扩张最凶猛且前景广阔的当属二三线城市为主。力谱云分析，假设一个二三线城市，拥有500-600个小区，每个小区月营收达到5-6W，那么这个城市将为企业带来预计3亿到4亿左右的年创收，这也难怪目前各路企业都在进行着争分夺秒的市场抢占。

跻身社区团购赛道的企业都有哪些？

社区团购模式优势显著，从企业角度看，现金流好、零库存、低损耗、无需门店成本、低成本即可获取大规模订单、熟人拼团更可刺激高复购率。当前社区团购的现状与盈利点都呈现优质。因此，跻身社区团购赛道的资本家不少，创业者更多，目前普遍有以下三类。

1 本地商超、传统连锁便利店：以便利店店长+社群”模式，从普通的O2O电商平台脱引而出，推广物廉价美的产品。
2 升级转型企业：多数为从事生鲜、日用品方面的转型企业。
3 互联网巨头企业。

如何做好投身打造社区团购App的先期准备？

首先，企业需要衡量好自身的资源优势。虽然社区团购App无论是在开发技术上，还是模式上并没有根本性的创新，但是想要玩转好社区团购，最重要的是在商品、物流、平台以及KOL分销者这四大方面进行深入的拓展。

其一，良好的商品品质，保证了在社区团购中，熟人社交模式，不会收到重创，从而导致团购业绩的下滑。
其二，团购配送普遍需要当日达/次日达配送，企业需要结合自身业务，选择更快捷、低损耗的配送方案。
其三，团购平台的搭建很重要，除了微信商城之外，还需要团长端、企业管理端等辅助运营平台。
其四，如何拓展团长，也就是KOL分销者，对于业绩的拉动有着举足轻重的作用。目前的典型团购模式中，包含一种“宝妈（无店铺）+社群”；另一种为“社区店+社群”，前者目前为最新营销模式，应用更为广泛。

收起阅读 »

uni-app原生插件（native plugin）开发指南

原生插件 uniPlugins uni原生插件

新版原生插件开发文档已发布，请移步：https://nativesupport.dcloud.net.cn/

此文档将不再更新维护

概述

传统webview的原生扩展是通过webview桥方式，比如5+app。
uni-app的js运行在独立的jscore里，而不是webview里，它的原生扩展是另一套模式，是基于开源项目weex的0.26.0版本架构的扩展机制。

weex的插件也可以拿到uni-app生态中使用。

从开发方式相比，uni-app的原生插件开发模式更简单。webview桥方式需要在原生层和js层分别做很多工作。而uni-app的原生插件开发主要在原生层做封装即可。
从使用方式相比，5+的原生扩展需要离线打包，而uni-app的插件可以在线打包，插件市场还有很多优秀原生插件可拿来即用。

uni-app的原生插件分两种类型：

Module模式：能力扩展，无嵌入窗体的UI控件。大部分插件都是属于此类，比如调用计步器API。代码写法为通过js进行require，然后调用该插件对象的方法。如涉及一些弹出框、全屏ui，也仍然属于Module模式。类似于前端里的js sdk。
Component模式：在窗体中内嵌显示某个原生ui组件。比如窗体局部内嵌某个地图厂商的map组件，上下混排其他前端内容，就需要把这个原生地图sdk封装为Componet模式。代码写法与vue组件相同，在template里写组件标签。类似于前端里的vue组件。

在uni-app中支持vue和nvue两种页面，vue页面基于webview排版引擎渲染，nvue页面基于原生排版引擎渲染。

vue页面中仅支持使用Module类型的原生插件，不支持调用同步方法返回数据
nvue页面中支持使用Module和Component两种类型的原生插件。也就是如需实现嵌入页面的ui组件，前提是该页面需要使用nvue编写。

uni原生插件上线步骤

下载5+ SDK配置原生开发环境，在原生环境中开发调试插件业务逻辑
- Android平台需使用AndroidStudio
- iOS平台需XCode10+（需Mac环境）
开发调试完成后导出原生库文件
- Android平台可以是jar或aar包
- iOS平台可以是a或framework包
生成uni原生插件包（zip）
- 配置package.json文件
- 与前面导出的原生库文件一起打包
在HX中使用uni原生插件包提交云端打包，验证uni原生插件包是否正确
上传uni原生插件包到插件市场审核
审核成功后其他开发者可购买、使用uni原生插件

uni-app原生插件开发

Android平台uni-app原生插件开发文档
 iOS平台uni-app原生插件开发文档

插件开发在调测时，可能会超过40M的免费打包额度。如插件开发是为了上插件市场而不是内部使用，则可以在成功上架市场后，申请退费，返还测试产生的超限打包费用。

uni-app原生插件市场

原生插件开发后，可以上插件市场，也可以不上。如内部使用，则无需上架插件市场。

如需上插件市场，则必须按指定格式压缩为zip包，具体参考：uni-app原生插件格式说明文档

插件下架：插件下降会导致已经使用该插件的app无法再打包，这涉及到插件使用者的利益，所以原则上不允许插件下架。如有特殊原因需要下架请使用注册账号邮箱发邮件到service@dcloud.io进行申请，并详细描述下架原因

插件更新：插件作者需注意保持好版本质量和向下兼容。一旦提交市场新版插件，旧版插件就不能再使用。已经使用旧版插件的App，此后再次云打包，会直接集成新版插件。也就是插件的更新不当可能造成已经使用插件的开发者无法及时发布新版应用。

uni-app原生插件使用

uni-app原生插件使用说明文档
 HBuilderX中使用本地uni-app原生插件提交云端打包
 uni-app原生插件使用常见问题

原生离线打包集成 uni 插件文档

Android平台本地（离线）打包集成 uni-app原生插件
 iOS平台本地（离线）打包集成 uni-app原生插件

欢迎有原生开发能力的朋友入群一起交流学习（入群请提供注册邮箱）：

DCloud原生开发者群：
1群：256775471
2群：814228233
3群：455763866

继续阅读 »

新版原生插件开发文档已发布，请移步：https://nativesupport.dcloud.net.cn/

此文档将不再更新维护

概述

传统webview的原生扩展是通过webview桥方式，比如5+app。
uni-app的js运行在独立的jscore里，而不是webview里，它的原生扩展是另一套模式，是基于开源项目weex的0.26.0版本架构的扩展机制。

weex的插件也可以拿到uni-app生态中使用。

从开发方式相比，uni-app的原生插件开发模式更简单。webview桥方式需要在原生层和js层分别做很多工作。而uni-app的原生插件开发主要在原生层做封装即可。
从使用方式相比，5+的原生扩展需要离线打包，而uni-app的插件可以在线打包，插件市场还有很多优秀原生插件可拿来即用。

uni-app的原生插件分两种类型：

Module模式：能力扩展，无嵌入窗体的UI控件。大部分插件都是属于此类，比如调用计步器API。代码写法为通过js进行require，然后调用该插件对象的方法。如涉及一些弹出框、全屏ui，也仍然属于Module模式。类似于前端里的js sdk。
Component模式：在窗体中内嵌显示某个原生ui组件。比如窗体局部内嵌某个地图厂商的map组件，上下混排其他前端内容，就需要把这个原生地图sdk封装为Componet模式。代码写法与vue组件相同，在template里写组件标签。类似于前端里的vue组件。

在uni-app中支持vue和nvue两种页面，vue页面基于webview排版引擎渲染，nvue页面基于原生排版引擎渲染。

vue页面中仅支持使用Module类型的原生插件，不支持调用同步方法返回数据
nvue页面中支持使用Module和Component两种类型的原生插件。也就是如需实现嵌入页面的ui组件，前提是该页面需要使用nvue编写。

uni原生插件上线步骤

下载5+ SDK配置原生开发环境，在原生环境中开发调试插件业务逻辑
- Android平台需使用AndroidStudio
- iOS平台需XCode10+（需Mac环境）
开发调试完成后导出原生库文件
- Android平台可以是jar或aar包
- iOS平台可以是a或framework包
生成uni原生插件包（zip）
- 配置package.json文件
- 与前面导出的原生库文件一起打包
在HX中使用uni原生插件包提交云端打包，验证uni原生插件包是否正确
上传uni原生插件包到插件市场审核
审核成功后其他开发者可购买、使用uni原生插件

uni-app原生插件开发

Android平台uni-app原生插件开发文档
 iOS平台uni-app原生插件开发文档

插件开发在调测时，可能会超过40M的免费打包额度。如插件开发是为了上插件市场而不是内部使用，则可以在成功上架市场后，申请退费，返还测试产生的超限打包费用。

uni-app原生插件市场

原生插件开发后，可以上插件市场，也可以不上。如内部使用，则无需上架插件市场。

如需上插件市场，则必须按指定格式压缩为zip包，具体参考：uni-app原生插件格式说明文档

插件下架：插件下降会导致已经使用该插件的app无法再打包，这涉及到插件使用者的利益，所以原则上不允许插件下架。如有特殊原因需要下架请使用注册账号邮箱发邮件到service@dcloud.io进行申请，并详细描述下架原因

插件更新：插件作者需注意保持好版本质量和向下兼容。一旦提交市场新版插件，旧版插件就不能再使用。已经使用旧版插件的App，此后再次云打包，会直接集成新版插件。也就是插件的更新不当可能造成已经使用插件的开发者无法及时发布新版应用。

uni-app原生插件使用

uni-app原生插件使用说明文档
 HBuilderX中使用本地uni-app原生插件提交云端打包
 uni-app原生插件使用常见问题

原生离线打包集成 uni 插件文档

Android平台本地（离线）打包集成 uni-app原生插件
 iOS平台本地（离线）打包集成 uni-app原生插件

欢迎有原生开发能力的朋友入群一起交流学习（入群请提供注册邮箱）：

DCloud原生开发者群：
1群：256775471
2群：814228233
3群：455763866

收起阅读 »

uni-app原生插件使用常见问题

原生插件 uni原生插件

uni-app原生插件使用的条件是什么？

要求HBuilderX1.4.0及以上版本，并且必须是uni-app项目
老版本HBuilder不支持（请迁移到最新版本的HBuilderX），5+APP及Wap2App项目都不支持调用uni-app原生插件。

uni-app原生插件如何支持真机运行？

HBuilderX中自带的默认真机运行基座不包含任何uni-app原生插件，所以不支持直接调用uni-app原生插件。
必须使用自定义基座才能支持真机运行调用uni-app原生插件

uni-app原生插件真机运行提示“using unregistered native plugin 'XXX'”？

默认真机运行的基座中不包含任何原生插件，所以不能调用uni原生插件，必须自定义基座

确定配置了自定义基座，并且勾选了“使用自定义基座”（HBuilderX的菜单"运行"->"运行到手机或模拟器"->"使用自定义基座"）
确定手机上运行的是配置uni-app原生插件后提交生成的自定义基座，可以尝试删除手机上的自定义基座应用，重新真机运行

更多uni-app原生插件文档参考：uni-app原生插件开发指南

继续阅读 »

语法

ifdef：if defined 正向条件，也就是说在 XX 平台下生效。

ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。

endif：条件结束

示例

组件

CSS

JavaScript

pages.json

static

结束

语法

ifdef：if defined 正向条件，也就是说在 XX 平台下生效。

ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。

endif：条件结束

示例

组件

CSS

JavaScript

pages.json

static

结束

本次测试主要参考文档为

具体支持情况见下表(Y表示支持,N表示不支持)

写在后面

本次测试主要参考文档为

具体支持情况见下表(Y表示支持,N表示不支持)

写在后面

新版原生插件开发文档已发布，请移步：https://nativesupport.dcloud.net.cn/

概述

uni原生插件上线步骤

uni-app原生插件开发

uni-app原生插件市场

uni-app原生插件使用

原生离线打包集成 uni 插件文档

欢迎有原生开发能力的朋友入群一起交流学习（入群请提供注册邮箱）：

新版原生插件开发文档已发布，请移步：https://nativesupport.dcloud.net.cn/

概述

uni原生插件上线步骤

uni-app原生插件开发

uni-app原生插件市场

uni-app原生插件使用

原生离线打包集成 uni 插件文档

欢迎有原生开发能力的朋友入群一起交流学习（入群请提供注册邮箱）：

uni-app原生插件使用的条件是什么？

uni-app原生插件如何支持真机运行？

uni-app原生插件真机运行提示“using unregistered native plugin 'XXX'”？

uni-app原生插件使用的条件是什么？

uni-app原生插件如何支持真机运行？

uni-app原生插件真机运行提示“using unregistered native plugin 'XXX'”？

热门文章