`
薇拉Rachel
  • 浏览: 14031 次
文章分类
社区版块
存档分类
最新评论

官方揭秘!同时兼容iOS、Android、微信小程序的UI引擎

阅读更多
在应用开发过程中,一些效果使用纯前端h5实现体验比较差,为此开发者会选择相应的原生UI模块来替代,原生模块性能和体验好,但目前存在的一个问题就是界面可定制性比较差,不能百分百满足需求。为此,结合原生模块的性能和体验以及前端开发的灵活性,APICloud推出了纯翻译模式的UI引擎,并在由APICloud联合极客邦科技举办的“AI时代的移动技术革新”大会上发布了这一新品。 注:纯翻译模式的UI引擎文档查看链接https://docs.apicloud.com/UI-templet/UI-templet-api

纯翻译模式的UI引擎和普通的UI类的模块使用流程一样,将小程序UI组件的路径传入模块方法,模块解析加载后显示出小程序UI页面。目前,APICloud官方(网址:https://www.apicloud.com/)已经在模块Store里面提供了几种常用的小程序UI组件模块,开发者可以直接下载到本地使用,方便修改里面的样式效果。选择小程序的语法,可以让广大熟悉小程序开发的开发者更快上手,快速开发出想要的UI效果。 纯翻译模式的UI引擎具体使用流程如下:

一、添加UITemplate模块

和使用其它模块一样,首先需要在控制台模块里面添加UITemplate模块,如图:

一.png

二、添加小程序UI组件

01小程序包结构及目录介绍

在使用小程序UI模块之前,我们需要了解小程序包的结构,如下图所示,一个小程序包里面有app.json、app.wxss、app.js等文件,可以在这些文件里面做一些全局的配置,一个小程序包里面可以包含多个小程序UI组件,这些UI组件需要在app.json文件中注册配置。更多详情访问微信官方小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html  二1.png 

app.json文件的简单配置:

{
  "pages": [
    "pages/uitalertview/alertview",
    "pages/uitconfirmview/confirmview"
  ]
}

而一个小程序UI页面由四个文件组成,它们的文件名相同,只是扩展名不一样。  二1.1.png 



02添加小程序UI组件

开发者可以自己开发小程序UI模块,也可以直接去模块Store里面找到官方提供的小程序UI模块,下载到本地,将其放置到代码包里面对应的目录下使用。  二2.png 

03运行小程序UI模块

这里我们以在自定义loader中使用为例,添加好UITemplate模块,然后编译自定义loader,下载安装到手机。

在页面中调用UITemplate模块的初始化方法,传入小程序包所在的根目录:

function apiready() {
    var UITemplate = api.require('UITemplate');
    var path = 'widget://uitemplate';
    UITemplate.init({
        path: path
    });
}

使用openView方法显示小程序UI组件:

var UITemplate = api.require("UITemplate");
UITemplate.openView({
    name: 'confirm',
    url: 'pages/uitconfirmview/confirmview',
    rect: {
        x: 0,
        y: 0,
        h: 'auto',
        w: 'auto'
    },
    level: 'alert',
    data: {
        pageParam: {
            title: { content: 'APICloud 温馨提示' },
            msg: { content: '账户余额不足,红包功能无法使用!' },
            buttons: [{ content: '返回', style: 'color: #000;' },{ content: '充值' }]
        }
    }
},function(ret,err){
    if(ret && 'buttonClick' == ret.type ){
        UITemplate.closeView({name: 'confirm'});

        // 此处可填写回调代码逻辑
        var index = ret.buttonIndex;
    }
});

    // 此处可填写回调代码逻辑
    var index = ret.buttonIndex;
}
}); 特别说明:目前该模块引擎在Android端还不适配,预计在1月15日前可完成适配,欢迎大家体验!
分享到:
评论

相关推荐

    微信小程序 android和ios端实现蓝牙官播数据发送

    微信小程序在Android和iOS端实现蓝牙广播数据发送是一项技术挑战,因为这两个平台的蓝牙API有其独特性。本文将深入探讨如何在微信小程序环境中,针对Android和iOS平台,有效地发送自定义蓝牙广播数据,以及这一技术...

    一个taro适配Android、iOS、微信小程序、H5最佳实践项目的脚手架

    taro适配Android、iOS、微信小程序、H5最佳实践,主要涉及到了基础网络请求的封装、适配了多端的SafeArea安全区域、style工具样式引用替换scss的繁琐写法大幅度简化代码,同时解决了scss样式无法通过className进行属性...

    uniapp商城项目,可同时生成app,微信小程序,h5等多端,兼容android,ios、微信小程序、h5

    * 兼容android,ios、微信小程序、h5 * 已完成页面:首页、分类页、购物车页、发现页、我的页、评论(列表页、新增页、追评页、评价物流页、详情页)、地址(列表页、新增暨修改页、国家地区选择页)、设置、商品...

    android\ios项目用微信小程序蓝牙

    通过以上知识点,我们可以看到,"android\ios项目用微信小程序蓝牙"实现了跨平台的蓝牙通信,简化了开发流程,提升了用户体验,同时在兼容性、安全性方面做了考虑。对于希望构建类似功能的开发者来说,这是一个很好...

    佳博标签打印机Demo(Android,iOS,微信小程序,C#,Java),指令集包含(tspl、cpcl、esc等)

    佳博标签打印机是一款广泛应用于商业、工业以及个人领域的设备,其Demo提供了全面的开发支持,涵盖了Android、iOS、微信小程序以及C#、Java等多种平台。本文将深入探讨这些知识点,帮助开发者更好地理解和利用该...

    微信小程序嵌入H5页面播放监控webrtc视频流1~2秒画面延迟,安卓和ios都兼容

    在微信小程序中嵌入H5页面来播放监控视频流,特别是使用WebRTC技术,可能会遇到1到2秒的画面延迟问题,而这个问题需要针对iOS和Android两大操作系统进行优化以实现良好的兼容性。以下将详细探讨这一主题,以及如何...

    (微信小程序毕业设计)iOS计算器(源码+截图).zip

    (微信小程序毕业设计)iOS计算器(源码+截图)(微信小程序毕业设计)iOS计算器(源码+截图)(微信小程序毕业设计)iOS计算器(源码+截图)(微信小程序毕业设计)iOS计算器(源码+截图)(微信小程序毕业设计)iOS计算器(源码+截图)...

    2018年最新的微信小程序-IOS系统中 源码

    通过这个工具,你可以实时查看小程序在不同版本的iOS设备上的表现,确保兼容性。 接下来,源码是程序的基础。在提供的"微信小程序-IOS系统源码"中,包含了小程序的各种页面、样式、逻辑处理和数据管理。源码通常...

    微信小程序 小工具类 iOS计算器 (源代码+截图)

    微信小程序 小工具类 iOS计算器 (源代码+截图)微信小程序 小工具类 iOS计算器 (源代码+截图)微信小程序 小工具类 iOS计算器 (源代码+截图)微信小程序 小工具类 iOS计算器 (源代码+截图)微信小程序 小工具类 ...

    微信小程序源码-iOS计算器.zip

    微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信...

    【微信小程序毕业设计期末大作业】iOS计算器-小程序项目源码.zip

    微信小程序项目源码毕业设计期末大作业课程设计前端源码 微信小程序项目源码毕业设计期末大作业课程设计前端源码 微信小程序项目源码毕业设计期末大作业课程设计前端源码 微信小程序项目源码毕业设计期末大作业课程...

    android 分享微信小程序+压缩图片优化

    在Android开发中,微信分享是常见的社交功能,其中包括分享微信小程序、图片到微信朋友圈或微信好友。本教程将深入探讨如何实现这一功能,并特别关注图片压缩优化,以确保分享过程的顺利进行。 首先,我们需要集成...

    佳博蓝牙打印机开发资料包含android,ios微信小程序示例demo

    佳博蓝牙打印机是一款适用于移动设备的蓝牙打印解决方案,它能够帮助开发者轻松地在Android、iOS以及微信小程序等平台上实现无线打印功能。这份开发资料包含了针对这些平台的具体示例和代码,便于开发者快速理解和...

    iOSAPP跳转微信小程序Demo

    iOSAPP跳转微信小程序的Demo,仅用于演示作用,集成细节在博客中有详细介绍,可移驾这里:https://blog.csdn.net/fuzheng0301/article/details/100036332

    微信小程序实现iOS计算器weapp-calculator-master.zip

    "微信小程序实现iOS计算器weapp-calculator-master.zip" 是一个包含源代码的压缩包,用于教授如何使用微信小程序开发一个类似于iOS系统自带的计算器应用。 这个项目的核心知识点包括: 1. **微信小程序基础结构**...

    微信小程序再推iOS虚拟支付整改方案,开发者该怎么办?

    你好,基于微信小程序平台运营规范,开发者在iOS系统上提供的虚拟物品不能展现任何购买、支付的功能、页面、按钮,即使实际上它们都不可使用;也不得引导至外部网页或APP来实现支付功能。 请尽快排查当前小程序是否...

    Hbuilder简单的微信小程序项目 view ui 2.0框架 uniapp

    4. **uniAPP**:uniAPP是由DCloud推出的跨端开发框架,基于Vue.js,支持开发者使用一套代码编写,发布到iOS、Android、Web(H5)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手等)。uniAPP通过抽象各端特性,...

    微信小程序(android ios)

    4. **跨平台开发**:由于微信小程序需要兼容Android和iOS两大平台,开发者需要了解不同平台可能存在的差异,确保小程序在各个平台上的表现一致。 5. **安全与权限管理**:在集成硬件设备时,需要注意用户隐私和数据...

    iOS计算器微信小程序毕业设计

    iOS计算器.zip 很可能指的是一个微信小程序的开发包,其中包含了实现一个类似于iOS原生计算器功能的小程序源代码。这个开发包通常以压缩文件(.zip格式)的形式提供,方便开发者下载和解压后直接进行开发或学习。 ...

    微信小程序项目实例——体质计算器

    对于iOS app开发者,虽然微信小程序不直接运行在iOS设备上,但可以通过微信应用在iOS设备上无缝体验。开发者也可以考虑将微信小程序作为原生应用的补充,为用户提供多渠道的访问方式。 总的来说,这个体质计算器...

Global site tag (gtag.js) - Google Analytics