【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何創(chuàng)建微信小程序

【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何創(chuàng)建微信小程序

如何創(chuàng)建微信小程序，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。準(zhǔn)備工作下載開發(fā)工具：微信小程序開發(fā)工具創(chuàng)建項(xiàng)目添加項(xiàng)目http://upload-images.jianshu.io/upload_images/1750086-ea1c62b474a76c34.png?imageMogr2/auto-orient/strip如果沒有AppID可以選擇無AppID,項(xiàng)目名稱可以隨便起，因?yàn)槿腴T教程我想教大家都比較想學(xué)的商城，所以直接叫商城啦，項(xiàng)目目錄中的shopping是自己創(chuàng)建的新文件夾，空文件夾系統(tǒng)就會(huì)自動(dòng)在shopping文件夾中創(chuàng)建整個(gè)項(xiàng)目架構(gòu)，記得勾選quickstart項(xiàng)目http://upload-images.jianshu.io/upload_images/1750086-83c53a8be011813b.png?imageMogr2/auto-orient/strip項(xiàng)目架構(gòu)分析整體架構(gòu):自動(dòng)創(chuàng)建的項(xiàng)目就會(huì)以下架構(gòu)目錄紅框1：菜單欄紅框2：界面效果顯示紅框3：代碼架構(gòu)目錄紅框4：代碼欄http://upload-images.jianshu.io/upload_images/1750086-6d9f52a544d249cc.png?imageMogr2/auto-orient/strip著重對(duì)代碼架構(gòu)目錄做介紹：app.js、app.json、app.wxss，這三個(gè)中前兩個(gè)是必看的，前兩個(gè)相當(dāng)于目錄，就好比你讀一本書，都要先看一下目錄，所以以后看別人項(xiàng)目的時(shí)候，首先先看app.js和app.jsonapp.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的API，如本例的同步存儲(chǔ)及同步讀取本地?cái)?shù)據(jù)。app.json是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。app.wxss是整個(gè)小程序的公共樣式表。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則。app.json解析：首先既然是.json所以一定是json格式，這里面包含兩部分pages和window，固定字段，pages就是整個(gè)小程序包含的頁面，可以根據(jù)路徑查找到對(duì)應(yīng)的頁面，window就是設(shè)置一些窗口樣式，依次是配置小程序的窗口

背景字體樣式，配置導(dǎo)航條背景樣式，配置默認(rèn)標(biāo)題，及顏色現(xiàn)學(xué)現(xiàn)用http://upload-images.jianshu.io/upload_images/1750086-b0f2fab48bf97349.png?imageMogr2/auto-orient/strip我要設(shè)置導(dǎo)航欄的標(biāo)題為商城，字體為白色，背景為黑色要怎么做吶？很簡(jiǎn)單吧，找到app.json把下面的代碼替換到window里面就可以啦，要解釋一下navigationBarBackgroundColor和navigationBarTextStyle都是支持rgb的，也就是說設(shè)置字體顏色navigationBarTextStyle為白色填入white其實(shí)也可以填入#fff，都是一樣的效果我要增加一個(gè)界面怎么辦吶？

同理只需在app.json里的pages屬性加入你要的路徑pages/addPage/addPage，你寫好路徑后系統(tǒng)會(huì)自動(dòng)給你建好文件的下圖是解決以上兩個(gè)問題的效果圖，app.json就暫時(shí)解析到這里，記著我們?cè)谶@里面有新添加一個(gè)界面addPage，后面會(huì)詳細(xì)介紹這個(gè)界面的，篇幅限制，這個(gè)先擱置一下http://upload-images.jianshu.io/upload_images/1750086-fa4ac946bd96d641.png?imageMogr2/auto-orient/stripapp.js解析:看后綴名.js就知道是JavaScript的代碼，首先看一下App里面包含的幾個(gè)方法onLaunch、getUserInfo、getUserInfohttp://upload-images.jianshu.io/upload_images/1750086-95c639265f0c14b3.png?imageMogr2/auto-orient/striponLaunch方法是小程序啟動(dòng)的時(shí)候執(zhí)行的方法看一下里面的代碼，wx.以這個(gè)開頭的都是系統(tǒng)封裝好的方法，我們都可以直接調(diào)用，輸入wx.,系統(tǒng)會(huì)自動(dòng)提示出自帶的方法，查詢更多系統(tǒng)定義的方法請(qǐng)看微信API文檔，這里篇幅限制不能全部介紹好，回歸正題，看著三句話代碼，wx.getStorageSync是獲取本地緩存的logs字段，logs.unshift代碼是什么意思吶？unshift是js的知識(shí)，unshift()方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。所以大概能理解這三句話代碼啦，大致是取本地緩存數(shù)據(jù)logs字段，插入最新時(shí)間，然后存儲(chǔ)再次存入到緩存中的logs字段里，說了這么多，那Storage存儲(chǔ)的數(shù)據(jù)在哪里吶，請(qǐng)看下圖，會(huì)更好理解，找到菜單欄里的調(diào)試->Storage下就可以看到本地緩存的logs字段及數(shù)據(jù)，你也可以自行添加數(shù)據(jù)，然后調(diào)用wx.getStorageSync('key值')，就可以獲取數(shù)據(jù)啦http://upload-images.jianshu.io/upload_images/1750086-421c14c170e2b8bd.png?imageMogr2/auto-orient/striphttp://upload-images.jianshu.io/upload_images/1750086-4a259a494ff7d5ed.png?imageMogr2/auto-orient/stripglobalData全局變量數(shù)據(jù)，getUserInfo自定義的方法用于獲取用戶信息，整體的代碼意思就是如果用戶信息為空就去調(diào)用微信的登錄接口，登錄成功后存儲(chǔ)在全局變量globalData里，分析兩處代碼第一處varthat=this，that=this,這個(gè)是js語法屬性，this應(yīng)該是引用本實(shí)例的一個(gè)值，它將它賦值給that的原因從下面的代碼中可以判斷出來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)，第二處是type