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

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

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

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

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