其實微信小程序也沒那麼複雜

    感謝你們對上一篇文章的支持，最近看過好多面試需求，發現大多數都會要求會微信小程序，剛開始的時候以爲小程序必定是很難的，但慢慢接觸下來，發現還好，因此依舊總結了一些小程序的相關知識

註冊登陸

開發小程序的第一步就是要有一個小程序的帳號，去管理你的小程序   ，按照下面的地址去註冊一個帳號     mp.weixin.qq.com/wxopen/ware…

註冊成功後，咱們就能夠登陸了，根據下面的地址     mp.weixin.qq.com               登陸成功後，咱們會進入到下面的頁面      

在填寫小程序信息的時候有一個須要注意的點，若是你內心有一個明確的目標，好比我就想去作一個遊戲，那你能夠把裏面的信息都填好，可是若是你只是想練練手，不想作太複雜的，那重點來了，請看圖

在填寫信息最後會有這個服務範圍，這個一旦選中就不能更改（至少個人是這樣），因此就像我以前的操做，選擇了一個遊戲，遇到了一個很大的困擾，由於我只是想練個手而已，至於這個困擾是什麼，下面會說到，咱們先說說下面的操做，下載小程序工具，到下面這個地址去下載吧https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=201853

他就長這個樣子

2. 開啓第一個項目

點擊微信開發者工具，會要求咱們選擇項目目錄，AppID,項目名稱，這裏的目錄咱們最好選擇一個空的目錄，至於這個ID值，能夠看咱們登陸界面中的設置，以下圖

• 把上面那個id值粘過來就行了

而後還記得我以前說的困擾嗎，按照正常理解，我應該建立一個簡易的模板，可是，因爲我選擇了那個遊戲就致使項目名稱下的勾選項只有 「創建遊戲快速啓動模板」，點擊肯定後，裏面就會自動建立了一個遊戲的代碼，看着很酷，不過對於剛接觸小程序的人來講，要看懂仍是有點難度的，若是咱們不勾選這個，你一進去無論你執行什麼都會報錯的，因此說若是你和我同樣只是想練手，那在填寫信息的時候就不要選那個了，或者你不提交也行

• 而後重複咱們上面的操做，這個勾選項就會變成 「創建**模板」（我忘記是創建什麼模板了），而後點擊肯定，就進入到下面的界面
  

• 這個界面仍是很友好的吧，沒有那麼複雜 ，那接下來咱們就大概說一下里面的內容
• 首先來講說項目構成，一個page文件夾，裏面有單獨的文件，而後就是js文件，json文件和配置文件，配置文件也就是最後一個，這個裏面的內容不須要咱們過多關注，看看就好，在根目錄下每一個文件中必須包含一個js文件，和一個wxml文件，若是須要樣式，那就須要有wxss文件，以下圖

• 在app.json 中是須要咱們本身去配置的，以下圖，在pags中是咱們文件的目錄，這個必定要配置好，window中的 navigationBarTitleText 是咱們項目的主標題，隨意寫，想叫什麼就寫什麼
  

• 還有一點是若是你只寫了wxml中的內容，並無寫js中的，即便這個時候你還沒寫邏輯他也是會報錯的，這個時候呢，你就能夠在js文件中敲一個 Page 而後回車，就會出現好多東西，不須要管，保存，而後在運行，就ok了
• 對wxml不瞭解的小夥伴能夠參考文檔  https://www.w3cschool.cn/weixinapp/weixinapp-wxml.html

3. 準備工做已經差很少了，來作個小案例吧，聰明的人已經知道我要作的是什麼了

先來個成品圖，這個案例能夠參考網上的一個教學視頻，講的仍是不錯的，惟一的不足就是說的有點快，並且視頻不是很清晰，不過結合代碼應該仍是會很快理解的  v.qq.com/x/page/o033…

• 咱們能夠在咱們剛剛建立好的模板裏面去改一下文件就好，不必去新建了，pages目錄下的文件刪掉刪掉，而後新建咱們本身的文件，而後配置app.js中的路徑，而後開始寫代碼了
• 首先在根目錄下建立主界面，咱們給每一個按鍵一個單獨的id值

<view class="wrap">
  <view class='screen'> {{screenData}}  </view>
  <view class='btnGroup'> 
   <view class='item ple' bindtap='clickbtn' id="{{index1}}">退格</view> 
   <view class='item ple' bindtap='clickbtn' id="{{index2}}">清空</view>  
   <view class='item ple' bindtap='clickbtn' id="{{index3}}">+/-</view>  
   <view class='item ple' bindtap='clickbtn' id="{{index4}}">+</view> 
 </view> 
 <view class='btnGroup'>   
  <view class='item ori' bindtap='clickbtn' id="{{index5}}">7</view>  
  <view class='item ori' bindtap='clickbtn' id="{{index6}}">8</view> 
  <view class='item ori' bindtap='clickbtn' id="{{index7}}">9</view> 
  <view class='item ple' bindtap='clickbtn' id="{{index8}}">-</view> 
 </view> 
 <view class='btnGroup'>  
   <view class='item ori' bindtap='clickbtn' id="{{index9}}">4</view>   
   <view class='item ori'bindtap='clickbtn' id="{{index10}}">5</view> 
   <view class='item ori'bindtap='clickbtn' id="{{index11}}">6</view> 
   <view class='item ple'bindtap='clickbtn' id="{{index12}}">*</view> 
  </view> 
  <view class='btnGroup'>   
   <view class='item ori' bindtap='clickbtn' id="{{index13}}">1</view> 
   <view class='item ori' bindtap='clickbtn' id="{{index14}}">2</view>  
   <view class='item ori' bindtap='clickbtn' id="{{index15}}">3</view>  
   <view class='item ple' bindtap='clickbtn' id="{{index16}}">/</view> 
 </view> 
 <view class='btnGroup'>  
  <view class='item ori' bindtap='clickbtn' id="{{index17}}">0</view>  
  <view class='item ori' bindtap='clickbtn' id="{{index18}}">.</view>  
  <view class='item ori' bindtap='history' id="{{index20}}">歷史</view>  
  <view class='item ple' bindtap='clickbtn' id="{{index19}}">=</view> 
 </view></view>

複製代碼

這裏的bindtap 就是咱們所熟悉的click

• 界面寫好後爲了好看點就能夠在wxss中去寫樣式，別忘了js文件中的內容
  
• 在js文件中，咱們能夠先在data中約定好以前的id值

/**   * 頁面的初始數據   */ 
data: {  
  index1:'Backspace',  
  index2: 'clear',  
  index3: 'a',  
  index4: '+',  
  index5: '7',  
  index6: '8',  
  index7: '9',  
  index8: '-',  
  index9: '4', 
  index10: '5', 
  index11: '6',  
  index12: '*',   
  index13: '1',  
  index14: '2', 
  index15: '3', 
  index16: '/',   
  index17: '0',  
  index18: '.',  
  index19:'=',  
  index20:'history',  
  screenData:'0'複製代碼

• 這裏的頁面邏輯主要有一下幾點

1. 對退格、清空、負號（這裏只針對第一個元素的負號）、等號的邏輯操做
2. 對加減乘除運算的邏輯操做，這裏的操做我沒有寫完整，好比像混合運算，我只作了兩個加減運算的混合

3. for(var i=1;i<optarr.length;i++){  
     if(isNaN(optarr[i])){    
        if (optarr.length > 3) {  
             // 先加後減   
            if (optarr[3] == this.data.index8) {  
               var num = result   
              num -= Number(optarr[4])   
              result = num          
         }          
         // 先減後加     
         else if (optarr[3] == this.data.index4) {   
            var num = result      
           num += Number(optarr[4])       
          result = num        
       }          
   }         
     // +        
     if(optarr[1]==this.data.index4){ 
          result+=Number(optarr[i+1])   
      }    
         // -     
      else if (optarr[1] == this.data.index8) {       
        result -= Number(optarr[i + 1])      
      }        
     // *        
     else if (optarr[1] == this.data.index12) {     
          result *= Number(optarr[i + 1])     
      }       
      // /        
     else if (optarr[1] == this.data.index16) {   
            result /= Number(optarr[i + 1])   
      }   
    }      
   }複製代碼

3. 後面就是對上面操做的結果進行存貯，顯示在屏幕區，這裏提供了一個setData({value})方法去存貯，接着咱們能夠判斷若是連續輸入運算符時的顯示，邏輯以下

// 這裏的this指的是page，page提供了一個setData的方法去操縱數值  
    this.setData({ screenData: data })  
    this.data.arr.push(value)   
   if (value == this.data.index4 || value == this.data.index8 || value == this.data.index12 || value == this.data.index16){   
     this.setData({last:true})   
   }else{    
    this.setData({ last: false })    
  }  
 }   複製代碼

4. 主頁面的邏輯基本上就這些，下面咱們來看看歷史頁面的邏輯，咱們要實現的結果是點擊歷史，能夠跳轉到另外一個界面，也就是咱們要去新建一個頁面，也是在根目錄下，這裏咱們須要在剛纔的js文件中去寫個路由

history:function(){  
  wx.navigateTo({      url: '../list/list',    })  },複製代碼

而後去存儲每次計算的結果

//存儲數據 wx.setStorageSync(key, data)  
    this.data.logs.push(data+'='+result)  
    // callogs 覆蓋以前的值  
    wx.setStorageSync('callogs', this.data.logs)複製代碼

接着在新建立的目錄下的js文件中，接收上面保存的數據

onLoad: function (options) { 
   // wx.getStorageSync(key) 讀取  
  var logs=wx.getStorageSync('callogs')  
  this.setData({logs:logs})  },

複製代碼

當作完這個案例的時候，咱們不只能夠在電腦上去看效果，也能夠經過點擊預覽生成二維碼，到手機上去體驗，這裏默認只有你本身有查看的權利

若是你想要你的小夥伴也看到你的做品，能夠在 mp.weixin.qq.com 登陸界面找到首頁中的添加開發者，而後添加你的小夥伴並給她們開權限，這樣她們也能夠經過掃描二維碼看到你的做品啦

大體的操做就是這樣了，有關路由，存儲數據那些能夠參考文檔，具體的代碼我會上傳到github，感興趣的小夥伴能夠去看一下，這個小案例還有些小bug，不過大體的功能咱們已經完成的很完美了，另外可能還有不少不足的地方，望指教

git 地址： https://github.com/aurora-polaris/wechat