小程序開(kāi)發(fā)實(shí)戰(zhàn)和一些常見(jiàn)問(wèn)題解決思路分析

張雷

合肥市市場(chǎng)監(jiān)管綜合行政執(zhí)法支隊(duì) 安徽 合肥 230001

引言

筆者開(kāi)發(fā)“危險(xiǎn)求助”小程序的動(dòng)因：在一些陌生環(huán)境里，我們難免會(huì)遇到一些不可測(cè)的風(fēng)險(xiǎn)，曾經(jīng)一度在媒體上引起廣泛關(guān)注的“順風(fēng)車女生遇害”、“貨拉拉跳車事件”等，讓我們?cè)谕葱闹啵蚕肽茏鲂┦裁矗瑏?lái)幫助大家在遇到潛在危險(xiǎn)的時(shí)候，能快速把信息傳遞給身邊信任的人，多一份獲救的希望，也多一份安全感。因此有了這款“危險(xiǎn)求助”小程序的誕生。本文通過(guò)這款小程序的開(kāi)發(fā)框架和一些開(kāi)發(fā)過(guò)程中的踩坑經(jīng)驗(yàn)，來(lái)介紹一下我在小程序開(kāi)發(fā)中總結(jié)的經(jīng)驗(yàn)和教訓(xùn)。

1 小程序的功能和結(jié)構(gòu)

小程序的開(kāi)發(fā)環(huán)境經(jīng)過(guò)數(shù)年的迭代，現(xiàn)在的成熟度已經(jīng)足夠滿足基礎(chǔ)需求，界面也比較友好。官方給出了豐富的開(kāi)發(fā)工具、組件、API、擴(kuò)展工具等，甚至還提供了一套完備的設(shè)計(jì)指南，小規(guī)模的開(kāi)發(fā)者完全可以使用官方提供的一系列工具直接進(jìn)行開(kāi)發(fā)。

我們可以從微信開(kāi)放文檔（https://developers.weixin.qq.com/miniprogram/dev/framework/）里，下載微信開(kāi)發(fā)工具Wechat_devtools，當(dāng)前最新版本是1.05.2103200（158MB），在微信公眾平臺(tái)官網(wǎng)首頁(yè)（mp.weixin.qq.com）點(diǎn)擊右上角的“立即注冊(cè)”按鈕注冊(cè)好自己的開(kāi)發(fā)者信息，完成綁定后，即可進(jìn)行開(kāi)發(fā)。開(kāi)發(fā)界面如下圖所示：

小程序用Java Script語(yǔ)言、XML、CSS語(yǔ)言編寫程序代碼，寫小程序代碼幾乎與Web前端開(kāi)發(fā)完全一樣，有經(jīng)驗(yàn)的Web前端程序員上手小程序開(kāi)發(fā)幾乎沒(méi)有技術(shù)門檻。不同的是，小程序并不是標(biāo)準(zhǔn)的H5+CSS3+JavaScript架構(gòu)，它和Web架構(gòu)基于的W3C規(guī)范沒(méi)有關(guān)系，小程序使用的是騰訊重新定義、微信自有的技術(shù)規(guī)范和架構(gòu)。

在圖1中我們可以看到：開(kāi)發(fā)工具主界面分為四個(gè)區(qū)域：標(biāo)題菜單欄、導(dǎo)航按鈕、模擬器和主操作區(qū)。這個(gè)布局和Chrome開(kāi)發(fā)者工具非常相似。

圖1 小程序開(kāi)發(fā)界面

導(dǎo)航按鈕于菜單的下面，用于小程序的編輯模式和調(diào)試模式的切換、代碼的編譯、后臺(tái)和前臺(tái)模式的切換及項(xiàng)目管理等。

模擬器窗口是一個(gè)頁(yè)面瀏覽器，會(huì)實(shí)時(shí)顯示頁(yè)面狀態(tài)，供我們操作和調(diào)試。

主操作區(qū)位于開(kāi)發(fā)界面右下方最大面積,會(huì)顯示小程序的目錄樹(shù)和代碼編輯區(qū)域，目錄樹(shù)用于小程序的文件管理，我們的代碼編寫工作需要在代碼編輯區(qū)域完成。

一個(gè)小程序包含一個(gè)描述整體程序的主體部分（根目錄）和一組或者幾組描述頁(yè)面的page文件夾。

小程序的主體部分位于源代碼文件夾的根目錄下面，通常由三個(gè)文件構(gòu)成：app.js、app.json和app.wxss，這三個(gè)文件是小程序的架構(gòu)文件，不能改名。

小程序的每個(gè)頁(yè)面分別由四個(gè)文件組成［pageName］.js、［pageName］.json、［pageName］.wxml、［pageName］.wxss。同一個(gè)頁(yè)面，四個(gè)文件的路徑和文件名必須相同，否則小程序在調(diào)用和處理文件時(shí)會(huì)無(wú)法識(shí)別[1]。

2 開(kāi)發(fā)中遇到的問(wèn)題及解決方案

2.1 經(jīng)緯度漂移

開(kāi)發(fā)中，首先遇到的問(wèn)題就是定位不準(zhǔn)。用真機(jī)測(cè)試時(shí)，手機(jī)顯示位置與實(shí)際地理位置差距很大，這在一款用來(lái)遇險(xiǎn)求救的軟件里，顯然是達(dá)不到實(shí)用目的的。而觀察源代碼，也看不出來(lái)哪里有邏輯錯(cuò)誤。代碼如下:

// pages/index/index.js

Page({

data: {

latitude: 31.86,

longitude: 117.27,

scale: 16

},

onTapSwitch() {

var that=this;

console.log(‘切換按鈕被按下。’);

wx.getLocation({

type: ‘wgs84’,

success: function (res) {

console.log(JSON.stringify(res))

that.latitude=res.latitude

that.longitude=res.longitude

console.log(‘當(dāng)前經(jīng)度’,that.longitude,’當(dāng)前緯度’,that.latitude);

var speed=res.speed

var accuracy=res.accuracy;

},

fail: function (res) {

console.log(‘fail’ + JSON.stringify(res))

}

})

}

})

在csdn和論壇里提問(wèn)，再查詢相關(guān)的地圖資料，才發(fā)現(xiàn)問(wèn)題出在wx.getLocation()函數(shù)里，type參數(shù)的設(shè)定值應(yīng)該用gcj02，而不是缺省的wgs84。

GCJ-02是國(guó)測(cè)局2002年發(fā)布的坐標(biāo)體系。又稱“火星坐標(biāo)”。修改后，定位精度大大提高，完全達(dá)到實(shí)時(shí)定位的基本需求。

這里還有要注意的一個(gè)語(yǔ)法點(diǎn)，在跨頁(yè)面?zhèn)鬟f經(jīng)緯度參數(shù)時(shí)，要使用setData()函數(shù)。起初，筆者隨手寫了一個(gè)that.latitude=res.latitude，雖然給當(dāng)前頁(yè)面的latitude直接賦值了，但無(wú)法渲染頁(yè)面，實(shí)際上，只有使用如下格式，才能正確地在頁(yè)面上顯示位置和給對(duì)應(yīng)參數(shù)賦值[2]。

that.setData({

latitude: res.latitude,

longitude: res.longitude

});

2.2 頁(yè)面跳轉(zhuǎn)的邏輯關(guān)系與用戶體驗(yàn)

本程序需要在啟動(dòng)時(shí)申請(qǐng)用戶的頭像和昵稱，以便在發(fā)送求助信息時(shí)傳遞給好友尋求幫助。從申請(qǐng)信息的login頁(yè)面到主程序的index頁(yè)面之間的跳轉(zhuǎn)關(guān)系，如果設(shè)計(jì)不合理，容易給用戶造成困擾。筆者起初的設(shè)計(jì)思路是：index頁(yè)面是進(jìn)入程序的第一頁(yè)面，如果該頁(yè)面onShow()時(shí)沒(méi)有拿到登錄人信息（全局變量為undefined），則跳轉(zhuǎn)login頁(yè)面，要求授權(quán)登錄。第一次設(shè)計(jì)跳轉(zhuǎn)關(guān)系時(shí)，筆者使用wx.navigateTo()函數(shù)到login頁(yè)面，但如果這樣的話，在用戶不點(diǎn)擊授權(quán)，而直接用android設(shè)備的返回按鈕時(shí)，按照函數(shù)機(jī)制，就會(huì)返回來(lái)時(shí)的頁(yè)面，即index頁(yè)面，然后，index頁(yè)面又要求在onShow()時(shí)判斷有沒(méi)有全局變量，沒(méi)有又跳回login頁(yè)面。循環(huán)往復(fù)，導(dǎo)致只有點(diǎn)擊界面右上角的關(guān)閉，才能關(guān)閉小程序。用戶體驗(yàn)不好。

通過(guò)觀察幾個(gè)頁(yè)面函數(shù)的邏輯關(guān)系，在新版里改為在index頁(yè)面里，用wx.redirectTo()跳到login頁(yè)面，此時(shí)index頁(yè)面出棧，頁(yè)面棧里只有l(wèi)ogin一個(gè)頁(yè)面，如果沒(méi)授權(quán)，用戶可以直接用設(shè)備的返回按鈕時(shí)，跳出小程序。用戶體驗(yàn)得到改善[3]。

3 后記

通過(guò)“危險(xiǎn)求助”小程序的實(shí)踐，我們既熟悉了小程序的開(kāi)發(fā)、發(fā)布流程，也為大家提供了一個(gè)面臨潛在危險(xiǎn)時(shí)，快速向身邊親人、朋友發(fā)送當(dāng)前位置同時(shí)傳遞呼救信息的可行方案。