官方揭秘!同时兼容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模块,如图:

二、添加小程序UI组件

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

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

app.json文件的简单配置:

{

"pages": [

"pages/uitalertview/alertview",

"pages/uitconfirmview/confirmview"

]

}

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

02添加小程序UI组件

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

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;

}

});

特别说明:目前该模块引擎在Android端还不适配,预计在1月15日前可完成适配,欢迎大家体验!

原文地址:https://www.cnblogs.com/apicloud/p/8278617.html

时间: 2024-09-29 15:57:18

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

SAP BSP, Java Web Project,Android和微信小程序的初始页面设置

CRM Webclient UI Component controller的context DO_INIT_CONTEXT: 然后是Window controller的DO_INIT_CONTEXT: 最后才是view controller的DO_INIT_CONTEXT: Android 微信小程序 (1) onLoad 生命周期函数--监听页面加载 (2) onReady 生命周期函数--监听页面初次渲染完成 (3) onShow 生命周期函数--监听页面显示 (4) onHide 生命周期

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

新手入门:微信小程序--从入门到精通宝典

<ignore_js_op> 作为新手入门的宝典,我们整理了本论坛各种有价值的内容,并按循序渐进的方式呈现给大家.大家可以按顺序一篇一篇的攻克本帖中的内容,也可以作为字典,跳转至关注的内容去学习.希望大家在这里能快速成长,成为微信小程序开发的顶尖高手. 本帖的内容结构如下:一:小程序之张小龙全面阐述及思维导图:二:微信小程序官方地址三:如何学习微信小程序四:新手入门系列教程集合五:公司开发前必读六:个人开发前必读 一:小程序之张小龙全面阐述及思维导图: 小程序之张小龙全面阐述:于1月9日上线(

小记一笔 -微信小程序开发随笔

序言: 今年的01月09号备受关注的微信小程序正式上线了, 众多的互联网企业也相继发布了自家的小程序.趁着最近上班不是特别忙,自己闲来无事也跟着捣鼓捣鼓了一个个人记帐用的小程序:小记一笔.用户可以方便.快捷的将自己平时的开销与收入记录下来,还有各种类型的统计,以便实时的准确掌握自己的财务状况.目前此程序已正式上线,大家可以在微信中搜索"小记一笔"点击使用,下面是其中几张效果截图:      准备工作: 1.要开发微信小程序,首先得有工具,可以先去微信公众平台官网(https://mp.

微信小程序怎么做,找木鱼小铺省时省力

越来越多的商家都想在咨询微信小程序怎么做,下面就和大家分享一下方便快捷微信小程序制作方法? 1.百度搜索 百度搜索木鱼小铺,进入木鱼小铺官网 2.注册木鱼小铺账号 注册一个木鱼小铺账号,登录进入管理后台 3.选择开通店铺类型 木鱼小铺提供企业版.标准版.专业版.定制版.大客户开发版.教育版等,供商家选择.商家可自行选择,免费试用. 4.立即开通 完善店铺信息,点击立即开通即可. 5.开始制作 进入管理后台,开始制作 6.套用模板 木鱼小铺提供上百种模板供商家选择.点击店铺-风格装修-新建页面-输

微信小程序-视频教程-百度云-下载

微信小程序-视频教程-百度云-下载 什么是微信小程序?小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用.也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载. 为什么要学微信小程序?比 NativeApp 简单.比 WebApp 性能稳定.未来商业价值高.如果你是一名前端,那么未来小程序会是你另一个战场:如果你不是BAT,善用微信小程序开发将给你带来流量和用户:如果你是业内大V,新的研究

官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Android,开发工具等等),操作系统信息(系统版本),以及可以让他人重现的信息,最好能够提供重现 demo. 对于提供信息过少的问题,会直接关闭,请提供完整信息以后重新打开问题.另外,对于如何做某某功能,可否做某某功能的问题,会直接关闭. 微信小程序常见FAQ(17.8.21-17.8.27) Q:1.5

规范抢先看!微信小程序的官方设计指南和建议

基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢. 说到设计规范,这里有一篇绝对不能错过的:<内部教程!超实用6步透视网易设计规范(附完整PDF下载)> 一.友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示

一名Android开发者的微信小程序填坑之路(1)

前言 首先要声明的是,我是一名 Android 开发者,之前基本没有前端开发经验,甚至连 JS ,HTML 都是为了开发小程序现学的一些皮毛--所以文章中所提到的一些点也许在资深前端开发者看来只是小case,但是站在一个 Android 开发者的角度来看确实是大坑. 前面就不说太多东西了,文章的末尾再谈谈我对小程序的一些看法--这篇文章主要是谈谈在开发小程序的过程中遇到的一些坑. PS:推荐一下我写的一个微信小程序版的Gank客户端:wechat-weapp-gank 正文 1,获取小程序开发工