精华内容
下载资源
问答
  • 楼主//语音读text里面的文字 var text=document.getElementById('ready').value; alert(text); var obj = api.require('speechRecognizer'); obj.read({ readStr:'缘'+text ...

    1. //语音读text里面的文字
    2.     var text=document.getElementById('ready').value;
    3.         alert(text);        
    4.         var obj = api.require('speechRecognizer');    
    5.         obj.read({
    6.             readStr:'缘'+text
    7.         },function(ret,err) {
    8.             if(ret.status) {
    9.                 ret.speakProgress
    10.             }else{
    11.                 err.msg
    12.             }
    13.         });





    14. //QQ分享
    15. 在config里面添加
    16. <feature name="qq">
    17.        <param name="urlScheme" value="tencent101064640" />
    18.        <param name="apiKey" value="101064640" />
    19. </feature>

    20. //分享新闻到QQ页面JS
    21. function weichat(){
    22.     //判断是否安装了QQ
    23.     var obj = api.require('qq');
    24.     obj.installed(function(ret,err){
    25.     if(ret.status){
    26.         //如果安装了就登陆QQ
    27.         var obj = api.require('qq');
    28.         obj.login(function(ret,err){
    29.         if(ret.status)
    30.         {
    31.             var obj = api.require('qq');
    32.             obj.shareNews({
    33.                 url:'http://www.uzmap.com',
    34.                 title:'新闻分享',
    35.                 description:'新闻描述',
    36.                 imgUrl:'http://upload.wabei.cn/2011/0807/20110807025817844.jpg'
    37.             });
    38.         }else
    39.         {
    40.             alert("登录失败");
    41.         }                        
    42.         });
    43.         
    44.         }else{
    45.             api.alert({msg: "没有安装"});
    46.         } 
    47.     });
    48. }

    49. //分享图片到QQ
    50. function weichat(){
    51.     //判断是否安装了QQ
    52.     var obj = api.require('qq');
    53.     obj.installed(function(ret,err){
    54.         if(ret.status){
    55.             //如果安装了就登陆QQ
    56.             var obj = api.require('qq');
    57.             obj.login(function(ret,err){
    58.             if(ret.status)
    59.             {
    60.                 var obj = api.require('qq');
    61.                 obj.shareImage({
    62.                     title:'test',
    63.                     description:'testd',
    64.                     imgPath:'widget://icon/icon150x150.png'//图片地址为APP目录下的图片
    65.                 },function(ret,err){
    66.                     alert(ret.status);
    67.                     if(ret.status)
    68.                     {
    69.                         alert(1);
    70.                                 
    71.                     }else                            
    72.                     {
    73.                         api.alert({msg:err.msg});
    74.                     }
    75.                 });
    76.                 }else
    77.                 {
    78.                     alert("登录失败");
    79.                 }                        
    80.         });
    81.         
    82.             }else{
    83.              api.alert({msg: "没有安装"});
    84.             } 
    85.         });
    86. }


    87. //分享音乐
    88. function weichat(){
    89.     //判断是否安装了QQ
    90.     var obj = api.require('qq');
    91.     obj.installed(function(ret,err){
    92.     if(ret.status){
    93.         //如果安装了就登陆QQ
    94.         var obj = api.require('qq');
    95.         obj.login(function(ret,err){
    96.         if(ret.status)
    97.         {
    98.             var obj = api.require('qq');
    99.             obj.shareMusic({
    100.                 url:'http://play.baidu.com/?__m=mboxCtrl.playSong&__a=120125029&__o=song/120125029||playBtn&fr=altg8||www.baidu.com#',//音乐的地址
    101.                 title:'小苹果',//音乐名字
    102.                 description:'小小苹果',//音乐描述
    103.                 imgUrl:'http://musicdata.baidu.com/data2/pic/122112246/122112246.jpg',    //音乐的图片地址                       
    104.                 type:'QZone'//分享内容到好友或空间,取值范围QZone,QFriend,可为空
    105.             },function(ret,err){
    106.                 alert(ret.status);
    107.                 if(ret.status)
    108.                 {
    109.                     alert(1);
    110.                                 
    111.                 }else                            
    112.                 {
    113.                     api.alert({msg:err.msg});
    114.                 }
    115.             });
    116.         }else
    117.         {
    118.             alert("登录失败");
    119.         }                        
    120.     });
    121.         
    122.     }else{
    123.         api.alert({msg: "没有安装"});
    124.     } 
    125.     });
    126. }
    127. //分享视频
    128. function weichat(){
    129.     //判断是否安装了QQ
    130.     var obj = api.require('qq');
    131.     obj.installed(function(ret,err){
    132.     if(ret.status){
    133.         //如果安装了就登陆QQ
    134.         var obj = api.require('qq');
    135.         obj.login(function(ret,err){
    136.         if(ret.status)
    137.         {
    138.             var obj = api.require('qq');
    139.             var obj = api.require('qq');
    140.             obj.shareVideo({
    141.                 url:'http://www.iqiyi.com/w_19rs3ri1x9.html',
    142.                 title:'视频',
    143.                 description:'王力宏',
    144.                 imgUrl:'widget://icon/icon150x150.png'

    145.             },function(ret,err){
    146.                 alert(ret.status);
    147.                 if(ret.status)
    148.                 {
    149.                     alert(1);
    150.                                 
    151.                 }else                            
    152.                 {
    153.                     api.alert({msg:err.msg});
    154.                 }
    155.             });
    156.         }else
    157.         {
    158.             alert("登录失败");
    159.         }                        
    160.         });
    161.         
    162.     }else{
    163.         api.alert({msg: "没有安装"});
    164.     } 
    165.     });
    166. }
    167. //分享到新浪微博
    168. function sinaWeiBo(){
    169.     var sinaWeiBo = api.require('sinaWeiBo');
    170.     sinaWeiBo.auth(function(ret,err){
    171.      if (ret.status) {                
    172.         sinaWeiBo.sendRequest({
    173.              contentType: 'text',
    174.              text: '山不在高,有仙则名;水不在深,有龙则灵。',
    175.              imageUrl: 'WeiShare://icon/icon150x150.png'
    176.             },function(ret,err){
    177.                  if (ret.status) {
    178.                     api.alert({
    179.                     title: '发表微博',
    180.                     msg: '发表成功',
    181.                     buttons: ['确定']
    182.                 });
    183.                 }else{
    184.                      api.alert({
    185.                            title: '发表微博',
    186.                            msg: '发表失败',
    187.                            buttons: ['确定']
    188.                        });
    189.                     };
    190.                 });
    191.     }else{
    192.         api.alert({msg:'授权失败'+err.msg});
    193.     }
    194.     });
    195. }

    196. //打开图片浏览器
    197. function sinaWeiBo(){
    198.   var obj = api.require('imageBrowser');
    199.   obj.openImages({
    200.     imageUrls: ['widget://icon/icon150x150.png','widget://launch/launch1080x1920.png'],
    201.     showList:true,
    202.      activeIndex:3
    203.   });
    204. }



    205. //扫描信用卡
    206. function sinaWeiBo() {
    207.     var obj = api.require('cardReader');
    208.     obj.open(function(ret, err) {
    209.     if (ret.status) {
    210.         api.alert({
    211.             msg : '卡號:' + ret.cardNum + '過期的月' + ret.expiryMonth + '過期的年' + ret.expiryYear + 'cvv號' + ret.cvv
    212.          });
    213.         } else {
    214.             api.alert({
    215.             msg : err.msg
    216.             });
    217.         }
    218.     });
    219. }
    220. //获取通讯录的姓名与电话号码
    221. function sinaWeiBo() {
    222.     api.openContacts(
    223.     function(ret,err){
    224.         if(ret.status){
    225.             var msg = '姓名:'+ret.name+'--电话:'+ret.phone;
    226.              api.alert({msg:msg});
    227.         }else{
    228.              api.alert({msg:err.msg});
    229.         };            
    230.     }
    231.     );
    232. }

    233. //消失的提示框
    234. function show(){
    235.     api.toast({
    236.         msg: '网络错误',
    237.         duration:2000,
    238.         location: 'bottom'
    239.     });
    240. }
    复制代码
    展开全文
  • apicloud登录注册实例代码,此代码是基于链接自己服务器。适合新手学习
  • 摘要:共享汽车管理系统主要分为...车辆的剩余电量等信息可以为用户提供科学的参考依据,用户选择用车后可以提交订单并支付(此处使用的是支付宝和微信模拟支付),在用车前后需要对车辆信息做拍照记录防止纠纷,...

    摘要: 共享汽车管理系统主要分为后台管理PC端和手机App端,后台管理可以对指定停车点、车辆基本信息、用户注册信息、用户订单信息、推送消息进行管理和维护,而手机app用户可以通过手机号进行短信注册,根据附近的可以用车辆就近选择车辆信息,车辆的剩余电量等信息可以为用户提供科学的参考依据,用户选择用车后可以提交订单并支付(此处使用的是支付宝和微信模拟支付),在用车前后需要对车辆信息做拍照记录防止纠纷,在车辆使用完毕后归还至任意指定停车点,循环利用此车,可以在个人中心完成个人信息的认证、订单行程查看。

    2.1.2  功能需求 

     共享汽车管理系统主要分为后台管理PC端和手机App端,后台管理可以对指定停车点、车辆基本信息、用户注册信息、用户订单信息、推送消息进行管理和维护,而手机app用户可以通过手机号进行短信注册,根据附近的可以用车辆就近选择车辆信息,车辆的剩余电量等信息可以为用户提供科学的参考依据,用户选择用车后可以提交订单并支付(此处使用的是支付宝和微信模拟支付),在用车前后需要对车辆信息做拍照记录防止纠纷,在车辆使用完毕后归还至任意指定停车点,循环利用此车,可以在个人中心完成个人信息的认证、订单行程查看。

      (1)系统管理

        管理员登录对系统的后台管理用户,角色、部门、菜单权限进行基本的维护,有效的控制后台管理的权限。

      (2)站台管理

        管理员登录对车站的基本信息进行增删改,主要参数包括车站的名称、位置(纬度)、联系电话、车站介绍、充电桩数量、归属省市区等。

      (3)车辆管理

        管理员可以对车辆的基本属性进行修改,包括车辆的车牌号、类型、颜色、座位数、基本租赁价格、以及图文介绍,车辆的基本信息供用户选择附近用车时作为参考依据。

      (4)用户管理

          对手机App注册的用户进行查看,查看登录时间、使用次数,完成用户的身份认证和驾驶员信息认证,通过用户的用车次数供平台运营提供依据,同时可以通过短信等营销策略提升活跃用户。

      (5)订单管理

        管理员可以对订单进行统计和汇总,查看订单的信息,有效的为用户服务,通过订单的起始拍照,起始定位详尽的记录了车辆的使用记录。

      (6)消息发布

    管理员通过消息发布,推送平台注册信息优惠以及日常的运营维护,用户可以在打开手机app的个人信息中查看到此信息。

      (7)发票管理

    针对有特殊需要的用户进行发票的开取和审核,以及邮寄给用户,如果是提交了电子邮件的则使用电子发票。

     

     

     

     

    【后台管理测试地址】:http://51diysoft.com:8001

     

     

    管理员:admin

    密码:666666

     

    【app下载测试二维码】:

    因需要开通短信,测试环境是启用了短信的,可以直接使用以下手机号查看测试。

     

    注意打开App前需要开启GPS定位,才能加载附近的车站信息(是在后台管理中根据车站的经纬度和汽车关联的),也可以使用安卓夜游神模拟器等虚拟定位到重庆市九公里轻轨站,方可获取测试数据,或者自己在后台管理添加自己位置的站点和车辆信息。

     

    测试账号:18716483120

    密码:1

    如有疑问可以联系作者微信18716483120

     

    共享汽车.png

     

     

    以下是大致截图:

     

     

     

    经纬度定位.png 

     

     

     

     

     

     

    【电脑版后台管理截图】

     

    如有需要请移步【51disoft源码小店查看】:

    51diysoft的源码小店

     

    http://www.51aspx.com/shop/1035324

     

     

     

     

    转载于:https://www.cnblogs.com/51diysoft/p/11174360.html

    展开全文
  • APICloud认证案例 认证考试往期实例应用程序源码合集,本集合内集成了的认证考试考前资源和演示演示的源码,供开发者参考学习。本集合会跟随的认证考试进行持续更新。 1. : 本次考试程序页面由注册登录页,列表页,...
  • 希望通过课程和大家一起交流,共同分享,不断的来完善教程,丰富的实例代码和案例。谢谢。 最新教程讲解和七天课程的完整视频详见:APICloud官方出品的新书 :rocket:本课程案例已有升级APICloud 3.x版本使用多端...
  • APICloud学习一

    2020-11-12 17:47:03
    启动后第一件事就是初始化引擎,会创建两个UI组件实例,分别是widget和window。widget是appcloud运行的最小单位,appcloud想要运行的话至少拥有一个widget实例,可以把Widget看做app本身。存在多个widget的情况下,...

    一、基础知识

    1.app的启动方式

    用户手动启动
    被其他app调用

    启动后第一件事就是初始化引擎,会创建两个UI组件实例,分别是widget和window。widget是appcloud运行的最小单位,appcloud想要运行的话至少拥有一个widget实例,可以把Widget看做app本身。存在多个widget的情况下,最先初始化的主widget如果被关闭,整个app将会被关闭。

    之后会在主widget创建一个根window对象,window即代表屏幕,任何可视化部分需要装载在某个window中,这里所说的window是对移动平台原生窗口概念的封装,可以提供原生的性能。window之后会装载一个html页面,也就是打开的第一个页面,可以通过config.xml配置。

      <content src="index.html" />
    

    2.APICloud引擎的两个重要事件

    content事件:
    在引擎初始化完成后,App会去解析config.xml,打开它后找到 content这一行,它的参数index.html会被装载到刚刚被创建的window中。实际上在解析content标签时会触发一个content事件处理这个事件时参数中的html就被装载了。
    apiready事件:
    开发者应在页面javascript代码中注册apiready事件,示例如下

     apiready = function() {
            //输出Log,Log将显示在APICloud Studio控制台
            console.log("Hello World! Hello APICloud!");
            api.openWin({
              name: 'main',
              url: './html/main.html',
              pageParam:{
                name:"HELLOAPP"
                }
            });
        };
    

    3.APICloud应用设计思想

    其采用标准Web技术,但是与其他Web产品采用B/S架构不同,APICloud应用采用完整的Client/Cloud,及前后端分离的框架。App中所有的网页文件都存放在App本地,只有数据从服务器端获取,更明白一点就是在移动端实现界面和功能,在服务器端提供数据和服务。

    4.App的UI架构设计(界面和导航)

    在知道APICloud应用使用什么架构设计后,接下来一个非常重要的就是App的UI架构设计。 一个原生应用,无论是Android还是iOS的应用,都是由很多不同的窗口组成,窗口是ap界面展示的最小单位,通过一个个窗口的跳转和切换使整个App的界面和功能展示出来。
    通常使用HTML5实现WebApp中,通过div切换来实现界面的切换,或者通过a标签实现界面的跳转。在使用HTML5技术开发APP的时候(注意不是WebApp),不管使用什么平台或者框架,不同的跨平台产品都有一套自己的UI组成结构。

    5.APICloud应用的UI组成结构

    一个APICloud应用可以包含Widget,Layout,Window,Frame和UIModule这五种UI类型的组件。

    Widget可以包含Layout,Window,UIModule
    Window可以包含Layout,Frame,UIModule
    Layout可以包含Window,Frame
    Frame可以包含UIModule

    6.界面布局五大组件

    1.Widget
    应用运行管理的最小单位,Widget之间可以相互调用,同一时刻,应用中只能有一个Widget在界面上显示。

    api.openWidget()
    api.closeWidget()
    

    2.Layout
    旨在实现某一种特定的布局效果,通过定义好的布局组织一组Window或rame来完成整体的界面布局效果。

    api.openFrameGroup()
    api.closeFrameGroup()
    

    3.Window
    每一个App都由多个Window组成,可以独立进行渲染。Window的起点位于屏幕左上角,宽高占满屏幕,不可修改。

    api.openWin()
    api.closeWin()
    

    4.Frame
    大体与Window类似,但它的位置和宽高可以通过参数进行配置,Frame通常作为一个子视图,嵌入到Window或者Layout中。

    api.openFrame()
    api.closeFrame()
    

    5.UIModule
    旨在实现某种特定的UI界面效果,可以全屏展示,也可以只是局部区域。每一个UI模块都具有其独立的生命周期、界面布局、事件管理和数据交互。

    加载UIModule:api.require()
    打开(以UIScrollPicture为例):UIScrollPicture.open()
    关闭(以UIScrollPicture为例):UIScrollPicture.close()
    

    7.APICloud混合渲染模式

    不理解,先空着。

    8.APICloud引擎api对象功能

    api对象是APICloud在全局作用域内唯一的一个扩展对象和核心对象,包含了开发一款App要用到的最基础功能,api对象无需引入,可以直接使用。APICloud的扩展模块,都需要通过api.require()方法引入后才能使用。实现拨打电话功能代码如下

    <script type="text/javascript">
        apiready = function() {
           api.call({
               type:"tel",
               number:'0000000000'
           })  
        };
    </script>
    

    9.屏幕适配

     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    

    每个HTML页面的head标签中都有如上代码,它的作用是声明该HTML页面执行时的渲染区域宽度为设备的屏幕可视区域,不作任何缩放,同时禁用缩放功能。

    10.前端框架

    前端框架提供了常用的dom操作封装和css样式,保存在项目的根目录下script/api.js和css/api.css中,前端框架通过 $ api(和之前的api不同)访问。如 $ api.byId(‘xxx’)来根据id获取dom元素。
    下面的代码将id为"main"的dom元素的内容设置为“Hello APICloud”,示例如下

    <script type="text/javascript">
        apiready = function() {
           $api.html(
               $api.byId("main"),
               "Hello APICloud"
           );
        }
    </script>
    

    11.状态栏处理

    1.非沉浸式状态栏,状态栏与App互相分离
    2.沉浸式状态栏,状态栏背景与App融合

    沉浸式需要开启两个步骤:
    首先修改config.xml,实现如下代码

    	<preference name="statusBarAppearance" value="true"/>
    

    然后对页面顶端元素使用 $api.fixStatusBar(),开启沉浸状态后,页面会渗入到状态栏下方,此时如果有页面元素显示在顶端会被遮挡。对于被遮挡的元素调用 $api.fixStatusBar()会为这个元素添加padding-top样式。

    <script type="text/javascript">
        apiready = function() {
            $api.fixStatusBar(
                $api.byId("header")
            );
        }
    </script>
    

    12.优化点击事件和tapmode

    为解决响应延迟问题,提供快速点击响应,需要在点击发生的元素上添加tapmode属性。

        <div class="right" tapmode onclick="fnOpenPersonCenterWin();">个人中心</div>
    

    如果动态创建了包含tapmode的元素,之后需要调用下面的代码使之生效:

    api.parseTapmode()
    

    另外,tapmode属性支持css样式及动态改变元素样式,实现Native的点击效果。

     <div class="btn" tapmode="btn-press" onclick="goback()">返回</div>
    

    当返回按钮被用户点击,处于按下状态时,此DIV元素将叠加使用“btn-press”样式进行渲染,当用户手指离开屏幕后,此DIV元素样式将恢复至默认,即移除“btn-press”样式。

    13.静态页面中建议遵循的布局方法

    使用HTML语义化标签,如header,nav,section,height,footer。

    采用弹性响应式布局,配合流式布局。

    宽度使用具有自适应特征的数值,如100%、flex、px、auto等。

    高度优先采用px单位布局。

    采用绝对定位,如position:absolute。

    待补充

    14.模块引用方法

    (1)观看模块文档是否需要在config.xml中配置。
    (2)在控制台添加模块
    (3)重新自定义loader编译,才能使用模块

    二、Demo案例实现

    项目开源地址:点击这里

    1.header部分

    (1)index.html

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>Hello APP</title>
        <link rel="stylesheet" type="text/css" href="./css/api.css" />
        <style type="text/css">
            
        </style>
    </head>
    
    <body>
       
    </body>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.openWin({
                name: 'main',
                url: './html/main.html'
            });
          
        };
    
    </script>
    
    </html>
    
    

    (2)main.html
    在body中插入

     <header id="header">
            <div class="left">
                <div class="arrow" id="arrow"></div>
                <div class="city" id="city">北京市</div>
            </div>
            <div class="center"></div>
            <div class="right"></div>
        </header>
    

    在style中插入

     <style>
        header {
            /* position: relative; */
            width: 100%;
            height: 50px;
            background-color: #e1017e;
        }
    
        header .left {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 50px;
        }
    
        header .left .arrow {
            position: absolute;
            bottom: 21px;
            left: 11px;
            width: 13px;
            height: 8px;
            background: url(../image/arrow_down.png);
            background-size: 13px 8px;
            background-position: center center;
            background-repeat: no-repeat;
            -webkit-transition: 200ms;
            transition: 200ms;
        }
    
        header .left .arrow.active {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    
        header .left .city {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 50px;
            padding-left: 27px;
            /* box-sizing: border-box; */
            line-height: 50px;
            font-size: 14px;
            color: #fff;
            text-align: left;
        }
    
        header .center {
            /* position: relative; */
            width: 100%;
            height: 50px;
            background: url(../image/home_title.png);
            background-size: 74px 19px;
            background-position: center center;
            background-repeat: no-repeat;
        }
    
        header .right {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 50px;
            background: url(../image/home_membercenter.png);
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
        }
        </style>
    

    (3)实现Tab标签组
    在body中插入

     <nav id="nav">
            <div class="menu selected">水果</div>
            <div class="menu">食材</div>
            <div class="menu">零食</div>
            <div class="menu">牛奶</div>
            <div class="menu">蔬菜</div>
        </nav>
    

    在style中插入

    nav {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-flex-flow: row;
            flex-flow: row;
            position: relative;
            /* width: 100%; */
            height: 40px;
            background-color: #e1017e;
        }
    
        nav .menu {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            color: #f973b8;
            text-align: center;
        }
    
        nav .menu.selected {
            font-size: 14px;
            color: #fff;
            font-weight: bolder;
        }
    

    运行效果:在这里插入图片描述

    展开全文
  • APICloud自学笔记总结1

    2019-09-23 05:30:11
    我于去年12月份开始接触apicloud技术,到现在半年有余,期间大约自学了三个月,模仿apicloud官网[http:///www.apicloud.com]的一个实例完成毕业设计。自认为是有收获的。毕竟纯粹是自学,自己基础水平也一般,现在...

    我于去年12月份开始接触apicloud技术,到现在半年有余,期间大约自学了三个月,模仿apicloud官网[http:///www.apicloud.com]的一个实例完成毕业设计。自认为是有收获的。毕竟纯粹是自学,自己基础水平也一般,现在利用此技术在完成一个app的前端,属于刚起步,摸索了两周。现在把自己收获的做个记录和分享,废话不说直接上代码。更多问题欢迎交流,qq:635149113  了解。  

    我前端最开始是自己写的,用的就是基本的html、css、js 也结合了一些aui框架写的前端

    数据库用的官方的云数据库,它有一些数据类型比较特殊,基本的就是String、Number、File、Date、Boolean、Array、Object...我要说的是pointer(一对一)和realation(一对多)。

    大概介绍一下pointer(一对一)和realation(一对多)。

    pointer(一对一):就像是一个公民只有一张身份证

    realation(一对多):就像是一个老师可以带多个班、或者说一个人可以有多个小名

    学过数据库建过表的人知道这两种关系,重要性也知道,谁的有实际用处的数据库也不可能只有几张完全没关系的表。ok,就是说你用云数据库对数据进行操作是不用自己写后端代码的,具体的在官方文档有提供实例,最强大的有API调试。

    前端的东西我用一个很具体的例子写出来。例子中涉及到从数据库中的一张表取值,是以其他一个页面的一个按钮触发的这个事件跳到这个页面,然后根据条件去判断具体显示哪些值。我使用的是dot.js模板。自己百度学习一下。

    这里边也涉及了基本的存取值问题,就是从数据库取到值后处理显示到界面还是取值之前进行处理后显示到界面,这是不一样的。

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="utf-8">
      5         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
      6         <title>APP</title>
      7         <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      8         <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      9         <style>
     10             .aui-text-center{font-size: 14px !important;height: 50px;line-height: 50px;}
     11             .box{
     12             display:-webkit-box;
     13             display: -moz-box;
     14             -webkit-box-orient: horizontal;
     15             -moz-box-orient: horizontal;
     16             height: 85px;
     17             border: 0px solid fuchsia;
     18         }
     19         .box div img{width: 60px;border: 0px solid darkblue;}
     20         .box div:nth-of-type(2){-webkit-box-flex:6;border: 0px solid teal;height: 86px;margin: 0px 5px;}
     21         .aui-content-padded{margin-bottom:0px;margin-top: 10px;}
     22         .aui-content-padded ul li div .imgLeft{position: relative;}
     23         .aui-content-padded ul li div .imgLeft + span{border: 0px solid #00FFFF;position: absolute;height: 20px;width: 60px;font-size: 12px;text-align: center;}
     24         .aui-content-padded ul li div .mName{margin-bottom:8px;float:left;text-align: left;color: black;border: 0px solid red;width: 65%;}
     25         .aui-content-padded ul li div .text-left{text-align: left;font-size: 12px;}
     26         .aui-content-padded ul li div  .aui-ellipsis-2 {-webkit-line-clamp: 3;clear: both;}
     27          hr{height: 1px;border:none;border-top: 1px solid #cccccc;margin-top: 15px;}
     28         .box div:nth-of-type(1) span{color: #99bbff;}
     29         .aui-content-padded ul li div .judge{color: #ff8585;margin-bottom:8px;border: 0px solid lawngreen;text-align: right;}
     30         .bo{border: 0px solid darkblue;text-align: center;}    
     31         </style>
     32     </head>
     33     <body>
     34         <p class="bo aui-ellipsis-2" id="headText">每一勋章,当天只可授予1次;每天,最多可授予3枚勋章</p>    
     35         <div class="aui-content-padded test">
     36            <ul>
     37                <script id="awardMedal-template" type="text/x-dot-template">
     38                    {{ for(var i=0;i<it.length;i++){ }}                        
     39                        <li class="box">
     40                            <div class="">
     41                                <img class="imgLeft" src="{{=it[i].img.url}}" />
     42                                <span>{{=it[i].habit}}</span>
     43                            </div>
     44                            <div class="aui-text-left aui-padded-5">
     45                                <p class="mName">{{=it[i].medalName}}</p>
     46                                <!--描述:此处需要进行判断具体显示哪一个 -->
     47                                {{if(it[i].medalNum>0){}}
     48                                    <p class="judge">今天已授予</p>
     49                                    
     50                                {{ }else{ }}
     51                                    <input class="judge aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
     52                                {{}}}
     53                                <p class="aui-ellipsis-2 text-left">{{=it[i].getMedalDue}}</p>
     54                            </div>
     55                        </li>
     56                     <hr class="aui-padded-10"/>
     57                 {{ } }}    
     58                     </script>
     59                     <li id="awardMedal"></li>
     60            </ul>
     61         </div>
     62         
     63         
     64     </body>
     65 <script type="text/javascript" src="../../script/api.js"></script>
     66 <script type="text/javascript" src="../../script/common.js"></script>
     67 <script type="text/javascript" src="../../script/doT.min.js"></script>
     68 <script type="text/javascript">
     69 
     70 apiready = function() {
     71     awardWall();
     72     api.setRefreshHeaderInfo({
     73                 visible: true,
     74                 loadingImgae: 'wgt://image/refresh-white.png',
     75                 bgColor: '#f2f2f2',
     76                 textColor: '#4d4d4d',
     77                 textDown: '下拉刷新...',
     78                 textUp: '松开刷新...',
     79                 showTime: true
     80             }, function(ret, err) {
     81                 awardWall();
     82                 api.refreshHeaderLoadDone();
     83             });
     84 
     85             api.addEventListener({
     86                 name: 'scrolltobottom'
     87             }, function(ret, err) {
     88                 awardWall();
     89             });
     90             
     91 }
     92 
     93 
     94         function awardWall() {
     95             var urlParam1 = {
     96                 "where":{"medalName":{"ne":"更多勋章"}},"skip":0
     97             };
     98             var awardMedal = '/medal?filter=';
     99             ajaxRequest(awardMedal + JSON.stringify(urlParam1), 'GET', '', function(ret, err) {
    100                 if(ret) {
    101 //                    alert(JSON.stringify(ret));  
    102 //                    alert(typeof(JSON.stringify(ret)));       //string
    103 //                    alert(typeof(ret));                        //object
    104 //                    alert(JSON.stringify(ret[5].medalNum));
    105                     var content1 = $api.byId('awardMedal');
    106                     var tpl1 = $api.byId('awardMedal-template').text;
    107                     var tempFn1 = doT.template(tpl1);
    108                     
    109                     var allMedal = 0;
    110                     for (var i = 0; i < ret.length; i++) {
    111                         allMedal += ret[i].medalNum;
    112                     }
    113                     if(allMedal==3){
    114                         //只能显示已经授予的三个,或者是medalNum>0的
    115                          //将得到的ret再次筛选,取出medalNum>0的全部数据,放到ret1
    116                         var ret1 = [];
    117                         for (var i = 0; i < ret.length; i++) {
    118                         if(ret[i].medalNum>0){
    119                             ret1.push(ret[i]);
    120                         }
    121                     }    
    122                     var headText = document.getElementById("headText").innerHTML='真厉害!孩子在今天已经获得了3枚习惯勋章,不可获得更多了哦~真厉害!孩子在今天已经获得';
    123                     content1.innerHTML = tempFn1(ret1);
    124                     }else if(allMedal<3){
    125                         //全部显示,其中未授予过的是单选按钮,而且加上已经授予的总和不能大于3
    126                         content1.innerHTML = tempFn1(ret);
    127                     }else{
    128                         //do nothing
    129                     }
    130                 } else {
    131                     api.alert({
    132                         msg: err.msg
    133                     });
    134                 }
    135                 api.hideProgress();
    136             })
    137             }
    138         
    139 </script>
    140     
    141 </html>


    我的数据库如下,这是我从云端导出的,是后缀为.json的文件

     

    1 {"_id":{"$oid":"578c7ebf2348b7f9487e3b42"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/52ff744cc0a02c8ab5e9b70699502a4d.jpg","name":"medal01.jpg","id":"578c7ebf8339749c49a6d472"},"createdAt":{"$date":"2016-07-18T07:01:19.769Z"},"updatedAt":{"$date":"2016-07-20T06:56:13.136Z"},"medalName":"思考勋章","habit":"行动习惯","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","medalNum":0}
    2 {"_id":{"$oid":"578c7eca2348b7f9487e3b4f"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/8330f4e73acf4fb70f6c36e5b2c1aa38.jpg","name":"medal02.jpg","id":"578c7eca2348b7f9487e3b4e"},"createdAt":{"$date":"2016-07-18T07:01:30.349Z"},"updatedAt":{"$date":"2016-07-20T03:19:49.412Z"},"medalName":"探险勋章","habit":"兴趣习惯","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","medalNum":0}
    3 {"_id":{"$oid":"578c7ed2dcad32dc7129e42c"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/5746e258841d92f48c52e6e30fecd05b.jpg","name":"medal03.jpg","id":"578c7ed28339749c49a6d47c"},"createdAt":{"$date":"2016-07-18T07:01:38.432Z"},"updatedAt":{"$date":"2016-07-20T07:10:54.237Z"},"medalName":"阅读勋章","habit":"交友习惯","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","medalNum":1}
    4 {"_id":{"$oid":"578c7ed7f78b9b494aeb67c5"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/8330f4e73acf4fb70f6c36e5b2c1aa38.jpg","name":"medal02.jpg","id":"578cc66c4a2810821723bf41"},"createdAt":{"$date":"2016-07-18T07:01:43.264Z"},"updatedAt":{"$date":"2016-07-20T03:19:43.172Z"},"medalName":"作业勋章","habit":"生活习惯","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","medalNum":0}
    5 {"_id":{"$oid":"578c7edc8339749c49a6d483"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/c8f1a1a7d9ae437300e7ccac00e7a0fb.jpg","name":"medal05.jpg","id":"578c7edc8339749c49a6d482"},"createdAt":{"$date":"2016-07-18T07:01:48.978Z"},"updatedAt":{"$date":"2016-07-20T06:53:29.724Z"},"medalName":"勤劳勋章","habit":"卫生习惯","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","medalNum":1}
    6 {"_id":{"$oid":"578c7ee22348b7f9487e3b5a"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/0a1e5c08fdfc58f75eb8746d89e89f0a.jpg","name":"medal06.jpg","id":"578c7ee2f78b9b494aeb67ca"},"createdAt":{"$date":"2016-07-18T07:01:54.150Z"},"updatedAt":{"$date":"2016-07-19T08:22:22.886Z"},"medalName":"独立勋章","habit":"学习习惯","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","medalNum":0}
    7 {"_id":{"$oid":"578c7ee7f78b9b494aeb67cc"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/ad32b55e9e2ea46bd6b52ad46620841f.jpg","name":"medal07.jpg","id":"578c7ee72348b7f9487e3b5c"},"createdAt":{"$date":"2016-07-18T07:01:59.636Z"},"updatedAt":{"$date":"2016-07-20T05:31:55.975Z"},"medalName":"持之以恒勋章","getMedalDue":"连续七天,每天用20~30连续七天,每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择,你们是最棒的啊!","habit":"行动习惯","medalNum":1}
    8 {"_id":{"$oid":"578c82762348b7f9487e3d4c"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/612b57d32bf57643cfe995113a9ce6d0.jpg","name":"medal08.jpg","id":"578c82762b69092010030805"},"medalName":"更多勋章","createdAt":{"$date":"2016-07-18T07:17:10.154Z"},"updatedAt":{"$date":"2016-07-19T10:52:28.860Z"},"medalNum":0}

    里边还涉及到几个js文件以及css,直接放到你本地是不能运行的。只是逻辑和基本的方法留个笔记。欢迎交流。

     

    转载于:https://www.cnblogs.com/zlj1027/p/5689253.html

    展开全文
  • apicloud的tapmode用法

    2020-09-03 16:13:45
    在开发的过程中,直接给...同时,它具有触发可显示样式的效果,tapmode=‘css样式类’ 属性,当该元素touchstart touchmove的时候就会展现css样式。 实例<div class="menu" tapmode onclick="setAlert()">零食&l
  • 本书涵盖了APICloud应用开发的知识,包括基础知识、关键技术、开发技巧和行业方案,并从实践角度出发,通过大量的实例代码、详细的操作步骤和丰富的开发截图,帮助开发人员迅速掌握APICloud应用开发,有能力制作出好...
  • 这是30天学成开发一部APP软件,隶属于混合开发,是APICloud的教程,里面包含相关的实例,你值得拥有
  • 废话不说,直接上代码 模块地址:...代码实例: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="vi...
  • 以下是我个人在使用 apicloud 开发时项目中使用到的,在此做个总结:1、FNScanner 扫一扫 加载动画如下图: 官方手册地址:点击打开链接 代码实例: function openFNScanner(){ var FNScanner = api.require('...
  • apicloud的项目中使用swiper组件,碰到了一个问题,就是当轮播图的数据是本地定义的时候,这个组件是可以顺利使用的,但是当轮播图的数据变成动态获取后,轮播图的功能就开始异常了。最后发现是没有使用nextTick的...
  • 关于作者 程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发。合适和够用是最完美的追求。 个人网站:http://www.linganmin.cn ... ...Vue实例有...
  • 今天我准备拿大众点评、美团、猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果。美团App下拉加载效果以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模块。这个效果实际是使用...
  • 当然我也用其他敏捷式平台开发过APP,比如APICloud、uiapp,相比Flutter难度会小一些。 用户的需求 移动软件开发的困难 这种框架的目标? Flutter的特点 GitHub 实例 githuFlutterb....

空空如也

空空如也

1
收藏数 20
精华内容 8
关键字:

apicloud实例