一、實驗目標

1、學習使用快速啟動模板創(chuàng)建小程序的方法；2、學習不使用模板手動創(chuàng)建小程序的方法。

二、實驗步驟

列出實驗的關鍵步驟、代碼解析、截圖。

1、快速啟動模板創(chuàng)建小程序：

1.1 項目創(chuàng)建

1.2項目開發(fā)頁面

?

1.3真機預覽效果

（此版本回收了展示用戶個人信息的功能，推測因為此原因，真機預覽效果并不能顯示頭像昵稱等信息，若需要展示頭像昵稱等信息，需要對代碼進行一些更改）

?

2、不使用模板手動創(chuàng)建小程序

一些關鍵步驟：

2.1導航欄設計

重新配置”window“相關屬性（背景顏色，文件標題，標題字體、顏色等）（app.json文件中操作）

相關代碼：

?

自定義導航欄效果：

剩余頁面設計類似，不多贅述。（在index.wxml， index.wxss文件中進行操作）

2.2邏輯實現(xiàn)（未優(yōu)化）

2.2.1獲取微信用戶信息

2.2.2使用動態(tài)數(shù)據(jù)顯示頭像和昵稱

2.2.3更新頭像和昵稱

index.xwml文件中：1.上圖中“open-type = 'getUserInfo'”表示激活用戶信息功能（新版中被回收，無法運行出正確的效果），bindgetuserinfo屬性表示將獲得的數(shù)據(jù)傳遞給自定義函數(shù)getMyInfo。

2.‘{{}}’表示中間數(shù)據(jù)為動態(tài)數(shù)據(jù)，如上圖中‘{{src}}’、{{name}}。

index.js文件中：

1.編寫自定義函數(shù)getMyInfo，其中“console.log(e.detail.userInfo"語句控制獲取頭像和昵稱的輸出，如果沒有此語句，也可以運行，運行時會顯示上次獲取的頭像、昵稱（無法真正做到獲取頭像、昵稱，真機上運行仍然是灰色頭像、游客昵稱），但Console控制臺不會輸出以下數(shù)據(jù)。

2.上一步的動態(tài)數(shù)據(jù)src、name的初始數(shù)據(jù)在此賦值（即語句“src：’/image/logo.png'," "name:'Hello World'",當兩者獲取到新數(shù)據(jù)后改變。）

2.3優(yōu)化

經(jīng)過上述步驟，我們并不能真正地獲取到頭像、昵稱等數(shù)據(jù)，上面也提到了，這是由于新版本的”微信開發(fā)者工具“把一些操作回收了，現(xiàn)在采用wx.getUserProfile來獲取頭像、昵稱。

?

更改index.xwml、index.js、app.js文件:

index.xwml文件中：

(getUserInfo -> getUserProfile, bindgetuserinfo -> bindtap)

1.bindtap = bind tap ，綁定 點擊。點擊的時候會產(chǎn)生觸發(fā)。

index.js文件中：

?1.wx.getUserProfile獲取用戶信息，觸發(fā)授權行為，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認。開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗。

2."success:(res) =>{}" 用于回調。

3.console.log(res)用于輸出信息，配合下面的this.setData用于改變src、name的值。

app.js文件中：

?1."logs.unshift(Date.now())" unshift() 方法將把它的參數(shù)插入 arrayObject 的頭部，并將已經(jīng)存在的元素順次地移到較高的下標處，以便留出空間。該方法的第一個參數(shù)將成為數(shù)組的新元素 0，如果還有第二個參數(shù)，它將成為新的元素 1，以此類推。

2."wx.setStorageSync('logs', logs)"根據(jù)時間存儲log

三、程序運行結果

列出程序的最終運行結果及j截圖。

?

?

四、問題總結與體會

描述實驗過程中所遇到的問題，以及是如何解決的。有哪些收獲和體會，對于課程的安排有哪些建議。

遇到的問題

1：第一次創(chuàng)建的項目把項目文件放在”微信開發(fā)者工具“文件夾中，創(chuàng)建項目后第一次預覽發(fā)生錯誤，顯示未找到”app.json”文件，懷疑是因為將項目文件存放在”微信開發(fā)者工具“文件夾下，兩者可能存在某些文件上面的沖突，導致新建項目無法生成一些文件。

下圖中左圖為能夠正確運行的項目資源管理器內容，右圖為報錯的項目資源管理器內容

?

解決方法：

1.通過上網(wǎng)查詢發(fā)現(xiàn)，也有人存在類似的問題，大多是通過改變入口目錄來解決。

改變項目存放位置，不要將新建項目放在”微信開發(fā)者工具“文件夾下，在外另開辟一個新的文件夾村返回項目。

參考文獻：

[ app.json 文件內容錯誤] app.json: app.json 未找到 怎么解決？ | 微信開放社區(qū)

小程序app.js小結 - sinceForever - 博客園

bindtap 什么屬性？ | 微信開放社區(qū)文章來源地址http://www.zghlxwxcb.cn/news/detail-492301.html

到了這里，關于《移動軟件開發(fā)》實驗報告的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！