问题场景

最近开发一个展示类应用项目，展示设备为若干个24小时运行的Android广告机。考虑到停电的情况该应用需要开机自启动。

背景知识

• 当Android启动时，会发出一个系统广播，内容为ACTION_BOOT_COMPLETED，它的字符串常量表示为 android.intent.action.BOOT_COMPLETED。

• android开发中的基本概念：Activity。Activity简单的理解为android的视图，承载着android的人机交互。一个应用程序可以有多个Activity，其中有一个Activity为应用程序启动时最先启动的。 该Activity在AndroidManifest.xml中的具体形式如下。intent-filter中两项android.intent.action.MAIN 和 android.intent.category.LAUNCHER表示该activity为应用程序启动主界面。

  <activity android:name=".MainActivity" android:label="@string/app_name">  
  <intent-filter>  
      <action android:name="android.intent.action.MAIN" />  
      <category android:name="android.intent.category.LAUNCHER" />  
  </intent-filter>  
  </activity>

到这里解决问题的思路就完整了，我们监听ACTION_BOOT_COMPLETED广播，并在监听逻辑中启动应用的对应的Main Activity。

前提条件

由于我们需要自己写广播接收逻辑，所以应用的打包只能采用“离线打包”，这样我们才能调用android原生的api。

示例

• 本地离线打包项目导入，环境配置。（略，请参考 Android离线打包）

• AndroidMainfest.xml中添加开机启动权限

  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

• 创建一个广播接收类

package io.dcloud.yourapp;  
import android.content.BroadcastReceiver;  
import android.content.Context;  
import android.content.Intent;  
import io.dcloud.PandoraEntry;  

public class BootBroadcastReceiver extends BroadcastReceiver {  

    static final String action_boot="android.intent.action.BOOT_COMPLETED";  

    @Override  
    public void onReceive(Context context, Intent intent) {  

        if (intent.getAction().equals(action_boot)){  

            // 注意H5+SDK的Main Activity为PandoraEntry（见AndroidMainfest.xml）  
            Intent bootMainIntent = new Intent(context, PandoraEntry.class);  

            // 这里必须为FLAG_ACTIVITY_NEW_TASK  
            bootMainIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  

            context.startActivity(bootMainIntent);  
        }  

    }  
}

• 在AndroidMainfest.xml中注册该广播接收类

  <!--开机自启动-->  
  <receiver android:name=".BootBroadcastReceiver">  
  <intent-filter>  
       <action android:name="android.intent.action.BOOT_COMPLETED" />  
       <category android:name="android.intent.category.LAUNCHER"></category>  
  </intent-filter>  
  </receiver>

• 编译,调试

注意事项

• 请注意BootBroadcastReceiver的命名空间，要保证AndroidMainfest.xml中receiver可以找的到我们创建的BootBroadcastReceiver类。

• 应用程序必须在Android中启动一次，下次才可以开机启动。

app主页预加载是个页面，分别为a,b,c,d目录的index，也就是a/index.html ; b/index.html ......

其中主页面有个点击事件是获取商家id并传到b目录下的商家产品目录页（这个页面是选项卡+下拉刷新），麻烦来了，传过来的值接收到并把数据封装好了，但弄死就是不显示内容，但是比较奇怪的是，在b目录（产品目录了）点击进入产品详细，里面有个点击事件进入商家店铺页面（也就上面提到的商家产品目录），这下数据能显示，就那么奇怪~~~

在商家产品目录里更奇怪，选项卡+下拉刷新 都知道是什么页面结构，上面产品分类，下面是产品分类列表，如果首次不点击产品分类的话，在下面左右滑动，产品分类选项卡不跟随走，并提示【 Uncaught TypeError: Cannot read property '0' of undefined at js/mui.min.js:7】，这个先不管吗，毕竟可以再次点击产品分类后再左右滑动 就不会提示错误。

但是上下滑动 有出问题了，远程获得数据，啥都可以，就是不显示数据

var createFragment = function(ul, index,itemid) {  
                        var length = ul.querySelectorAll('li').length;  
                        var fragment = document.createDocumentFragment();  
                        var li;  
                        loaddatelist.usershoplist(length,id,itemid, function(rs) {  
                            if(rs){  
                                var len=rs.length;  
                                for (var ii = 0; ii < len; ii++) {  
                                    li = document.createElement('li');    
                                    li.className = 'mui-table-view-cell mui-media';  
                                    li.id =rs[ii]['id'];  
                                    li.innerHTML+='<img class="mui-media-object mui-pull-left" data-lazyload-id="'+rs[ii]['id']+'" src="'+rs[ii]['picurl']+'" onerror="src=\'../images/no_logo.png\'">';  
                                    li.innerHTML+='<div class="mui-media-body">'+rs[ii]['title'];  
                                    li.innerHTML+='<p class="mui-ellipsis-2">'+rs[ii]['description']+'</p>';  
                                    li.innerHTML+='<p><span class="mui-pull-left">¥'+rs[ii]['price']+'元</span><span class="mui-pull-right"><span class="mui-icon mui-icon-eye mygz"></span>'+rs[ii]['oncl']+'</span></p>';  
                                    li.innerHTML+='</div>';  
                                    fragment.appendChild(li);  
                               }  
                            }  
                        });  
                        return fragment;  
                    };

然后把这个换成官方提供的demo，嘿，居然可以了，但数据不是想要的数据~~~

生活不易
生活不易
生活不易
承接整套网站建设（前后台都可），UI设计，webAPP建设，微信公众平台等项目。
能力足够，可以先加Q看我的成品
QQ46174188646

mui初级入门教程（五）— 聊聊即时通讯（IM），基于环信 web im SDK

全部文章：
MUI从入门到精通

最新bh没得法配置支付参数了

请问hbuilder如何支持typescript和react？

临时解决办法:
1.%HBuilder安装目录%\plugins\com.pandora.tools.android_1.0.0.201606082006\下修改preferences.ini文件中iphone_version=7.2.1 为 iphone_version=7.2.0

2. 将同目录下base文件夹中的ipa基座替换成附件中的基座

http://pan.baidu.com/s/1eSufLYE

我是使用5+webApp加载网络链接，加载的网页是同事用Hbuilder写的（貌似是，对于h5不是太懂，大家不要喷）
遇到的第一个问题就是静态库添加进去会报错，building setting里面搜索search path，然后修改静态库的路径（必要的时候修改frameWork的路径）， other link flag添加-ObjC（一定要注意大小写），如果配置都正确还是报错的话，很有可能就是缺少某些静态库
第二个问题就是我在使用payment模块的时候，按照文档上导入了三个支付所用到的静态库以后还是会报错，解决方法是再导入一个liblibpayment.a的静态库，Feature-iOS那个表格里没有写要加这一个（好气啊）。
还再继续摸索使用中，遇到的问题会及时分享。
最后，感谢工程师 DCloud_SDK_骁骑 对我的帮助，谢谢！

直接连接数据线运行没有问题。只有生成app，安装后有问题！

 <ul class="mui-table-view">   
        <li class="mui-table-view-cell mui-collapse mui-active">  
            <a class="mui-navigate-right" href="#">面板1</a>  
            <div class="mui-collapse-content">  
                <p>面板1子内容</p>  
            </div>  
        </li>  
        <li class="mui-table-view-cell mui-collapse">  
            <a class="mui-navigate-right" href="#">面板</a>  
                <div class="mui-collapse-content">  
                <p>面板2子内容</p>  
            </div>  
        </li>  
        <li class="mui-table-view-cell mui-collapse">  
            <a class="mui-navigate-right" href="#">面板3</a>  
            <div class="mui-collapse-content">  
                <p>面板3子内容</p>  
            </div>  
        </li>   
    </ul>

mui中选项卡切换加下拉刷新，动态加载数据左右轮滑无效！
具体代码如下：
json数据：```javascript
[{"title":"\u9505\u5e95","picurl":"","id":"445","plist":[{"id":"466","picurl":"http:\/\/www.baidu.com\/Uploads\/3295\/image\/20160510\/20160510151115_56636.jpg","title":"\u7ea2\u6c64\u9505\u5e95","price":"20","oldprice":"40","userid":"3295","description":"\u706b\u9505\u5e95\u6599\u79d8\u65b9(\u6b63\u5b97\u79d8\u65b9)","oncl":"36"}]},{"title":"\u8364\u83dc","picurl":"","id":"446","plist":[{"id":"467","picurl":"http:\/\/www.baidu.com\/Uploads\/3295\/image\/20160609\/20160609181009_11840.jpg","title":"\u8364\u83dc","price":"18","oldprice":"18","userid":"3295","description":"","oncl":"1"},{"id":"468","picurl":"http:\/\/www.baidu.com\/Uploads\/3295\/image\/20160609\/20160609181229_89288.jpg","title":"\u8364\u83dc1","price":"22","oldprice":"22","userid":"3295","description":"","oncl":"1"}]}]

html代码：
```javascript  
<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
            .mui-bar~.mui-content .mui-fullscreen {  
                top: 44px;  
                height: auto;  
            }  
            .mui-pull-top-tips {  
                position: absolute;  
                top: -20px;  
                left: 50%;  
                margin-left: -25px;  
                width: 40px;  
                height: 40px;  
                border-radius: 100%;  
                z-index: 1;  
            }  
            .mui-bar~.mui-pull-top-tips {  
                top: 24px;  
            }  
            .mui-pull-top-wrapper {  
                width: 42px;  
                height: 42px;  
                display: block;  
                text-align: center;  
                background-color: #efeff4;  
                border: 1px solid #ddd;  
                border-radius: 25px;  
                background-clip: padding-box;  
                box-shadow: 0 4px 10px #bbb;  
                overflow: hidden;  
            }  
            .mui-pull-top-tips.mui-transitioning {  
                -webkit-transition-duration: 200ms;  
                transition-duration: 200ms;  
            }  
            .mui-pull-top-tips .mui-pull-loading {  
                /*-webkit-backface-visibility: hidden;  
                -webkit-transition-duration: 400ms;  
                transition-duration: 400ms;*/  

                margin: 0;  
            }  
            .mui-pull-top-wrapper .mui-icon,  
            .mui-pull-top-wrapper .mui-spinner {  
                margin-top: 7px;  
            }  
            .mui-pull-top-wrapper .mui-icon.mui-reverse {  
                /*-webkit-transform: rotate(180deg) translateZ(0);*/  
            }  
            .mui-pull-bottom-tips {  
                text-align: center;  
                background-color: #efeff4;  
                font-size: 15px;  
                line-height: 40px;  
                color: #777;  
            }  
            .mui-pull-top-canvas {  
                overflow: hidden;  
                background-color: #fafafa;  
                border-radius: 40px;  
                box-shadow: 0 4px 10px #bbb;  
                width: 40px;  
                height: 40px;  
                margin: 0 auto;  
            }  
            .mui-pull-top-canvas canvas {  
                width: 40px;  
            }  
            .mui-slider-indicator.mui-segmented-control {  
                background-color: #efeff4;  
            }  
            .mui-table-view .mui-media-object{ clear: both; line-height: 90px;  min-width: 110px;  height: 90px;}  
            .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 5px}  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">选项卡切换+下拉刷新</h1>  
        </header>  
        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div class="mui-scroll" id="toplist"></div>  
                </div>  
                <div class="mui-slider-group" id="mylistall"></div>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  
        <script src="../js/mui.pullToRefresh.js"></script>  
        <script src="../js/mui.pullToRefresh.material.js"></script>  
        <script>  
            var id='';  
            mui.init();  
            (function($) {  
                //阻尼系数  
                var deceleration = mui.os.ios?0.003:0.0009;  
                $('.mui-scroll-wrapper').scroll({  
                    bounce: false,  
                    indicators: true, //是否显示滚动条  
                    deceleration:deceleration  
                });  
                window.addEventListener('newsId',function(event){  
                    id =event.detail.id;  

                })  
                $.ready(function() {  
                    loaddatelist.usershoptype(id, function(rs) {  
                        var ll=rs.length,mylist='',aa='',mlist='',mylenght;  
                        for(i=1;i<=ll;i++){  
                            if(i<=1){  
                                aa+='<a class="mui-control-item mui-active" href="#item'+i+'mobile">'+rs[i-1]['title']+'</a>';  
                                mylist+='<div id="item'+i+'mobile" class="mui-slider-item mui-control-content mui-active"><div id="scroll'+i+'" class="mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-view">';  
                            }else{  
                                aa+='<a class="mui-control-item" href="#item'+i+'mobile">'+rs[i-1]['title']+'</a>';  
                                mylist+='<div id="item'+i+'mobile" class="mui-slider-item mui-control-content"><div id="scroll'+i+'" class="mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-view">';  
                            }  
                            mlist=rs[i-1]["plist"];  
                            mylenght=mlist.length;  
                            for(ii=0;ii<mylenght;ii++){   
                                mylist+='<li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="'+mlist[ii]['picurl']+'"><div class="mui-media-body">'+mlist[ii]['title']+'<p class="mui-ellipsis">'+mlist[ii]['title']+'</p></div></a></li>';  
                            }  
                            mylist+='</ul></div></div></div>';  
                        }  
                        document.getElementById("toplist").innerHTML=aa;  
                        document.getElementById("mylistall").innerHTML=mylist;  
                        alert(mylist);  
                        //循环初始化所有下拉刷新，上拉加载。  
                        $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                            $(pullRefreshEl).pullToRefresh({  
                                down: {  
                                    callback: function() {  
                                        var self = this;  
                                        setTimeout(function() {  
                                            var ul = self.element.querySelector('.mui-table-view');  
                                            ul.insertBefore(createFragment(ul, index, 15, true), ul.firstChild);  
                                            self.endPullDownToRefresh();  
                                        }, 1000);  
                                    }  
                                },  
                                up: {  
                                    callback: function() {  
                                        var self = this;  
                                        setTimeout(function() {  
                                            var ul = self.element.querySelector('.mui-table-view');  
                                            ul.appendChild(createFragment(ul, index, 15));  
                                            self.endPullUpToRefresh();  
                                        }, 1000);  
                                    }  
                                }  
                            });  
                        });  
                    });  
                    mui('#toplist').on('tap', 'a', function(e) {  
                        var href=document.body.querySelector('#toplist a').href;  
                        //alert(href);  
                    });  
                    var createFragment = function(ul, index, count, reverse) {  
                        var length = ul.querySelectorAll('li').length;  
                        var fragment = document.createDocumentFragment();  
                        var li;  
                        for (var i = 0; i < count; i++) {  
                            li = document.createElement('li');  
                            li.className = 'mui-table-view-cell';  
                            //li.innerHTML = '第' + (index + 1) + '个选项卡子项=====-' + (length + (reverse ? (count - i) : (i + 1)));  
                            li.innerHTML='<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="http://www.360meimei.com/Public/images/no_logo.png"><div class="mui-media-body">幸福<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div></a>';  
                            fragment.appendChild(li);  
                        }  
                        return fragment;  
                    };  
                });  
            })(mui);  
        </script>  
    </body>  

</html>

页面做的比较糙 大家多见谅 看大家发的比较少 就算是抛砖引玉了

首页

具体的大家下了自己看吧 有什么问题留言