這篇文章主要介紹小程序開發(fā)中遇到的問(wèn)題有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
目前成都創(chuàng)新互聯(lián)公司已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、舟山網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
小程序面試題
1、bindtap和catchtap的區(qū)別是什么?
bind事件綁定不會(huì)阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡
2、Js數(shù)組轉(zhuǎn)成換字符串,強(qiáng)制轉(zhuǎn)換成整數(shù)及轉(zhuǎn)換成浮點(diǎn)數(shù)的函數(shù)分別是什么?
js提供了parseInt()和parseFloat()兩個(gè)轉(zhuǎn)換函數(shù)。前者把值轉(zhuǎn)換成整數(shù),后者把值轉(zhuǎn)換成浮點(diǎn)數(shù)。只有對(duì)String類型調(diào)用這些方法,這兩個(gè)函數(shù)才能正確運(yùn)行;對(duì)其他類型返回的都是NaN(Not a Number)。
相關(guān)免費(fèi)學(xué)習(xí)推薦:微信小程序開發(fā)
1、轉(zhuǎn)換函數(shù):
在 判斷字符串是否是數(shù)字值前,parseInt()和parseFloat()都會(huì)仔細(xì)分析該字符串。parseInt()方法首先查看位置0處的 字符,判斷它是否是個(gè)有效數(shù)字;如果不是,該方法將返回NaN,不再繼續(xù)執(zhí)行其他操作。但如果該字符是有效數(shù)字,該方法將查看位置1處的字符,進(jìn)行同樣的 測(cè)試。這一過(guò)程將持續(xù)到發(fā)現(xiàn)非有效數(shù)字的字符為止,此時(shí)parseInt()將把該字符之前的字符串轉(zhuǎn)換成數(shù)字。
parseInt("1234blue"); //returns 1234 parseInt("0xA"); //returns 10 parseInt("22.5"); //returns 22 parseInt("blue"); //returns NaN
2. 強(qiáng)制類型轉(zhuǎn)換
還可使用強(qiáng)制類型轉(zhuǎn)換(type casting)處理轉(zhuǎn)換值的類型。使用強(qiáng)制類型轉(zhuǎn)換可以訪問(wèn)特定的值,即使它是另一種類型的。
ECMAScript中可用的3種強(qiáng)制類型轉(zhuǎn)換如下:
Boolean(value)——把給定的值轉(zhuǎn)換成Boolean型;
Number(value)——把給定的值轉(zhuǎn)換成數(shù)字(可以是整數(shù)或浮點(diǎn)數(shù));
String(value)——把給定的值轉(zhuǎn)換成字符串。
3. 利用js變量弱類型轉(zhuǎn)換
舉個(gè)小例子,一看,就會(huì)明白了。
<script> var str= '012.345 '; var x = str-0; x = x*1; </script>
上例利用了js的弱類型的特點(diǎn),只進(jìn)行了算術(shù)運(yùn)算,實(shí)現(xiàn)了字符串到數(shù)字的類型轉(zhuǎn)換,不過(guò)這個(gè)方法還是不推薦的。
3、簡(jiǎn)單描述下微信小程序的相關(guān)文件類型。
小程序:pages ——index:index.js(頁(yè)面邏輯) /index.wxml (頁(yè)面結(jié)構(gòu))/index.wxss (頁(yè)面樣式表) / index.json (頁(yè)面配置)
App.js 小程序邏輯
App.json 小程序公共設(shè)置
App.wxss 小程序公共樣式表
4、小程序有哪些參數(shù)傳值的方法?
1、設(shè)置id的方法標(biāo)識(shí)跳轉(zhuǎn)后傳遞的參數(shù)值;
2、通過(guò)使用data - xxxx 的方法來(lái)標(biāo)識(shí)要傳遞的值
微信小程序設(shè)置id的方法標(biāo)識(shí)來(lái)傳值
在要跳轉(zhuǎn)的item處,設(shè)置一個(gè)id并給當(dāng)前的id賦值上對(duì)應(yīng)的key值,比如一部電影的id(后面帶著id去下一個(gè)頁(yè)面查詢,詳細(xì)信息)如:
后我們?cè)趈s的bindtap的響應(yīng)事件中獲取,并傳遞到下一個(gè)界面中;
獲取到id傳的值
通過(guò)e.currentTarget.id;獲取設(shè)置的id值,并通過(guò)設(shè)置全局對(duì)象的方式來(lái)傳遞數(shù)值,
獲取全局對(duì)象 var app=getApp(); //設(shè)置全局的請(qǐng)求訪問(wèn)傳遞的參數(shù) app.requestDetailid=id;
提示:其實(shí)我們也可以在,wxml中查看到我們?cè)O(shè)置的每一個(gè)item的id值
通過(guò)使用data - xxxx 的方法標(biāo)識(shí)來(lái)傳值
通過(guò)使用data - xxxx 的方法標(biāo)識(shí)來(lái)傳值,xxxx可以自定義取名 比如data-key等等都可以。
如何獲取data-xxxx傳遞的值?
在js的bindtap的響應(yīng)事件中:
通過(guò)數(shù)據(jù)解析一層層找到數(shù)據(jù),var id=e.target.dataset.id(根據(jù)你的data-id的取名)
微信小程序如何跨頁(yè)面獲取值?
依據(jù)上面的方式設(shè)置要傳遞的值,頁(yè)面跳轉(zhuǎn)后,我們就需要在下一個(gè)頁(yè)面拿到傳遞的數(shù)據(jù)(這個(gè)數(shù)據(jù)在傳遞前,就已經(jīng)被設(shè)置成全局變量)
在跳轉(zhuǎn)后的js頁(yè)面,接收傳遞過(guò)來(lái)的數(shù)據(jù)detail.js
同樣通過(guò)全局額方式取值出來(lái),(即和app.js中取某個(gè)變量的值是一樣的)
var movieid=getApp().MovieDetailid;
console.log(movieid);
5、簡(jiǎn)述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區(qū)別?
微信小程序 跳轉(zhuǎn)頁(yè)面
小程序頁(yè)面有2種跳轉(zhuǎn),可以在wxml頁(yè)面或者js中:
1,在wxml頁(yè)面中:
<navigator url="../index/index">跳轉(zhuǎn)到新頁(yè)面</navigator> <navigator url="../index/index" open-type="redirect">在當(dāng)前頁(yè)打開</navigator> <navigator url="../index/index" open-type="switchTab">切換到首頁(yè)Tab</navigator>
2,在js頁(yè)面中:
【注意】此處注意兩個(gè)關(guān)鍵詞 “應(yīng)用內(nèi)的頁(yè)面” 和 “tabBar頁(yè)面”。 app.json文件中tabBar中注冊(cè)過(guò)的tab頁(yè),即為“tabBar頁(yè)面”,非tabBar中注冊(cè)占用的頁(yè)面即為“應(yīng)用內(nèi)的頁(yè)面” 。 如下圖:home頁(yè)面為“應(yīng)用內(nèi)的頁(yè)面”,index和logs頁(yè)面則為 “tabBar頁(yè)面”。
3,如果上述跳轉(zhuǎn)遇到跳轉(zhuǎn)失敗或無(wú)效的問(wèn)題,請(qǐng)?jiān)L問(wèn)下面鏈接:
wx.navigateTo/wx.redirectTo 無(wú)效
6、如果需要用戶授權(quán),用戶選擇拒絕授權(quán),此時(shí)應(yīng)該如何處理?
在微信小程序開發(fā)時(shí),當(dāng)我們調(diào)用API wx.getUserInfo(OBJECT) 時(shí),需要用戶授權(quán)。但如果用戶拒絕授權(quán),我們?nèi)绾渭嫒萦脩艟芙^授權(quán)狀態(tài),擁有更好的用戶體驗(yàn)?zāi)兀?/p>
先看看這個(gè)接口的官方文檔:
wx.getUserInfo(OBJECT)
獲取用戶信息,需要先調(diào)用 wx.login 接口。
OBJECT參數(shù)說(shuō)明:
參數(shù)名 | 類型 | 必填 | 說(shuō)明 |
withCredentials | Boolean | 否 | 是否帶上登錄態(tài)信息 |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) |
1. tip: wx.getUserInfo 接口需要用戶授權(quán),請(qǐng)兼容用戶拒絕授權(quán)的場(chǎng)景。
我們就是要在用戶點(diǎn)擊拒絕的時(shí)候,彈出提示框,提示用戶以提升用戶體驗(yàn)。像下面這樣的。
用具體代碼實(shí)現(xiàn)就是,將彈窗寫在 wx.getUserInfo 的fail回調(diào)函數(shù)中,像下面這樣:
wx.getUserInfo({ success: function (resuser) { console.log(success) }, fail: function () {// 調(diào)用微信彈窗接口 wx.showModal({ title: '警告', content: '您點(diǎn)擊了拒絕授權(quán),將無(wú)法正常使用******的功能體驗(yàn)。請(qǐng)10分鐘后再次點(diǎn)擊授權(quán),或者刪除小程序重新進(jìn)入。', success: function (res) { if (res.confirm) { console.log('用戶點(diǎn)擊確定') } } }) } })
這樣用戶就獲得了提示信息,但此時(shí),用戶還是停留在頁(yè)面的,如果某些展示信息,還是給要給用戶展示的,只是在進(jìn)行某些操作的時(shí)候要對(duì)授權(quán)進(jìn)行驗(yàn)證的話,那就得繼續(xù)修改我們的代碼,保存用戶的登錄態(tài),在其他地方做驗(yàn)證使用。
第一種思路:
保存登錄態(tài)這里是這樣的,將用戶的登錄信息傳給后臺(tái),后臺(tái)保存用戶信息,同時(shí)用 open_id 在后臺(tái)換取一個(gè)SessionId 用換取的這個(gè)SessionId 存在緩存,做為登錄態(tài)驗(yàn)證。
wx.getUserInfo({ success: function (resuser) { let userInfo = resuser.userInfo that.healthApi.login(code, userInfo).then(logindata => { // 這里將微信的請(qǐng)求封裝成Promiese 風(fēng)格 if (logindata.code === 0) { var sessionId = logindata.data// 調(diào)用微信wechat.setStorage將換回來(lái)的 SessionId 存在本地緩存 that.wechat.setStorage('sessionId', sessionId).then(() => { that.globalData.userInfo = userInfo typeof cb == "function" && cb(that.globalData.userInfo) }) } }) }, fail: function () { wx.showModal({ title: '警告', content: '您點(diǎn)擊了拒絕授權(quán),將無(wú)法正常使用*****的功能體驗(yàn)。請(qǐng)10分鐘后再次點(diǎn)擊授權(quán),或者刪除小程序重新進(jìn)入。', success: function (res) { if (res.confirm) { console.log('用戶點(diǎn)擊確定') } } }) } })
這樣我們將登錄態(tài)保存在了 SessionId 中,在每次登錄的時(shí)候我們只需要再調(diào)用一個(gè) 檢查 SessionId的接口就行,檢查不通過(guò)再調(diào)微信登錄接口。此處不做延伸了。
第二種思路:
在3.29微信小程序更新的版本中,加入了這樣一條屬性
withCredentials 字段基礎(chǔ)庫(kù)版本 1.1.0 開始支持,低版本需做兼容處理
這個(gè)字段的意思就是調(diào)用 wx.getUserInfo(OBJECT) 是否帶上 登錄態(tài) 的信息。
官方文檔是這樣解釋的:
withCredentials 字段基礎(chǔ)庫(kù)版本 1.1.0 開始支持,低版本需做兼容處理
注:當(dāng) withCredentials 為 true 時(shí),要求此前有調(diào)用過(guò) wx.login 且登錄態(tài)尚未過(guò)期,此時(shí)返回的數(shù)據(jù)會(huì)包含 encryptedData, iv 等敏感信息;當(dāng) withCredentials 為 false 時(shí),不要求有登錄態(tài),返回的數(shù)據(jù)不包含 encryptedData, iv 等敏感信息。
success返回參數(shù)說(shuō)明:
參數(shù) | 類型 | 說(shuō)明 |
userInfo | OBJECT | 用戶信息對(duì)象,不包含 openid 等敏感信息 |
rawData | String | 不包括敏感信息的原始數(shù)據(jù)字符串,用于計(jì)算簽名。 |
signature | String | 使用 sha1( rawData + sessionkey ) 得到字符串,用于校驗(yàn)用戶信息。 |
encryptedData | String | 包括敏感數(shù)據(jù)在內(nèi)的完整用戶信息的加密數(shù)據(jù),詳細(xì)見加密數(shù)據(jù)解密算法 |
iv | String | 加密算法的初始向量,詳細(xì)見加密數(shù)據(jù)解密算法 |
注:需要兼容微信低版本,向后兼容。
那么利用這個(gè)接口,我們可以直接拿到 登錄狀態(tài),在其他需要驗(yàn)證登錄的地方進(jìn)行提示,而在不需要授權(quán)的地方還可以讓用戶瀏覽小程序。
回到前面的問(wèn)題,在用戶點(diǎn)擊拒絕授權(quán)后,在某些操作時(shí)需要驗(yàn)證用戶是否授權(quán)過(guò),彈出交互信息,那么就利用上面的 SessionId或者 withCredentials登錄態(tài)進(jìn)行下面的操作:
applyIn: function applyIn() { if (wx.getStorageSync('sessionId')) { // 根據(jù)儲(chǔ)存的sessionId 進(jìn)行驗(yàn)證 wx.navigateTo({ url: 'familyDoctorApply/familyDoctorApply?Oid=' + this.data.params.Oid + '&title=' + this.data.params.title + '&serviceCity=' + this.data.array[this.data.index].name + '&productPrice=' + this.data.product.productPrice }); } else { wx.showModal({ title: '警告', content: '您點(diǎn)擊了拒絕授權(quán),無(wú)法使用此功能。', success: function (res) { if (res.confirm) { console.log('用戶點(diǎn)擊確定') } } }) }
效果像這樣:
這樣一個(gè)簡(jiǎn)單完整的登錄及授權(quán),登錄態(tài)保存等前端微信小程序解決方案就完成了,還可以繼續(xù)擴(kuò)展到登錄有效期,退出登錄,用戶權(quán)限等跟多擴(kuò)展的地方。
7、你平時(shí)封裝可以復(fù)用的方法嗎?你會(huì)把可以復(fù)用的方法寫在哪個(gè)文件里?
其實(shí)可以模擬一些框架的,比如bootsrap,寫個(gè)demo出來(lái),抽出css和js,js最好抽象成對(duì)象(構(gòu)造函數(shù))或者是帶參數(shù)的方法,然后你只要聲明對(duì)像,或者參數(shù)指定某個(gè)class或id,就可以了
寫在html文件里有什么優(yōu)點(diǎn)嗎?
獨(dú)立出來(lái)會(huì)有什么問(wèn)題嗎?尤其是載入頁(yè)面的時(shí)候,應(yīng)該會(huì)多發(fā)很多http請(qǐng)求吧,會(huì)不會(huì)造成加載變慢?
8、分析下小程序的優(yōu)劣勢(shì)?
小程序是在微信生態(tài)發(fā)展過(guò)程中新出現(xiàn)的一種應(yīng)用形態(tài),小程序的小,從某種程度上已經(jīng)說(shuō)明了它的體量不會(huì)很大,但是可以實(shí)現(xiàn)一些功能相對(duì)簡(jiǎn)單、交互相對(duì)簡(jiǎn)單的服務(wù)需求,同時(shí)解決了App長(zhǎng)期以來(lái)多平臺(tái)適配、多應(yīng)用市場(chǎng)分發(fā)、開發(fā)成本居高不下等諸多方面的問(wèn)題。所以小程序【密件】依靠微信平臺(tái)和自身“閱后即焚”的功能,獲得眾多年輕人的好評(píng)
優(yōu)勢(shì):
1)容易上手,只要之前有HTML+CSS+JS基礎(chǔ)知識(shí),寫小程序基本上沒有大問(wèn)題;當(dāng)然如果了解ES6+CSS3則完全可以編寫出即精簡(jiǎn)又動(dòng)感的小程序;
2)基本上不需要考慮兼容性問(wèn)題,只要微信可以正常運(yùn)行的機(jī)器,就可以運(yùn)行小程序;
3)基本組件庫(kù)已經(jīng)比較齊全:Toast,Loading框,Picker,定位及地圖,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的組件都有,而且使用也挺簡(jiǎn)單、方便;
4)發(fā)布、審核高效,基本上上午發(fā)布審核,下午就審核通過(guò),升級(jí)簡(jiǎn)單,而且支持灰度發(fā)布;
5 ) 微信官方提供使用人數(shù)、頻率等數(shù)據(jù)統(tǒng)計(jì),小程序js腳本執(zhí)行錯(cuò)誤日志;
6)開發(fā)文檔比較完善,開發(fā)社區(qū)比較活躍;
7)最近剛開放的牛x功能,新增webview組件,可以展示網(wǎng)頁(yè)啦,這個(gè)比較爽;
8)支持插件式開發(fā),一些基本功能可以開發(fā)成插件,供多個(gè)小程序調(diào)用;
劣勢(shì):
1)后臺(tái)調(diào)試麻煩,因?yàn)锳PI接口必須https請(qǐng)求,且公網(wǎng)地址,也就是說(shuō)后臺(tái)代碼必須發(fā)布到遠(yuǎn)程服務(wù)器上;當(dāng)然我們可以修改host進(jìn)行DNS映射把遠(yuǎn)程服務(wù)器轉(zhuǎn)到本地,或者開啟tomcat遠(yuǎn)程調(diào)試;不管怎么說(shuō)終歸調(diào)試比較麻煩。
2)前臺(tái)測(cè)試有諸多坑,最頭疼莫過(guò)于模擬器與真機(jī)顯示不一致(之前碰到一個(gè)案例,后續(xù)單獨(dú)講解)
3)真機(jī)測(cè)試,個(gè)別功能安卓和蘋果表現(xiàn)迥異,我們的小程序里有很多頁(yè)面有定位功能,模擬器和iphone定位瞬間完成,然而安卓手機(jī)就蛋疼了,老顯示“定位中...”要很久才能定位好。后來(lái)沒辦法只能優(yōu)化,減少定位次數(shù)。
4)native組件,展示很不好,比如textarea,不能在滾動(dòng)頁(yè)面出現(xiàn),而且至于頂層,經(jīng)常其它組件會(huì)被它遮擋,點(diǎn)擊其它組件時(shí),就進(jìn)入textarea輸入框;畫布組件也是如此;
5)頁(yè)面跳轉(zhuǎn)深度不能超過(guò)5個(gè)頁(yè)面,這個(gè)比較麻煩,有些復(fù)雜的頁(yè)面跳轉(zhuǎn)沒法實(shí)現(xiàn),不過(guò)太復(fù)雜的話也有悖小程序簡(jiǎn)單易用的原則啦;
6)小程序升級(jí)問(wèn)題,官方文檔說(shuō)會(huì)自動(dòng)更新,實(shí)際情況往往是要先把原來(lái)的小程序刪除掉,重新搜索添加,才能加載最新版本;
7)頁(yè)面渲染穩(wěn)定性有待提高,已經(jīng)好幾次出現(xiàn)部分用戶的頁(yè)面顯示異常,整個(gè)頁(yè)面被放大了好幾倍,先刪除原來(lái)小程序再添加回來(lái),如此重復(fù)好幾次,才能顯示正常;
8)js引用只能使用絕對(duì)路徑,很蛋疼;基于安全性及MINA框架實(shí)現(xiàn)原理,小程序中對(duì)js使用做了很多限制,不能使用:new Function,eval,Generator,不能操作cookie,不能操作DOM;
9)開發(fā)工具bug比較多且效率比較低,三天兩頭升級(jí),解決老問(wèn)題的同時(shí)又出現(xiàn)問(wèn)題;文件查找、資源定位、代碼編輯較eclipse有一定差距。經(jīng)常出現(xiàn)把a(bǔ).js當(dāng)做b.js來(lái)修改
9、設(shè)置值到頁(yè)面暫存區(qū)(即data)里面的方法有幾種?分別是什么?有什么區(qū)別?
1. 使用QueryString變量
QueryString是一種非常簡(jiǎn)單的傳值方式,他可以將傳送的值顯示在瀏覽器的地址欄中。如果是傳遞一個(gè)或多個(gè)安全性要求不高或是結(jié)構(gòu)簡(jiǎn)單的數(shù)值時(shí),可以使用這個(gè)方法。但是對(duì)于傳遞數(shù)組或?qū)ο蟮脑挘筒荒苡眠@個(gè)方法了。下面是一個(gè)例子:
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e) { string s_url; s_url = "b.aspx?name=" + Label1.Text; Response.Redirect(s_url); } b.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { Label2.Text = Request.QueryString["name"]; }
2. 使用Application 對(duì)象變量
Application對(duì)象的作用范圍是整個(gè)全局,也就是說(shuō)對(duì)所有用戶都有效。其常用的方法用Lock和UnLock。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e) { Application["name"] = Label1.Text; Server.Transfer("b.aspx"); } b.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { string name; Application.Lock(); name = Application["name"].ToString(); Application.UnLock(); }
3. 使用Session變量
想必這個(gè)肯定是大家使用中最常見的用法了,其操作與Application類似,作用于用戶個(gè)人,所以,過(guò)量的存儲(chǔ)會(huì)導(dǎo)致服務(wù)器內(nèi)存資源的耗盡。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e) { Session["name"] = Label.Text; } b.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { string name; name = Session["name"].ToString(); }
4. 使用Cookie對(duì)象變量
這個(gè)也是大家常使用的方法,與Session一樣,其是什對(duì)每一個(gè)用戶而言的,但是有個(gè)本質(zhì)的區(qū)別,即Cookie是存放在客戶端的,而session是存放在服務(wù)器端的。而且Cookie的使用要配合ASP.NET內(nèi)置對(duì)象Request來(lái)使用。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e) { HttpCookie cookie_name = new HttpCookie("name"); cookie_name.Value = Label1.Text; Reponse.AppendCookie(cookie_name); Server.Transfer("b.aspx"); } b.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { string name; name = Request.Cookie["name"].Value.ToString(); }
5. 使用Server.Transfer方法
這個(gè)才可以說(shuō)是面象對(duì)象開發(fā)所使用的方法,其使用Server.Transfer方法把流程從當(dāng)前頁(yè)面引導(dǎo)到另一個(gè)頁(yè)面中,新的頁(yè)面使用前一個(gè)頁(yè)面的應(yīng)答流,所以這個(gè)方法是完全面象對(duì)象的,簡(jiǎn)潔有效。
a.aspx的C#代碼
public string Name { get{ return Label1.Text;} } private void Button1_Click(object sender, System.EventArgs e) { Server.Transfer("b.aspx"); } b.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { a newWeb; //實(shí)例a窗體 newWeb = (source)Context.Handler; string name; name = newWeb.Name; }
微信小程序--data的賦值與取值
通過(guò)小程序官方文檔可知:
Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。其中的參數(shù)data用來(lái)設(shè)置初始數(shù)據(jù),WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data。
所以如果頁(yè)面需要顯示動(dòng)態(tài)數(shù)據(jù)必須要把數(shù)據(jù)更新到data中對(duì)應(yīng)的變量中。
頁(yè)面js文件中這么寫:
Page({ data: { message: 'Hello MINA!' } }) · wxml中這么寫: <view> {{ message }} </view>
如果該數(shù)據(jù)在操作過(guò)程中發(fā)生變化,需要將新數(shù)據(jù)重新綁定到該變量中,寫法如下:
function setData(){ var that = this; that.setData({ message: '新消息' }) }
如果想在js文件中使用data中的數(shù)據(jù)寫法如下:
function getData(){ var that = this; console.log(that.data.message) }
10、如何檢測(cè)用戶的微信版本是否支持某項(xiàng)功能?
第一期開放的接口,不是不能使用,而是無(wú)需檢測(cè),全部都是支持的。
只有后面最新開放的一些接口,才需要檢測(cè)是否支持。
目前開放的所有接口:
onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
onMenuShareQZone
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
chooseWXPay
openProductSpecificView
addCard
chooseCard
openCard
11、如何分包加載?分包加載的優(yōu)勢(shì)在哪?
分包加載的介紹
大部分小程序都會(huì)由某幾個(gè)功能組成,通常這幾個(gè)功能之間是獨(dú)立的,但會(huì)依賴一些公共的邏輯,并且這些功能通常會(huì)對(duì)應(yīng)某幾個(gè)獨(dú)立的頁(yè)面。那么小程序代碼的打包,大可不必一定要打成一個(gè),可以按照功能的劃分,拆分成幾個(gè)分包,當(dāng)需要用到某個(gè)功能時(shí),才加載這個(gè)功能對(duì)應(yīng)的分包。
對(duì)于用戶來(lái)說(shuō),小程序加載流程變成了:
1.首次啟動(dòng)時(shí),先下載小程序主包,顯示主包內(nèi)的頁(yè)面;
2.如果用戶進(jìn)入了某個(gè)分包的頁(yè)面,再下載這個(gè)對(duì)應(yīng)分包,下載完畢后,顯示分包的頁(yè)面。
采用分包加載,對(duì)開發(fā)者而言,能使小程序有更大的代碼體積,承載更多的功能與服務(wù);而對(duì)用戶而言,可以更快地打開小程序,同時(shí)在不影響啟動(dòng)速度前提下使用更多功能。
分包的劃分
在配置前首先需要開發(fā)者規(guī)劃下各個(gè)分包需要容納的內(nèi)容,我們建議開發(fā)者按照功能劃分的的原則,將同一個(gè)功能下的頁(yè)面和邏輯放置于同一個(gè)目錄下,對(duì)于一些跨功能之間公共邏輯,將其放置于主包下,這樣可以確保在分包引用這部分功能時(shí),這部分的邏輯一定存在。
在分包劃分時(shí),應(yīng)該注意以下事項(xiàng):
1.避免分包與分包之間引用上的耦合。因?yàn)榉职募虞d是由用戶操作觸發(fā)的,并不能確保某分包加載時(shí),另外一個(gè)分包就一定存在,這個(gè)時(shí)候可能會(huì)導(dǎo)致 JS 邏輯異常的情況,例如報(bào)「"xxx.js" is not defined」這樣的錯(cuò)誤;
2.一些公共用到的自定義組件,需要放在主包內(nèi)。
分包的配置
當(dāng)理清了分包的劃分后,就可以進(jìn)行分包的配置了,這一步并不復(fù)雜。
假設(shè)支持分包的小程序目錄結(jié)構(gòu)如下:
開發(fā)者通過(guò)在 app.json subPackages 字段聲明項(xiàng)目分包結(jié)構(gòu):
分包加載的低版本兼容問(wèn)題
微信 6.6.0 版本開始支持分包加載,而對(duì)于低于這個(gè)版本的客戶端,我們做了兼容處理,開發(fā)者不需要對(duì)老版本微信客戶端做兼容。對(duì)于老版本的客戶端,編譯后臺(tái)會(huì)將所有的分包打包成一個(gè)整包,老版本的客戶端依然按照整包的方式進(jìn)行加載。
所以在老版本的微信客戶端下,是依然采取整包加載的方式加載的,建議開發(fā)者盡量控制代碼包的大小。
目前小程序分包大小的限制:
整個(gè)小程序所有分包大小不超過(guò) 4M
單個(gè)分包/主包大小不能超過(guò) 2M
隨著時(shí)間推移,老版本覆蓋率降低,我們會(huì)考慮進(jìn)一步擴(kuò)大代碼包的大小。
12、在你開發(fā)小程序的過(guò)程中遇到過(guò)什么坑? 你是怎么解決的?
1.我們使用app.json文件來(lái)對(duì)微信小程序進(jìn)行全局配置,決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 的時(shí)候在pages中寫注釋的時(shí)候回報(bào)錯(cuò)。
例如:
{ "pages":[ //這是首頁(yè)面 "pages/welcome/welcome" ]}
此時(shí)就會(huì)報(bào)錯(cuò)
2.在json文件中沒有寫內(nèi)容的時(shí)候也要加一對(duì)大括號(hào){ },不然的話也會(huì)報(bào)錯(cuò)
3. ①在開發(fā)微信小程序的時(shí)候,我們使用app.json文件來(lái)對(duì)微信小程序進(jìn)行全局配置,決定頁(yè)面文件的路徑,窗口表現(xiàn),設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間,設(shè)置多Tab等。
以下是一個(gè)包含了所有配置選項(xiàng)的簡(jiǎn)單配置,app.json :
{ //設(shè)置頁(yè)面路徑 "pages": [ "pages/index/index", "pages/logs/index" ], //設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn) "window": { "navigationBarTitleText": "Demo" }, //設(shè)置底部 tab 的表現(xiàn) "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁(yè)" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, //設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間 "networkTimeout": { "request": 10000, "downloadFile": 10000 }, //設(shè)置是否開啟 debug 模式 "debug": true }
②但是在對(duì)頁(yè)面json文件進(jìn)行配置的時(shí)候只可以配置設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn)(即只能對(duì)window進(jìn)行配置),但是在此時(shí)可以直接省略window,如果加window則沒有效果,也不會(huì)報(bào)錯(cuò)。
以下是一個(gè)包含了window配置選項(xiàng)的簡(jiǎn)單配置,post.json :
注意:這是錯(cuò)誤的寫法
{ "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }}
注意:正確的寫法
{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}
4.此前一直沒有注意vertical-align: middle和height:40rpx;line-height:40rpx進(jìn)行設(shè)置垂直劇中的區(qū)別,這次主要說(shuō)一下vertical-align: middle
代碼如下:
<view class="post-author-date"> <image class="post-author" src="../../images/avatar/1.png"> </image> <text class="post-date">Nov 15 2016</text> </view> .post-author{ width: 60rpx; height: 60rpx; vertical-align: middle; } .post-date{ margin-top: 5rpx; vertical-align: middle; /*height: 40rpx; line-height: 40rpx;*/ }
總結(jié):
①vertical-align: middle;把此元素放在父元素的中部
②當(dāng)一個(gè)父元素里面有多個(gè)子元素,需要把幾個(gè)子元素水平對(duì)齊,并且每個(gè)子元素都垂直劇中的時(shí)候,對(duì)每一個(gè)子元素進(jìn)行設(shè)置 vertical-align: middle
③height: 40rpx; line-height: 40rpx;可以對(duì)文本進(jìn)行垂直居中
以上是“小程序開發(fā)中遇到的問(wèn)題有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標(biāo)題:小程序開發(fā)中遇到的問(wèn)題有哪些
文章鏈接:http://www.chinadenli.net/article16/jdjogg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站導(dǎo)航、微信公眾號(hào)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)