其实微信小程序也没那么复杂

    感谢你们对上一篇文章的支持，最近看过好多面试需求，发现大多数都会要求会微信小程序，刚开始的时候以为小程序必定是很难的，但慢慢接触下来，发现还好，因此依旧总结了一些小程序的相关知识

注册登陆

开发小程序的第一步就是要有一个小程序的帐号，去管理你的小程序   ，按照下面的地址去注册一个帐号     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