HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

贡献一个知识点,文档里肯定不会告诉你的东西

where查询和聚合不能一起用。

比如:想连表查询的话只能用match+lookup。

至于为什么,应该是国家机密吧。毕竟连where和聚合不能一起用都要保密。。。这天气真是热了

so,鉴于聚合是民生刚需,所以请大家奔走相告,早用match早超生。

where查询和聚合不能一起用。

比如:想连表查询的话只能用match+lookup。

至于为什么,应该是国家机密吧。毕竟连where和聚合不能一起用都要保密。。。这天气真是热了

so,鉴于聚合是民生刚需,所以请大家奔走相告,早用match早超生。

tailwind.css 对于小程序按钮样式的影响

微信小程序
/* 罪魁祸首 */  
/**  
 * Correct the inability to style clickable types in iOS and Safari.  
 */  
button,  
[type="button"],  
[type="reset"],  
[type="submit"] {  
  -webkit-appearance: button;  
}  
/** 解决方案 */  
button, [type="button"], [type="reset"], [type="submit"] {  
    -moz-appearance: none;  
    -webkit-appearance: none;  
}  

tailwind.css 对于小程序按钮样式的影响,前两天发现小程序按钮的默认样式一直去不掉,今天才发现是因为 tailwind.css 导致的。 他有一段上面那样的 css 采用了系统自定义的按钮样式导致你怎么覆盖 button::after 都没有用

》》》》 原文地址
》》》》 demo代码

崮生的 uni-app 最佳实践

继续阅读 »
/* 罪魁祸首 */  
/**  
 * Correct the inability to style clickable types in iOS and Safari.  
 */  
button,  
[type="button"],  
[type="reset"],  
[type="submit"] {  
  -webkit-appearance: button;  
}  
/** 解决方案 */  
button, [type="button"], [type="reset"], [type="submit"] {  
    -moz-appearance: none;  
    -webkit-appearance: none;  
}  

tailwind.css 对于小程序按钮样式的影响,前两天发现小程序按钮的默认样式一直去不掉,今天才发现是因为 tailwind.css 导致的。 他有一段上面那样的 css 采用了系统自定义的按钮样式导致你怎么覆盖 button::after 都没有用

》》》》 原文地址
》》》》 demo代码

崮生的 uni-app 最佳实践

收起阅读 »

基于uni-app的高颜值极速记账小程序

微信小程序

【项目背景】

日常生活中,多少都会有记账的需求。(今天请客花了多少钱?今天工资收了多少?....本月有几张信用卡要还?还款日期、还款金额分别是多少?...)
通常的记账软件,80%都要求下载APP,并且操作较为繁琐。

故开发此小程序,名曰“小熙记账”。熙通“禧”,意为:幸福;吉祥。

记一笔收入,买一份礼物,给自己一个小确幸。

【开发背景】基于uni-app,用最优雅的代码敏捷开发

【产品目标】行云流水般的极速记账体验

【功能列表】

1、极速记账:三秒记账,打完收枪

2、收支统计:按月查统计图

3、多账户管理:储蓄账户、信用账户、其他账户,支持账户之间转账

4、流水查询:查看所有记账流水

5、账目总览:累计、当月收支情况,还款任务列表,近三月大额支出

【产品截图】

【即刻体验】

继续阅读 »

【项目背景】

日常生活中,多少都会有记账的需求。(今天请客花了多少钱?今天工资收了多少?....本月有几张信用卡要还?还款日期、还款金额分别是多少?...)
通常的记账软件,80%都要求下载APP,并且操作较为繁琐。

故开发此小程序,名曰“小熙记账”。熙通“禧”,意为:幸福;吉祥。

记一笔收入,买一份礼物,给自己一个小确幸。

【开发背景】基于uni-app,用最优雅的代码敏捷开发

【产品目标】行云流水般的极速记账体验

【功能列表】

1、极速记账:三秒记账,打完收枪

2、收支统计:按月查统计图

3、多账户管理:储蓄账户、信用账户、其他账户,支持账户之间转账

4、流水查询:查看所有记账流水

5、账目总览:累计、当月收支情况,还款任务列表,近三月大额支出

【产品截图】

【即刻体验】

收起阅读 »

图片并排排版、src中使用js等小代码

调用系统相册中图片js:
<script language="javascript">
document.getElementById('img_ho').src = plus.io.resolveLocalFileSystemURL("_www/hengping.jpg");
document.getElementById('img_vo').src = plus.io.resolveLocalFileSystemURL("_www/shuping.jpg");
</script>

并排显示在页面上:

 <table><tr>                                                      
        <td><a href="vo.html" target="_parent" title="点击获取"><img id="img_vo" src="?" onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>                                                                                                  
        <td><a href="ho.html" target="_parent" title="点击获取"><img id="img_ho" src="?"  onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>     
</tr></table>
继续阅读 »

调用系统相册中图片js:
<script language="javascript">
document.getElementById('img_ho').src = plus.io.resolveLocalFileSystemURL("_www/hengping.jpg");
document.getElementById('img_vo').src = plus.io.resolveLocalFileSystemURL("_www/shuping.jpg");
</script>

并排显示在页面上:

 <table><tr>                                                      
        <td><a href="vo.html" target="_parent" title="点击获取"><img id="img_vo" src="?" onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>                                                                                                  
        <td><a href="ho.html" target="_parent" title="点击获取"><img id="img_ho" src="?"  onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>     
</tr></table>
收起阅读 »

js_to_APP手机不能下载base格式图片的处理

js在pc端正常下载base图片,使用HBuilder生成APP后下载失败,原因是手机浏览器不能直接下载base64位图片的文件,使用plus进行直接转存,代码如下:
image对象为base64对象,调用方法为 saveBasePic(base,"ceshi.jpg"),切记在使用HB生成APP时注意在配置文件中修改runmode为liberate模式,normal测试是有问题的。
"runmode" : "liberate", /应用的首次启动运行模式,可取liberate或normal,liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)/

function saveBasePic (image,imageName){           
        var b = new plus.nativeObj.Bitmap();  
        var path = plus.io.convertLocalFileSystemURL("_www/"+imageName);//将文件短路径转换成本地完整路径   
        alert(path);  
        b.loadBase64Data(image,function(){  
            //alert("创建成功");  
            b.save("_www/"+imageName,{overwrite:true},function(){  
                //console.log("保存成功");  
                plus.gallery.save("_www/"+imageName, function () {  
                    alert( "保存图片到相册成功" );  
                    event_b(true,path);  
                },function(){  
                    alert( "保存图片到相册失败" );  
                    event_b(false,path);  
                });                   
            },function(){  
                alert("保存图片失败!");  
                event_b(false,path);  
            });               
        },function(){  
            alert("写入文件失败,确认APP是否具有权限!");  
            event_b(false,path);  
        });  
}     
继续阅读 »

js在pc端正常下载base图片,使用HBuilder生成APP后下载失败,原因是手机浏览器不能直接下载base64位图片的文件,使用plus进行直接转存,代码如下:
image对象为base64对象,调用方法为 saveBasePic(base,"ceshi.jpg"),切记在使用HB生成APP时注意在配置文件中修改runmode为liberate模式,normal测试是有问题的。
"runmode" : "liberate", /应用的首次启动运行模式,可取liberate或normal,liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)/

function saveBasePic (image,imageName){           
        var b = new plus.nativeObj.Bitmap();  
        var path = plus.io.convertLocalFileSystemURL("_www/"+imageName);//将文件短路径转换成本地完整路径   
        alert(path);  
        b.loadBase64Data(image,function(){  
            //alert("创建成功");  
            b.save("_www/"+imageName,{overwrite:true},function(){  
                //console.log("保存成功");  
                plus.gallery.save("_www/"+imageName, function () {  
                    alert( "保存图片到相册成功" );  
                    event_b(true,path);  
                },function(){  
                    alert( "保存图片到相册失败" );  
                    event_b(false,path);  
                });                   
            },function(){  
                alert("保存图片失败!");  
                event_b(false,path);  
            });               
        },function(){  
            alert("写入文件失败,确认APP是否具有权限!");  
            event_b(false,path);  
        });  
}     
收起阅读 »

uniapp数字键盘

uniapp

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下/digitKeyboard/digitKeyboard.vue文件拷贝到自己项目目录下

2.插件全局配置

  • 在项目里main.js中配置如下代码
import digitKeyboard from './components/digitKeyboard/digitKeyboard.vue'  

Vue.component('digitKeyboard', digitKeyboard)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <!-- 数字键盘 -->  
        <digitKeyboard v-if="isShowKeyboardWindow" :inputVal="inputVal" :label="label" @cancel="isShowKeyboardWindow = false" @confirm="keyboardConfirm"/>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                inputVal:'1',  
                label:'现金支付',  
                isShowKeyboardWindow:true,//是否显示键盘窗口  
            };  
        },  
        methods:{  
            keyboardConfirm(val){  
                console.log(val)  
                uni.showToast({  
                    title:'当前输入的值:'+val,  
                    icon:'none',  
                    duration:4000  
                })  
            }  
        }  
    }  
</script>  
<style lang="less">  

</style>  
兼容性

uni-app项目中使用都兼容

继续阅读 »

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下/digitKeyboard/digitKeyboard.vue文件拷贝到自己项目目录下

2.插件全局配置

  • 在项目里main.js中配置如下代码
import digitKeyboard from './components/digitKeyboard/digitKeyboard.vue'  

Vue.component('digitKeyboard', digitKeyboard)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <!-- 数字键盘 -->  
        <digitKeyboard v-if="isShowKeyboardWindow" :inputVal="inputVal" :label="label" @cancel="isShowKeyboardWindow = false" @confirm="keyboardConfirm"/>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                inputVal:'1',  
                label:'现金支付',  
                isShowKeyboardWindow:true,//是否显示键盘窗口  
            };  
        },  
        methods:{  
            keyboardConfirm(val){  
                console.log(val)  
                uni.showToast({  
                    title:'当前输入的值:'+val,  
                    icon:'none',  
                    duration:4000  
                })  
            }  
        }  
    }  
</script>  
<style lang="less">  

</style>  
兼容性

uni-app项目中使用都兼容

收起阅读 »

uni-app编译为小程序的时候报,v-slot 不支持动态插槽名

uni-app编译为小程序的时候报,v-slot 不支持动态插槽名,我记得我写微信小程序的时候slot是支持slot动态切换的呀?h5下正常

uni-app编译为小程序的时候报,v-slot 不支持动态插槽名,我记得我写微信小程序的时候slot是支持slot动态切换的呀?h5下正常

图片添加文字水印-安卓

NJS
export function addWatermark(tempFilePath, gText) {  
        let Resources = plus.android.importClass('android.content.res.Resources')  
    let Bitmap = plus.android.importClass('android.graphics.Bitmap')  
    let BitmapFactory = plus.android.importClass('android.graphics.BitmapFactory')  
    let Canvas = plus.android.importClass('android.graphics.Canvas')  
    let Paint = plus.android.importClass('android.graphics.Paint')  
    let Color = plus.android.importClass('android.graphics.Color')  
    let TextPaint = plus.android.importClass('android.text.TextPaint')  
    let Layout = plus.android.importClass('android.text.Layout')  
    let StaticLayout = plus.android.importClass('android.text.StaticLayout')  
    let BufferedOutputStream = plus.android.importClass('java.io.BufferedOutputStream')  
    let File = plus.android.importClass('java.io.File')  
    let FileOutputStream = plus.android.importClass('java.io.FileOutputStream')  

    let filePath = plus.io.convertLocalFileSystemURL(tempFilePath)  
    let options = new BitmapFactory.Options()  
    options.inPreferredConfig = Bitmap.Config.ARGB_8888;  
    let bitmap = BitmapFactory.decodeFile(filePath, options);  

    // 画图  
    let main =  plus.android.runtimeMainActivity()  
    let application = main.getApplication()  
    let resources =  application.getResources()  
    let displayMetrics = resources.getDisplayMetrics()  
    let scale =  plus.android.getAttribute(displayMetrics, 'density' )   
    let bitmapConfig = bitmap.getConfig();  
    bitmapConfig = Bitmap.Config.ARGB_8888;  
    bitmap = bitmap.copy(bitmapConfig, true);  
    let canvas = new Canvas(bitmap);  
    let paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);  
    // 设置颜色  
    paint.setColor(Color.WHITE);  
    paint.setTextSize((16 * scale));  
    paint.setShadowLayer(1, 0, 1, Color.WHITE);  
    let textWidth = canvas.getWidth() - (16 * scale);  
    // text-align: ALIGN_NORMAL,ALIGN_OPPOSITE,ALIGN_CENTER,ALIGN_LEFT,ALIGN_RIGHT;  
    let textLayout = new StaticLayout(  
        gText, paint, textWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, false);  
    let textHeight = textLayout.getHeight();  
    canvas.save();  
    // 计算画的位置  
    canvas.translate(0, canvas.getHeight() - textHeight);  
    textLayout.draw(canvas);  
    canvas.restore();  
    let file = new File(filePath);  
    let bos = new BufferedOutputStream(new FileOutputStream(file));  
    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, bos);  
    bos.flush();  
    bos.close();  
}  

叠加地址和日期 使用\n可以折行,叠加位置可以自己计算

        addWaterMark(tempFilePath) {  
            return new Promise((resolve, reject) => {  
                uni.getLocation({  
                    geocode: true,  
                    success: ({ address: { city, district, street, streetNum, poiName } }) => {  
                        const address = city + district + street + streetNum + poiName  
                        const date = dayjs().format('YYYY-MM-DD HH:mm')  
                        addWatermark(tempFilePath, `${address}\n${date}`)  
                        resolve(tempFilePath)  
                    }  
                })  
            })  
        }

继续阅读 »
export function addWatermark(tempFilePath, gText) {  
        let Resources = plus.android.importClass('android.content.res.Resources')  
    let Bitmap = plus.android.importClass('android.graphics.Bitmap')  
    let BitmapFactory = plus.android.importClass('android.graphics.BitmapFactory')  
    let Canvas = plus.android.importClass('android.graphics.Canvas')  
    let Paint = plus.android.importClass('android.graphics.Paint')  
    let Color = plus.android.importClass('android.graphics.Color')  
    let TextPaint = plus.android.importClass('android.text.TextPaint')  
    let Layout = plus.android.importClass('android.text.Layout')  
    let StaticLayout = plus.android.importClass('android.text.StaticLayout')  
    let BufferedOutputStream = plus.android.importClass('java.io.BufferedOutputStream')  
    let File = plus.android.importClass('java.io.File')  
    let FileOutputStream = plus.android.importClass('java.io.FileOutputStream')  

    let filePath = plus.io.convertLocalFileSystemURL(tempFilePath)  
    let options = new BitmapFactory.Options()  
    options.inPreferredConfig = Bitmap.Config.ARGB_8888;  
    let bitmap = BitmapFactory.decodeFile(filePath, options);  

    // 画图  
    let main =  plus.android.runtimeMainActivity()  
    let application = main.getApplication()  
    let resources =  application.getResources()  
    let displayMetrics = resources.getDisplayMetrics()  
    let scale =  plus.android.getAttribute(displayMetrics, 'density' )   
    let bitmapConfig = bitmap.getConfig();  
    bitmapConfig = Bitmap.Config.ARGB_8888;  
    bitmap = bitmap.copy(bitmapConfig, true);  
    let canvas = new Canvas(bitmap);  
    let paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);  
    // 设置颜色  
    paint.setColor(Color.WHITE);  
    paint.setTextSize((16 * scale));  
    paint.setShadowLayer(1, 0, 1, Color.WHITE);  
    let textWidth = canvas.getWidth() - (16 * scale);  
    // text-align: ALIGN_NORMAL,ALIGN_OPPOSITE,ALIGN_CENTER,ALIGN_LEFT,ALIGN_RIGHT;  
    let textLayout = new StaticLayout(  
        gText, paint, textWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, false);  
    let textHeight = textLayout.getHeight();  
    canvas.save();  
    // 计算画的位置  
    canvas.translate(0, canvas.getHeight() - textHeight);  
    textLayout.draw(canvas);  
    canvas.restore();  
    let file = new File(filePath);  
    let bos = new BufferedOutputStream(new FileOutputStream(file));  
    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, bos);  
    bos.flush();  
    bos.close();  
}  

叠加地址和日期 使用\n可以折行,叠加位置可以自己计算

        addWaterMark(tempFilePath) {  
            return new Promise((resolve, reject) => {  
                uni.getLocation({  
                    geocode: true,  
                    success: ({ address: { city, district, street, streetNum, poiName } }) => {  
                        const address = city + district + street + streetNum + poiName  
                        const date = dayjs().format('YYYY-MM-DD HH:mm')  
                        addWatermark(tempFilePath, `${address}\n${date}`)  
                        resolve(tempFilePath)  
                    }  
                })  
            })  
        }

收起阅读 »

iOS开发者账号到期续费流程(2020)

iOS iOS打包

iOS开发者账号在到期的前一个月即可续费,如果到期没有续费APP将会下架,在App Store无法搜索

1、登录苹果开发者中心

有这个红色提示说明该续费了

会要求先到Apple Developer这个应用验证下资料才能进入续费页面。

2、在苹果手机App Store搜索Apple Developer并安装上(需要iOS12.4系统以上,不然搜不到这个app)

3、登录苹果账号填写相资料验证(先到手机设置那边登录开发者账号)

3、输入申请人姓名、身份证号、电话(中文输入)

人脸识别,拍个自拍照

4、验证好了资料返回苹果开发者中心

点击红色处,进入付款页面。

输入visa信用卡信息及地址信息!

确认付款提示下图,即完成了付款!

iOS上架辅助工具分享推荐

Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,最方便在Windows开发上架没有苹果Mac电脑的开发者!

继续阅读 »

iOS开发者账号在到期的前一个月即可续费,如果到期没有续费APP将会下架,在App Store无法搜索

1、登录苹果开发者中心

有这个红色提示说明该续费了

会要求先到Apple Developer这个应用验证下资料才能进入续费页面。

2、在苹果手机App Store搜索Apple Developer并安装上(需要iOS12.4系统以上,不然搜不到这个app)

3、登录苹果账号填写相资料验证(先到手机设置那边登录开发者账号)

3、输入申请人姓名、身份证号、电话(中文输入)

人脸识别,拍个自拍照

4、验证好了资料返回苹果开发者中心

点击红色处,进入付款页面。

输入visa信用卡信息及地址信息!

确认付款提示下图,即完成了付款!

iOS上架辅助工具分享推荐

Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,最方便在Windows开发上架没有苹果Mac电脑的开发者!

收起阅读 »

团队开发uni-app,定制开发APP项目

App uniapp 5+App开发

团队开发uni-app,定制开发APP项目
团队2012年成立,专业开发APP定制开发项目、开发流程和所需内容
1.需求确认;

  1. UI设计图确认
  2. 前端切图代码
  3. 后台搭建
  4. 测试
  5. 上线前测试
  6. 填充内容
  7. 准备上线
    壹伍8③②11五零99
继续阅读 »

团队开发uni-app,定制开发APP项目
团队2012年成立,专业开发APP定制开发项目、开发流程和所需内容
1.需求确认;

  1. UI设计图确认
  2. 前端切图代码
  3. 后台搭建
  4. 测试
  5. 上线前测试
  6. 填充内容
  7. 准备上线
    壹伍8③②11五零99
收起阅读 »

团队开发APP定制开发、蓝牙称对接APP开发、硬件对接

5+App开发 uniapp App 移动APP

app定制开发、对接APP定制开发、团队开发、小团队定制开发
1.域名、服务器购买,域名ICP备案

  1. 需求沟通,确认工期和报价;
  2. UI设计图确认
  3. 前端切图代码编写
  4. 后台搭建
  5. 上线前测试
  6. 填充内容
  7. 完成上线
    壹伍⑧3二①150九玖
继续阅读 »

app定制开发、对接APP定制开发、团队开发、小团队定制开发
1.域名、服务器购买,域名ICP备案

  1. 需求沟通,确认工期和报价;
  2. UI设计图确认
  3. 前端切图代码编写
  4. 后台搭建
  5. 上线前测试
  6. 填充内容
  7. 完成上线
    壹伍⑧3二①150九玖
收起阅读 »

uni-app支持快应用-webview版,欢迎体验

vivo 华为 小程序 快应用

快应用是基于手机硬件平台的新型应用形态,标准由国内主流手机厂商联合制定。

快应用可以认为是手机硬件厂商的小程序,但和微信、支付宝等小程序又有较大不同:

  • 微信、支付宝、百度、字节跳动等各家小程序架构设计接近,开发规范接近,都是基于webview渲染,布局方式一致,开发者开发不同小程序时,学习成本较低,且可借助跨端框架或转换器快速实现多平台发行。
  • 快应用是单独的架构设计,单独的开发规范,基于 Native 原生渲染(相比web,布局上有更多限制),有额外的学习成本,且项目代码不易与 Web、小程序等相互复用

这些差异,严重制约了快应用生态的发展,参与的开发者少,提交的快应用的数量也很少,不过几千款,与微信的百万级应用数差距很大。

为此,vivo、华为等厂积极探索,推出快应用(webview 版)(为叙述方便,下文统称为「快应用」),它同小程序一样,采取 Webview 渲染方式,使得开发者没有额外学习成本(有 Web、小程序开发经验即可),能够使用 Web 上各种能力,同时令用户有良好应用访问体验。

uni-app在第一时间跟进了快应用新引擎适配,目前已在 uni-app 的 vue-cli 版中,和HBuilderX 2.7.12+版本,发布了对快应用-webview版的适配。

创建项目

  1. 在HBuilderX 2.7.12+中新建uni-app项目,可以直接运行到快应用。需先按照快应用的开发工具,分快应用联盟版和快应用华为版,需要分别安装。

  2. cli方式创建项目

# npm script  
# 全局安装vue-cli  
$ npm install -g @vue/cli  
# 创建uni-app项目,会提示选择项目模板,初次接触建议选择 hello uni-app 模板  
$ vue create -p dcloudio/uni-preset-vue#alpha my-project  
# 进入项目目录  
$ cd my-project
# dev 模式,编译预览/联盟(仅vivo oppo支持)  
$ npm run dev:quickapp-webview-union  
# build 模式,发行打包  
$ npm run build:quickapp-webview-union
# dev 模式,编译预览/华为  
$ npm run dev:quickapp-webview-huawei  
# build 模式,发行打包  
$ npm run build:quickapp-webview-huawei

编译目录为: dist\(dev|build)\quickapp-webview-union

预览测试

  1. 下载开发者工具

  2. 启动开发者工具,打开编译后的项目目录:dist\(dev|build)\quickapp-webview

  3. 在pc模拟器上,可直接看到开发效果。

  4. 手机真机预览方式:将手机与电脑成功连接,并打开“开发者调试”模式。点击顶部菜单的运行按钮,开发者工具会通过USB自动安装调试 apk 到手机上,并自动启动基座进行测试

发布

vivo
https://dev.vivo.com.cn/distribute/quickApp

华为
https://developer.huawei.com/consumer/cn/console

manifest.json 配置

// vivo / oppo  
"quickapp-webview-union": {  
    "icon": "/static/logo.png",  
    "package": "com.example.demo",  
    "minPlatformVersion": 1062, //最小平台支持 vivo/oppo >= 1062  
    "versionName": "1.0.0",  
    "versionCode": 1,  
},  
// 华为  
"quickapp-webview-huawei" : {  
    "icon" : "/static/logo.png",  
    "package" : "com.example.demo",  
    "minPlatformVersion" : 1070,//最小平台支持 >= 1070  
    "versionName" : "1.0.0",  
    "versionCode" : 1  
}

sign 证书配置

sign放到项目根目录,编译后自动拷贝到 .quickapp/sign,每次编译完成时会删除.quickapp,避免证书丢失

快应用平台文档(平台独有api使用条件编译调用)

华为:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-frame-overview
vivo/oppo:https://qapp-chimera.vivo.com.cn/framework/index.html

欢迎共研

所有快应用适配代码,均已开源在github,欢迎star鼓励!也欢迎加入QQ群交流:148203425。

如果你对原生渲染的快应用适配感兴趣,也欢迎参与社区共研,详见 https://ask.dcloud.net.cn/article/37145

继续阅读 »

快应用是基于手机硬件平台的新型应用形态,标准由国内主流手机厂商联合制定。

快应用可以认为是手机硬件厂商的小程序,但和微信、支付宝等小程序又有较大不同:

  • 微信、支付宝、百度、字节跳动等各家小程序架构设计接近,开发规范接近,都是基于webview渲染,布局方式一致,开发者开发不同小程序时,学习成本较低,且可借助跨端框架或转换器快速实现多平台发行。
  • 快应用是单独的架构设计,单独的开发规范,基于 Native 原生渲染(相比web,布局上有更多限制),有额外的学习成本,且项目代码不易与 Web、小程序等相互复用

这些差异,严重制约了快应用生态的发展,参与的开发者少,提交的快应用的数量也很少,不过几千款,与微信的百万级应用数差距很大。

为此,vivo、华为等厂积极探索,推出快应用(webview 版)(为叙述方便,下文统称为「快应用」),它同小程序一样,采取 Webview 渲染方式,使得开发者没有额外学习成本(有 Web、小程序开发经验即可),能够使用 Web 上各种能力,同时令用户有良好应用访问体验。

uni-app在第一时间跟进了快应用新引擎适配,目前已在 uni-app 的 vue-cli 版中,和HBuilderX 2.7.12+版本,发布了对快应用-webview版的适配。

创建项目

  1. 在HBuilderX 2.7.12+中新建uni-app项目,可以直接运行到快应用。需先按照快应用的开发工具,分快应用联盟版和快应用华为版,需要分别安装。

  2. cli方式创建项目

# npm script  
# 全局安装vue-cli  
$ npm install -g @vue/cli  
# 创建uni-app项目,会提示选择项目模板,初次接触建议选择 hello uni-app 模板  
$ vue create -p dcloudio/uni-preset-vue#alpha my-project  
# 进入项目目录  
$ cd my-project
# dev 模式,编译预览/联盟(仅vivo oppo支持)  
$ npm run dev:quickapp-webview-union  
# build 模式,发行打包  
$ npm run build:quickapp-webview-union
# dev 模式,编译预览/华为  
$ npm run dev:quickapp-webview-huawei  
# build 模式,发行打包  
$ npm run build:quickapp-webview-huawei

编译目录为: dist\(dev|build)\quickapp-webview-union

预览测试

  1. 下载开发者工具

  2. 启动开发者工具,打开编译后的项目目录:dist\(dev|build)\quickapp-webview

  3. 在pc模拟器上,可直接看到开发效果。

  4. 手机真机预览方式:将手机与电脑成功连接,并打开“开发者调试”模式。点击顶部菜单的运行按钮,开发者工具会通过USB自动安装调试 apk 到手机上,并自动启动基座进行测试

发布

vivo
https://dev.vivo.com.cn/distribute/quickApp

华为
https://developer.huawei.com/consumer/cn/console

manifest.json 配置

// vivo / oppo  
"quickapp-webview-union": {  
    "icon": "/static/logo.png",  
    "package": "com.example.demo",  
    "minPlatformVersion": 1062, //最小平台支持 vivo/oppo >= 1062  
    "versionName": "1.0.0",  
    "versionCode": 1,  
},  
// 华为  
"quickapp-webview-huawei" : {  
    "icon" : "/static/logo.png",  
    "package" : "com.example.demo",  
    "minPlatformVersion" : 1070,//最小平台支持 >= 1070  
    "versionName" : "1.0.0",  
    "versionCode" : 1  
}

sign 证书配置

sign放到项目根目录,编译后自动拷贝到 .quickapp/sign,每次编译完成时会删除.quickapp,避免证书丢失

快应用平台文档(平台独有api使用条件编译调用)

华为:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-frame-overview
vivo/oppo:https://qapp-chimera.vivo.com.cn/framework/index.html

欢迎共研

所有快应用适配代码,均已开源在github,欢迎star鼓励!也欢迎加入QQ群交流:148203425。

如果你对原生渲染的快应用适配感兴趣,也欢迎参与社区共研,详见 https://ask.dcloud.net.cn/article/37145

收起阅读 »