如何創建微信小程序

如何創建微信小程序，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

準備工作

1. 下載開發工具：微信小程序開發工具

創建項目

1. 添加項目
   

2. 如果沒有AppID可以選擇無AppID,項目名稱可以隨便起，因為入門教程我想教大家都比較想學的商城，所以直接叫商城啦，項目目錄中的shopping是自己創建的新文件夾，空文件夾系統就會自動在shopping文件夾中創建整個項目架構，記得勾選quick start項目
   

項目架構分析

1. 整體架構:自動創建的項目就會以下架構目錄

• 紅框1 ：菜單欄

• 紅框2：界面效果顯示

• 紅框3 ：代碼架構目錄

• 紅框4 ：代碼欄
  

2. 著重對代碼架構目錄做介紹：app.js、app.json、app.wxss，這三個中前兩個是必看的，前兩個相當于目錄，就好比你讀一本書，都要先看一下目錄，所以以后看別人項目的時候，首先先看app.js和app.json

• app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

• app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。

• app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

3. app.json解析：首先既然是.json所以一定是json格式，這里面包含兩部分pages和window，固定字段，pages就是整個小程序包含的頁面，可以根據路徑查找到對應的頁面，window就是設置一些窗口樣式，依次是配置小程序的窗口  背景字體樣式，配置導航條背景樣式，配置默認標題，及顏色
   
   現學現用

• 我要設置導航欄的標題為商城，字體為白色，背景為黑色要怎么做吶？ 很簡單吧，找到app.json把下面的代碼替換到window里面就可以啦，要解釋一下navigationBarBackgroundColor和navigationBarTextStyle都是支持rgb的，也就是說設置字體顏色navigationBarTextStyle為白色填入white其實也可以填入#fff，都是一樣的效果

  "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "商城",
  "navigationBarTextStyle":"white"
  }

• 我要增加一個界面怎么辦吶？   同理只需在app.json里的pages屬性加入你要的路徑pages/addPage/addPage，你寫好路徑后系統會自動給你建好文件的

  "pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/addPage/addPage"
  ]

  下圖是解決以上兩個問題的效果圖，app.json就暫時解析到這里，記著我們在這里面有新添加一個界面addPage，后面會詳細介紹這個界面的，篇幅限制，這個先擱置一下
  

4. app.js解析:看后綴名.js就知道是JavaScript的代碼，首先看一下App里面包含的幾個方法onLaunch、getUserInfo、getUserInfo
   

• onLaunch方法是小程序啟動的時候執行的方法

  var logs = wx.getStorageSync('logs') || [] 
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)

  看一下里面的代碼，wx.以這個開頭的都是系統封裝好的方法，我們都可以直接調用，輸入wx.,系統會自動提示出自帶的方法，查詢更多系統定義的方法請看微信API文檔，這里篇幅限制不能全部介紹
  
  好，回歸正題，看著三句話代碼，wx.getStorageSync是獲取本地緩存的logs字段，logs.unshift代碼是什么意思吶？unshift是js的知識，unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。所以大概能理解這三句話代碼啦，大致是取本地緩存數據logs字段，插入最新時間，然后存儲再次存入到緩存中的logs字段里，說了這么多，那Storage存儲的數據在哪里吶，請看下圖，會更好理解，找到菜單欄里的調試->Storage下就可以看到本地緩存的logs字段及數據，你也可以自行添加數據，然后調用wx.getStorageSync('key值') ，就可以獲取數據啦
  

• globalData全局變量數據，

• getUserInfo自定義的方法用于獲取用戶信息，整體的代碼意思就是如果用戶信息為空就去調用微信的登錄接口，登錄成功后存儲在全局變量globalData里，分析兩處代碼第一處var that = this，that=this,這個是js語法屬性，this應該是引用本實例的一個值，它將它賦值給that的原因從下面的代碼中可以判斷出來js的一些特性。每一個方法是一個封閉函數，它的上一層實例即為this，所以如果一個方法A包含另一個方法B，在A中使用this指的是A的實例，在B中使用this應該是B的實例，即擁有B的A，所以在這里我們為了拿到A中的實例this，必須要賦一個值給that，讓B能使用A的實例。在此demo中，上面的this指的是app這個實例，為了在下面的方法中可以使用app的實例，所以賦了that給this。還不明白that=this可以參考此文獻，第二處是typeof cb == "function" && cb(this.globalData.userInfo)，代碼中兩次調用此代碼所以要剖析一下，cb是callback的縮寫，翻譯代碼意思就是cb==function，要求cb為方法，并且回調cb方法，剩下的wx.login猜都能猜出來是微信封裝好的登錄方法啦

  getUserInfo:function(cb){
  var that = this
  if(this.globalData.userInfo){
  typeof cb == "function" && cb(this.globalData.userInfo)
  }else{
  //調用登錄接口
  wx.login({
  success: function () {
    wx.getUserInfo({
      success: function (res) {
        that.globalData.userInfo = res.userInfo
        typeof cb == "function" && cb(that.globalData.userInfo)
      }
    })
  }
  })
  }
  },
  globalData:{
  userInfo:null
  }

  
  

關于如何創建微信小程序問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。