如何創(chuàng)建微信小程序-創(chuàng)新互聯(lián)
如何創(chuàng)建微信小程序，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
準(zhǔn)備工作
下載開(kāi)發(fā)工具：微信小程序開(kāi)發(fā)工具
創(chuàng)建項(xiàng)目
添加項(xiàng)目
如果沒(méi)有AppID可以選擇無(wú)AppID,項(xiàng)目名稱(chēng)可以隨便起，因?yàn)槿腴T(mén)教程我想教大家都比較想學(xué)的商城，所以直接叫商城啦，項(xiàng)目目錄中的shopping是自己創(chuàng)建的新文件夾，空文件夾系統(tǒng)就會(huì)自動(dòng)在shopping文件夾中創(chuàng)建整個(gè)項(xiàng)目架構(gòu)，記得勾選quick start項(xiàng)目
項(xiàng)目架構(gòu)分析
整體架構(gòu):自動(dòng)創(chuàng)建的項(xiàng)目就會(huì)以下架構(gòu)目錄
紅框1 ：菜單欄
紅框2：界面效果顯示
紅框3 ：代碼架構(gòu)目錄
紅框4 ：代碼欄
著重對(duì)代碼架構(gòu)目錄做介紹：app.js、app.json、app.wxss，這三個(gè)中前兩個(gè)是必看的，前兩個(gè)相當(dāng)于目錄，就好比你讀一本書(shū)，都要先看一下目錄，所以以后看別人項(xiàng)目的時(shí)候，首先先看app.js和app.json
app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，如本例的同步存儲(chǔ)及同步讀取本地?cái)?shù)據(jù)。
app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。
app.json解析：首先既然是.json所以一定是json格式，這里面包含兩部分pages和window，固定字段，pages就是整個(gè)小程序包含的頁(yè)面，可以根據(jù)路徑查找到對(duì)應(yīng)的頁(yè)面，window就是設(shè)置一些窗口樣式，依次是配置小程序的窗口 背景字體樣式，配置導(dǎo)航條背景樣式，配置默認(rèn)標(biāo)題，及顏色
現(xiàn)學(xué)現(xiàn)用我要設(shè)置導(dǎo)航欄的標(biāo)題為商城，字體為白色，背景為黑色要怎么做吶？ 很簡(jiǎn)單吧，找到app.json把下面的代碼替換到window里面就可以啦，要解釋一下navigationBarBackgroundColor和navigationBarTextStyle都是支持rgb的，也就是說(shuō)設(shè)置字體顏色navigationBarTextStyle為白色填入white其實(shí)也可以填入#fff，都是一樣的效果
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "商城", "navigationBarTextStyle":"white" }我要增加一個(gè)界面怎么辦吶？ 同理只需在app.json里的pages屬性加入你要的路徑pages/addPage/addPage，你寫(xiě)好路徑后系統(tǒng)會(huì)自動(dòng)給你建好文件的
"pages":[ "pages/index/index", "pages/logs/logs", "pages/addPage/addPage" ]
下圖是解決以上兩個(gè)問(wèn)題的效果圖，app.json就暫時(shí)解析到這里，記著我們?cè)谶@里面有新添加一個(gè)界面addPage，后面會(huì)詳細(xì)介紹這個(gè)界面的，篇幅限制，這個(gè)先擱置一下
app.js解析:看后綴名.js就知道是JavaScript的代碼，首先看一下App里面包含的幾個(gè)方法onLaunch、getUserInfo、getUserInfo
onLaunch方法是小程序啟動(dòng)的時(shí)候執(zhí)行的方法
var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs)看一下里面的代碼，wx.以這個(gè)開(kāi)頭的都是系統(tǒng)封裝好的方法，我們都可以直接調(diào)用，輸入wx.,系統(tǒng)會(huì)自動(dòng)提示出自帶的方法，查詢(xún)更多系統(tǒng)定義的方法請(qǐng)看微信API文檔，這里篇幅限制不能全部介紹
好，回歸正題，看著三句話(huà)代碼，wx.getStorageSync是獲取本地緩存的logs字段，logs.unshift代碼是什么意思吶？unshift是js的知識(shí)，unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。所以大概能理解這三句話(huà)代碼啦，大致是取本地緩存數(shù)據(jù)logs字段，插入最新時(shí)間，然后存儲(chǔ)再次存入到緩存中的logs字段里，說(shuō)了這么多，那Storage存儲(chǔ)的數(shù)據(jù)在哪里吶，請(qǐng)看下圖，會(huì)更好理解，找到菜單欄里的調(diào)試->Storage下就可以看到本地緩存的logs字段及數(shù)據(jù)，你也可以自行添加數(shù)據(jù)，然后調(diào)用wx.getStorageSync('key值') ，就可以獲取數(shù)據(jù)啦
globalData全局變量數(shù)據(jù)，
getUserInfo自定義的方法用于獲取用戶(hù)信息，整體的代碼意思就是如果用戶(hù)信息為空就去調(diào)用微信的登錄接口，登錄成功后存儲(chǔ)在全局變量globalData里，分析兩處代碼第一處var that = this，that=this,這個(gè)是js語(yǔ)法屬性，this應(yīng)該是引用本實(shí)例的一個(gè)值，它將它賦值給that的原因從下面的代碼中可以判斷出來(lái)js的一些特性。每一個(gè)方法是一個(gè)封閉函數(shù)，它的上一層實(shí)例即為this，所以如果一個(gè)方法A包含另一個(gè)方法B，在A中使用this指的是A的實(shí)例，在B中使用this應(yīng)該是B的實(shí)例，即擁有B的A，所以在這里我們?yōu)榱四玫紸中的實(shí)例this，必須要賦一個(gè)值給that，讓B能使用A的實(shí)例。在此demo中，上面的this指的是app這個(gè)實(shí)例，為了在下面的方法中可以使用app的實(shí)例，所以賦了that給this。還不明白that=this可以參考此文獻(xiàn)，第二處是typeof cb == "function" && cb(this.globalData.userInfo)，代碼中兩次調(diào)用此代碼所以要剖析一下，cb是callback的縮寫(xiě)，翻譯代碼意思就是cb==function，要求cb為方法，并且回調(diào)cb方法，剩下的wx.login猜都能猜出來(lái)是微信封裝好的登錄方法啦
getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調(diào)用登錄接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null }
關(guān)于如何創(chuàng)建微信小程序問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前名稱(chēng)：如何創(chuàng)建微信小程序-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://m.jiaotiyi.com/article/gcpcs.html