感谢大家对上一篇文章的支持，最近看过好多面试需求，发现大多数都会要求会微信小程序，刚开始的时候觉得小程序一定是很难的，但慢慢接触下来，发现还好，所以依旧总结了一些小程序的相关知识
注册登录
开发小程序的第一步就是要有一个小程序的账号，去管理你的小程序 ，按照下面的地址去注册一个账号 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'- 这里的页面逻辑主要有一下几点
- 对退格、清空、负号（这里只针对第一个元素的负号）、等号的逻辑操作
- 对加减乘除运算的逻辑操作，这里的操作我没有写完整，比如像混合运算，我只做了两个加减运算的混合
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，不过大致的功能我们已经完成的很完美了，另外可能还有很多不足的地方，望指教
