MUI開發大全

時間 2019-11-09

標籤 mui 開發大全简体版

原文原文鏈接

最近好久沒有更新博客了，由於一直在學習前端h5 手機app的開發。曾經一度以爲本身css和js學得不錯，進入到前端領域後才發現水很深~，寫代碼時HBuilder和VS混用，HBuilder的快捷鍵和代碼提示以及真機調試方便，可是錯誤提示和代碼格式化是硬傷，VS的前端報錯提示很智能，代碼格式化很順暢，將兩者的優勢集合起來。如今在用MUI作app開發，就把工做中用到的以及遇到的坑都一一記錄下來，待項目完工，再回過頭來看一下......
javascript

常見問題

固定定位在底部的輸入框點擊輸入時被鍵盤蓋住了，總體沒有上移

雲端生成ios越獄包不能使用apns離線推送功能

js知識充電

if語句只寫一個參數是什麼意思

要知道if裏面的返回值是true或是false，那麼只要括號裏隨便一個數均可以，
a=0，那麼if條件就是false了
布爾值，javascript中如下值會被轉換爲false

false
undefined
null
0
-0
NaN
""
''

js中 o = o || {};是什麼意思

o = o || {} 表示：若是o爲null或undefined，則將o初始化空對象（即{}），不然o不變。目的是防止o爲null或未定義的錯誤。其中：||表示或操做，第一個條件爲真，則結果爲真而不須要執行第二個條件；不然執行第二個條件，等價於如下代碼：

if(o) o = o; else o = {};

HBuilder使用安卓模擬器

安卓模擬器有不少，我這裏以夜神模擬器爲例。使用安卓夜神模擬器來運行手機app的時候，先要配置HUuilder，配置方式：HBuilder的工具--》選項--》運行--》設置Web服務器--》HBuilder--》第三方Android模擬器端口：將此處的端口改成62001。由於夜神模擬器的端口就是62001。

條件容許的狀況下，建議直接真機調試，快不少。

HBuilder檢測不到夜神模擬器 -- 解決辦法

有時候常常出現HBuilder和夜神模擬器都啓動了，創建了連接，可是檢測不到夜神模擬器的狀況。

一、咱們能夠試着點擊一下夜神模擬器界面，而後再在HBuilder中打開一個頁面

二、若是1仍是不行，打開cmd執行命令

打開HBuilder的安裝目錄，進入到tools\adbs目錄中，例：C:\Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs

cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs
cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs
cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs

app首頁底部導航

參考：tab選項卡示例教程-基於subnview模式的原生tab（含底部凸起大圖標）

這個官網提供了具體例子，下載地址：https://github.com/dcloudio/mui/tree/master/examples/nativeTab

我作的界面Demo

我的感受：雖然快是快了，可是有一個嚴重的缺陷，那就是底部沒法動態配置。因此我最終拋棄了這種方式，由於界面全部的菜單模塊都是能夠在PC後臺進行配置的，我最終用vue.js來作數據綁定。

注意首頁應用了響應式佈局，熟悉rem、em、px之間的區別。引入了第三方js：flexible.js

快速申請ios打包ipa證書.p12和.mobileprovision（無需Mac）

http://ask.dcloud.net.cn/article/1257

安裝後每次打開都出現請將Hbuilder移至其餘盤符以及C盤配置文件不可寫入的提示

右鍵——管理員權限運行

或者進行以下配置：

在mui-bar mui-bar-tab子頁面的中使用echarts，老是有時顯示有時不顯示

必須在頁面中指定報表容器的寬、高，或者最小寬高，在css樣式文件中指定寬高有時會無效。

或者你添加窗體的大小變動監聽事件，重繪報表，以下所示：

var lineChart = echarts.init(charts);
lineChart.setOption(chartOption);
window.onresize = function () {
   lineChart.resize();
}

補充：若是是底部選項卡切換的時候，默認會加載第一頁，所以上面的方法有效。
可是在切換到第2個Tab時，一樣會出現不顯示或者黑屏的現象，須要在mui.plusReady中作以下處理：

mui.plusReady(function() {
 var nw = plus.webview.getWebviewById("pages/energy.html"); // 這裏pages/energy.html是默認的選項卡id
 nw.addEventListener("show", function(e) {
 lineChart.resize();
 }, false);
 });

此問題困擾了許久。

app消息推送

個推：http://www.getui.com/cn/index.html

參考教程：http://m.blog.csdn.net/tiger_gy/article/details/72922215

手寫簽名

源碼地址：https://github.com/xuyongsky123/canvasSignature.git

源碼地址：https://github.com/yulusjjc/sign

HBuilder控制檯不顯示日誌

我用的魅族手機，進入工程模式：*#*#3646633#*#*，開啓調試模式日誌，關於其它手機能夠網上查找進入工程模式的方式。

如何用Fiddler對Android應用進行抓包

對app中的ajax請求進行抓包，配置教程以下：

http://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html

mui 搜索框在pad上須要點擊兩次才能彈出鍵盤

在mui-search外面包含了mui-inner-wrap以後就會出現這個bug。別的控件不知道有沒有這個現象，我用到的就是這個。原理應該是mui-placehold絕對定位以後在iOS端產生事件穿透致使的。
解決辦法：
.mui-search .mui-placeholder {
pointer-events: none;
}

持續更新中......