hBuilder应用

3.关于我对hBuilder的一些使用

        起初我想做的是一个类似于微信的东西，我比较感兴趣这一方面，一个实现聊天功能的软件，后来因为需求我在我我的基础上改成了农业大数据收集app，根据用户需求我总结了我需要解决的几个问题。

            1）解决页面与页面之间的跳转问题，并进行传值。

            2）解决当我点击单选框的时候可以跳转到相应的页面，在该页面的设置的值可以传回来增加一个单选框，此单选框的属性为上个页面设置的值。

            3）在新页面进行数据采集，将采集结果全部输入后保存到本地，可以到展示界面进行采样数据的更改。

            4）语音识别，解放双手。

        通过这些问题我更深入地了解了hBuilder的使用;

       1）解决页面与页面之间的跳转问题，并进行传值。

                

mui.openWindow({
      url : 'contact.html',//填写跳转的页面。
      id :'contact.html',//与URL的内容相同就可以了。
      extras:{
            crData: crData
       }
 })

                 extras里面的内容就是传到另一个的值，首先需要对传的值进行定义，然后赋予一个值。

                

var crData = {
      "row":row,
      "col":col
};

                然后可以在跳转到的页面进行调用：

                    

mui.plusReady(function(){
      var self = plus.webview.currentWebview();
      crData = self.crData;
      console.log(JSON.stringify(crData));
});

       2）解决当我点击单选框的时候可以跳转到相应的页面，在该页面的设置的值可以传回来增加一个单选框，此单选框的属性为上个页面设置的值。

 

                这里我只需将将单选框属性checked="checked"这就是勾选的时候                   

 if(rdsObj[i].checked == true) {

       mui.openWindow({
              url: 'sjsr.html',
              id: 'sjsr.html',
              extras:{
                     crData: crData
              }
       })

 }

                跳转页面生成单选框的时候遇见了一个比较重要的问题，那就是我必须刷新返回的的页面才能增加，在解决页面刷新的时候我犯了一个比较重要思路上的问题，那就是：不是通过子页面跳转父页面然后刷新父页面，而是子页面关闭，然后刷新父页面。

                

               //主要页面刷新
                mui.init({
                       beforeback: function(){
                               //获得列表界面的webview
                                var address = plus.webview.getWebviewById('contact.html');
                               //触发列表界面的自定义事件（refresh）,从而进行数据刷新
                                mui.fire(address,'ok');
                              //返回true，继续页面关闭逻辑
                              return true;
                       }
             });
            mui.back();

                        在父页面：

                         

mui.init();
var crData = null;
window.addEventListener('ok',function(){
location.reload(); 

                        这样就可以实现关闭子页面，然后刷新父页面。至于如何增加单选框只需要将他的所有属性添加一遍就可以了。

            3）在新页面进行数据采集，将采集结果全部输入后保存到本地，可以到展示界面进行采样数据的更改。

                    这里我不多说，用了一个方法localStorage，这个方法比较可以将数据保存到本地，只要不删除就一直在本地具体应用:

                    存到本地：

                        var storage = window.localStorage;

                        storage.setItem("variety", varietyArr);

                    从本地取出来:

                        window.localStorage.getItem("variety");

            4）语音识别，解放双手。

                        起初，我找到了科大讯飞官网想要找到他的接口，以便实现语音识别功能，但是后来我发现他关于h5

的sdk已经下架了，所以无奈之下我又去找百度语音识别了，发现还是不行，最后没办法了。我想了很久，这样改有办法实现的啊，最后我在mui上找到了原生的语音识别功能，但是我并没有使用，我要的并不是只增加一个小喇叭这么随意，于是我找到了将他写出来的函数。

                           

<div class="mui-input-row" style="padding-top: 15px; padding-bottom: 15px;height: 70px;">
    <label>指标：</label>
    <input id="talkContent" class="variety mui-input-clear mui-input-speech-hei" 
    type="text" validate-rule="required" placeholder="请输入指标" />
</div>
<div style="text-align: center; padding:  10px 0;">
    <button id="Start" class="mui-btn-royal">开始录音</button>
</div>

                        //语音输入.

       var talkContent = document.getElementById("talkContent");
       document.addEventListener('plusready', function(){
           document.getElementById("Start").addEventListener("tap", startRecognize);
       });

       function startRecognize() {
           if(plus.os.name=='Android'&&navigator.userAgent.indexOf('StreamApp')>0){
               plus.nativeUI.toast('当前环境暂不支持语音识别插件');
               return;
           }
           if(plus.os.name=='Android') {
               var options = {};
               options.engine = 'iFly';
               options.punctuation = false;    // 是否需要标点符号 
               talkContent.value = "";
               console.log( "开始语音识别：" );
               plus.speech.startRecognize( options, function ( s ) {
                   console.log( s );
                   talkContent.value += s;
//                  talkContent.innerText += talkContent.textContent
                   console.log( talkContent.value );
//                  document.getElementById('talkContent').innerText = talkContent.textContent;
               }, function ( e ) {
                   console.log( "语音识别失败："+e.message );
               } );
           }
       }

                        他可以去掉那个句号方便数据存储。但是我并不满足我又增加了函数。

                        

var i=0;
var talkContent = document.getElementById("talkContent");
document.addEventListener('plusready', function(){
      document.getElementById("start").addEventListener("tap", startRecognize);
});


function startRecognize() {                    if(plus.os.name=='Android'&&navigator.userAgent.indexOf('StreamApp')>0){
          plus.nativeUI.toast('当前环境暂不支持语音识别插件');
          return;
     }
     if(plus.os.name=='Android') {
            var options = {};
            options.engine = 'iFly';
            options.punctuation = false;    // 是否需要标点符号 
            talkContent.value = "";
            console.log( "开始语音识别：" );
            plus.speech.startRecognize( options, function ( s ) {
            console.log( s );
            talkContent.value += s;
            console.log( talkContent.value );
            //如何执行下一个按钮
     function Click(){
            document.getElementById("clickMe").onclick();
     }
     setTimeout(Click,2000);
     setTimeout(startRecognize,3000);//重新输入。
     }, function ( e ) {
            console.log( "语音识别失败："+e.message );
     } );
   } 
}               

                        在这里我实现了彻底解放双手，点击语音输入输入一个指标，暂存进一个数组里面然后两秒之后刷新页面，清空输入框，三秒之后自动触发下一个事件，再次输入。知道所有数据输入完毕然后点击保存（这里并没有将保存的代码粘贴过来），将数组存进本地在另一个页面进行查看。