MUI開發記錄_ZenDei技術網路在線

MUI開發記錄

-Advertisement-

最近很久沒有更新博客了，因為一直在學習前端h5 手機app的開發。曾經一度覺得自己css和js學得不錯，進入到前端領域後才發現水很深~，寫代碼時HBuilder和VS混用，HBuilder的快捷鍵和代碼提示以及真機調試方便，但是錯誤提示和代碼格式化是硬傷，VS的前端報錯提示很智能，代碼格式化很順暢， ...

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

HBuilder使用安卓模擬器

安卓模擬器有很多，我這裡以夜神模擬器為例。使用安卓夜神模擬器來運行手機app的時候，先要配置HUuilder，配置方式：HBuilder的工具--》選項--》運行--》設置Web伺服器--》HBuilder--》第三方Android模擬器埠：將此處的埠改為62001。因為夜神模擬器的埠就是62001。

條件允許的情況下，建議直接真機調試，快很多。

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

有時候經常出現HBuilder和夜神模擬器都啟動了，建立了鏈接，但是檢測不到夜神模擬器的情況。

1、我們可以試著點擊一下夜神模擬器界面，然後再在HBuilder中打開一個頁面

2、如果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

HBuilder控制台不顯示日誌

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

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

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

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

持續更新中......

您的分享是我們最大的動力!