感谢大家对上一篇文章的支持，最近看过好多面试需求，发现大多数都会要求会微信小程序，刚开始的时候觉得小程序一定是很难的，但慢慢接触下来，发现还好，所以依旧总结了一些小程序的相关知识
注册登录
开发小程序的第一步就是要有一个小程序的账号，去管理你的小程序 ，按照下面的地址去注册一个账号 mp./wxopen/ware…
注册成功后，我们就可以登录了，根据下面的地址 mp. 登录成功后，我们会进入到下面的页面
在填写小程序信息的时候有一个需要注意的点，如果你心里有一个明确的目标，比如我就想去做一个游戏，那你可以把里面的信息都填好，但是如果你只是想练练手，不想做太复杂的，那重点来了，请看图
在填写信息最后会有这个服务范围，这个一旦选中就不能更改（至少我的是这样），所以就像我之前的操作，选择了一个游戏，遇到了一个很大的困扰，因为我只是想练个手而已，至于这个困扰是什么，下面会说到，我们先说说下面的操作，下载小程序工具，到下面这个地址去下载吧https://developers./miniprogram/dev/devtools/download.html?t=53
他就长这个样子
2. 开启第一个项目
点击微信开发者工具，会要求我们选择项目目录，AppID,项目名称，这里的目录我们最好选择一个空的目录，至于这个ID值，可以看我们登录界面中的设置，如下图把上面那个id值粘过来就好了然后还记得我之前说的困扰吗，按照正常理解，我应该创建一个简易的模板，但是，由于我选择了那个游戏就导致项目名称下的勾选项只有 “建立游戏快速启动模板”，点击确定后，里面就会自动创建了一个游戏的代码，看着很酷，不过对于刚接触小程序的人来说，要看懂还是有点难度的，如果我们不勾选这个，你一进去不管你执行什么都会报错的，所以说如果你和我一样只是想练手，那在填写信息的时候就不要选那个了，或者你不提交也行然后重复我们上面的操作，这个勾选项就会变成 “建立**模板”（我忘记是建立什么模板了），然后点击确定，就进入到下面的界面
这个界面还是很友好的吧，没有那么复杂 ，那接下来我们就大概说一下里面的内容首先来说说项目构成，一个page文件夹，里面有单独的文件，然后就是js文件，json文件和配置文件，配置文件也就是最后一个，这个里面的内容不需要我们过多关注，看看就好，在根目录下每个文件中必须包含一个js文件，和一个wxml文件，如果需要样式，那就需要有wxss文件，如下图
在app.json 中是需要我们自己去配置的，如下图，在pags中是我们文件的目录，这个一定要配置好，window中的 navigationBarTitleText 是我们项目的主标题，随意写，想叫什么就写什么
还有一点是如果你只写了wxml中的内容，并没有写js中的，即使这个时候你还没写逻辑他也是会报错的，这个时候呢，你就可以在js文件中敲一个 Page 然后回车，就会出现好多东西，不需要管，保存，然后在运行，就ok了对wxml不了解的小伙伴可以参考文档 /weixinapp/weixinapp-wxml.html
3. 准备工作已经差不多了，来做个小案例吧，聪明的人已经知道我要做的是什么了
先来个成品图，这个案例可以参考网上的一个教学视频，讲的还是不错的，唯一的不足就是说的有点快，而且视频不是很清晰，不过结合代码应该还是会很快理解的 /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'复制代码
这里的页面逻辑主要有一下几点对退格、清空、负号（这里只针对第一个元素的负号）、等号的逻辑操作对加减乘除运算的逻辑操作，这里的操作我没有写完整，比如像混合运算，我只做了两个加减运算的混合
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 = resultnum += 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.登录界面找到首页中的添加开发者，然后添加你的小伙伴并给她们开权限，这样她们也可以通过扫描二维码看到你的作品啦
大致的操作就是这样了，有关路由，存储数据那些可以参考文档，具体的代码我会上传到github，感兴趣的小伙伴可以去看一下，这个小案例还有些小bug，不过大致的功能我们已经完成的很完美了，另外可能还有很多不足的地方，望指教
git 地址：/aurora-polaris/wechat
如果觉得《其实微信小程序也没那么复杂》对你有帮助，请点赞、收藏，并留下你的观点哦！
