有這個(gè)想法是因?yàn)樽罱肓艘患拥目樱袊@氫OS簡(jiǎn)潔的同時(shí)發(fā)現(xiàn)系統(tǒng)也缺少了很多小工具。下第三方App又嫌麻煩，占空間不說(shuō)，每次都要從大堆的軟件列表里找App，著實(shí)不方便。遂謀生了用小程序自己做，這些有用，但是不常用的小工具。這里開(kāi)始做第一個(gè)小工具 -- 指南針。

項(xiàng)目已經(jīng)上線，大家可以在微信中搜索“迷你指南針”，或掃描下方二維碼查看體驗(yàn)（只能用攝像頭掃描二維碼，不可圖片識(shí)別二維碼）。

注意：本代碼開(kāi)源僅供學(xué)習(xí)交流。盜版必究?。?！

V1.0

第一版設(shè)想是用兩個(gè)頁(yè)面，第一個(gè)頁(yè)面用于提示校準(zhǔn)電子羅盤(pán)，頁(yè)面跳轉(zhuǎn)主頁(yè)面時(shí)使用redirectTo銷(xiāo)毀提示頁(yè)面。

先是用cdr做提示圖和指南針的表盤(pán)。

用微信開(kāi)發(fā)者工具創(chuàng)建項(xiàng)目。

項(xiàng)目結(jié)構(gòu)如下：

├───app.js				    // 小程序邏輯
├───app.json				// 小程序公共設(shè)置
├───app.wxss				// 小程序公共樣式
├───images					// 用來(lái)放置圖片文件
└───pages					// 項(xiàng)目頁(yè)面開(kāi)發(fā)目錄，里面的每個(gè)子目錄代表一個(gè)獨(dú)立頁(yè)面
    ├───index				// index 頁(yè)面目錄
    │   ├───index.js	    // index 頁(yè)面邏輯
    │  	├───index.wxml	    // index 頁(yè)面結(jié)構(gòu)
    │  	└───index.wxss	    // index 頁(yè)面樣式表
    └───compass				// logs 頁(yè)面目錄
    	├───compass.js			// logs 頁(yè)面邏輯
    	├───compass.json		// logs 頁(yè)面設(shè)置
    	├───compass.wxml		// logs 頁(yè)面結(jié)構(gòu)
    	└───compass.wxss		// logs 頁(yè)面樣式表

app.js在這里用不到，app.json聲明頁(yè)面，定義下小程序頂欄的樣式，app.wxss定義了所有頁(yè)面的背景。

index頁(yè)面從上到下依次是提示文字，提示圖，按鈕；

js使用redirectTo({})銷(xiāo)毀當(dāng)前頁(yè)面，跳轉(zhuǎn)到下級(jí)頁(yè)面。同時(shí)使用wx.getSystemInfoSync()接口獲取機(jī)器型號(hào)，和屏幕可用高度，對(duì)安卓和ios做了兼容處理：

var res = wx.getSystemInfoSync()
var h
if (res.model.substring(0,6) == 'iPhone') {
  h = res.screenHeight - 64;
} else {
  h = res.screenHeight - 71;
}
this.setData({
  height: h + "px",
  text: h/4 - 60 + "px",
  pic: h/2 - 100 + "px",
  btn: h - 60 + "px"
})

compass頁(yè)面從上到下依次為方向，角度，羅盤(pán)；

js除了使用了上面的高度處理之外，使用wx.onCompassChange() 調(diào)取電子羅盤(pán)Api獲取數(shù)據(jù)，給頁(yè)面賦值。

    // 羅盤(pán)Api
    var that = this;
    wx.onCompassChange(function (res) {
      var directions = res.direction.toFixed(2);
      that.setData({
        angle: directions,
        rotate: 360 - directions,
        direction: check(directions)
      })
    })
    // 判斷文字
    function check(i){
      if(22.5<i && i<67.5){
        return '東北'
      }else if(67.5<i && i<112.5){
        return '正東'
      }else if(112.5<i && i<157.5){
        return '東南'
      }else if(157.5<i && i<202.5){
        return '正南'
      }else if(202.5<i && i<247.5){
        return '西南'
      }else if(247.5<i && i<292.5){
        return '正西'
      }else if(292.5<i && i<337.5){
        return '西北'
      }else{
        return '正北'
      }
    } 

頁(yè)面的指南針旋轉(zhuǎn)得益于小程序的數(shù)據(jù)驅(qū)動(dòng)，使用style的內(nèi)聯(lián)樣式放在頁(yè)面中。

<image src="../../images/compass.png" style="transform: rotate({{rotate}}deg);"></image>

V1.1

1，屏幕兼容性修復(fù)

在使用自己的設(shè)備調(diào)試頁(yè)面高度是剛剛好鋪滿(mǎn)屏幕的，但是后來(lái)發(fā)現(xiàn)安卓的碎片化真的太嚴(yán)重，有些機(jī)型下面依然會(huì)有難看的白條。遂找到另外一種方法：

平時(shí)我們?cè)谔幚頌g覽器頁(yè)面常用height: 100%; 來(lái)讓頁(yè)面鋪滿(mǎn)屏幕，其實(shí)小程序也是可以使用的，雖然小程序宣稱(chēng)沒(méi)有Dom，不能直接操作Dom，但是切到調(diào)試頁(yè)面的Wxml選項(xiàng)卡查看頁(yè)面結(jié)構(gòu)會(huì)發(fā)現(xiàn)小程序的頁(yè)面包裹在標(biāo)簽中。這里倒是和HTML的很像嘛。嘗試在app.wxss中添加page{height: 100%}，頁(yè)面成功鋪滿(mǎn)屏幕。這樣就不需要區(qū)分機(jī)型了，簡(jiǎn)單省事。

/**app.wxss**/
page {
  height:100%;
  background-color: #011b28;
}

2，硬件確認(rèn)提醒

雖然電子羅盤(pán)在手機(jī)上基本得到了普及，但是在一些老舊機(jī)型上依然沒(méi)有，這樣小程序就不能用了，所以這里對(duì)沒(méi)有電子羅盤(pán)的機(jī)型做了處理，當(dāng)獲取到的羅盤(pán)數(shù)據(jù)為undefined時(shí)彈窗提醒用戶(hù)。實(shí)際測(cè)試發(fā)現(xiàn)如果手機(jī)沒(méi)有電子羅盤(pán)，代碼不會(huì)執(zhí)行wx.onCompassChange()，而使用wx.startCompass()的話，不管有沒(méi)有電子羅盤(pán)都會(huì)走成功的回調(diào)函數(shù)。

最后解決方案為，給方向和度數(shù)附一個(gè)初始值，如果手機(jī)有電子羅盤(pán)就會(huì)修正這些值，否則系統(tǒng)獲取不到電子羅盤(pán)數(shù)據(jù)這個(gè)數(shù)值就一直是原始值。通過(guò)這樣的方法我們可以間接知道用戶(hù)手機(jī)是否支持電子羅盤(pán)。從而達(dá)到提醒用戶(hù)的目的。

// 判斷手機(jī)是否有陀旋儀
// 外部檢測(cè)，如果沒(méi)有陀旋儀數(shù)據(jù)，代碼不會(huì)進(jìn)入wx.onCompassChange
// 必須使用setsetTimeout包裹代碼，否則會(huì)在更新電子羅盤(pán)數(shù)據(jù)前執(zhí)行彈窗
// 部分手機(jī)電子羅盤(pán)數(shù)據(jù)調(diào)用過(guò)慢，這里給兩秒反應(yīng)時(shí)間
setTimeout(function(){
	if(that.data.direction == '--' && that.data.angle == '--'){
		wx.showToast({
			title: '您的手機(jī)沒(méi)有電子羅盤(pán)或被禁用',
			icon: 'loading',
			duration: 5000,
			mask: true
		})
	}
},2000)

V1.2

1，加入分享功能

可能大家都會(huì)遇到這樣的場(chǎng)景：和朋友出去玩，你早早到了約定的地方，然后發(fā)微信問(wèn)你的朋友，他回你找不到路了。你告訴怎么怎么走，但是他說(shuō)我不知道北??？！這時(shí)你就可以?xún)?yōu)雅的打開(kāi)小程序，分享給你的朋友，讓他從此再也不會(huì)找不著北！

2，數(shù)據(jù)取整

之前版本取到指南針數(shù)據(jù)為保留兩位小數(shù)，但是太過(guò)精確會(huì)導(dǎo)致指針轉(zhuǎn)動(dòng)太快，給人不舒服的感覺(jué)，所以調(diào)整為四舍五入，取整數(shù)處理。上方角度數(shù)據(jù)依然保留兩位小數(shù)。

3，角度調(diào)整

之前版本是把360度分成八大方向，每個(gè)45度。這里修改為四大主方向?yàn)?0度，偏方向?yàn)?0度。

V1.3

加入"不再提醒"按鈕，用戶(hù)可選擇永久關(guān)閉提示頁(yè)面。

同時(shí)對(duì)提示頁(yè)面布局進(jìn)行調(diào)整，放棄之前使用的js獲取系統(tǒng)屏幕寬高的處理方式，使用純css，提高渲染效率。

V1.4

將頁(yè)面顏色全部數(shù)據(jù)化，添加主題更換按鈕控制頁(yè)面各部分的顏色。增加彈窗做版本更新提醒和校準(zhǔn)提醒。

坑：小程序從本地獲取數(shù)據(jù)，如果該數(shù)據(jù)不存在，將返回空，但是此時(shí)空值==0為true，建議使用===來(lái)判斷，防止此類(lèi)事情發(fā)生。

 

源碼地址：https://github.com/Anthony0416/MinApp-Compass

源碼下載：MinApp-Compass-master.zip