微信小程序开发计算器总结（小程序计算器源码）
今天给各位分享微信小程序开发计算器总结的知识，其中也会对小程序计算器源码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
小程序开发经验总结
最近一直在做小程序，工作中也遇到了一些问题，踩了一些坑，所以想着写篇文章记录下来，并借此将小程序开发的相关知识进行梳理，方便以后参考，也为刚刚接触小程序的人提供一些思路方法，互相学习，共同进步。
1、微信小程序的目录结构及配置说明
app.json是小程序的全局配置文件，所有配置项key必须使用 双引号括起来 ，value值为字符串类型的也必须使用双引号， 不支持单引号 。
1.1 pages
pages选项是必须配置的。该配置项注册了小程序所有页面的地址，其中每一项都是页面的 路径+文件名 。每一个页面都是由.json、.js、.wxml、.wxss四个文件组成，并且 四个文件的名字必须要一致 。
1.2 tabBar
tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab
1.3 usingComponents
使用自定义组件或者插件提供的组件前，必须先在这里声明
2、开发微信小程序遇到的问题及解决办法
2.1 双向绑定
微信小程序不支持通过v-model的方式实现自动双向绑定，需要给表单元素通过绑定事件，并使用this.setData来赋值实现。
2.2 computed和watch
微信小程序默认是不支持computed和watch的，如需要使用这两项功能，需要安装miniprogram-computed ，安装方法见 官方文档
2.3 对象赋值
如果给对象的属性赋值，可以使用this.setData({'obj.key':value})来赋值，但是如果给某个属性名是变量的属性赋值，通过这种方法是会报错的，经过多次尝试，发现使用如下的方式赋值成功。
let newObj = `obj.${key}`
this.setData({
[newObj]: value
})
2.4 scroll-view
当页面存在弹框容器，并且弹框里的内容是需要滚动条滚动展示时，如果弹框下面那层的容器使用view元素的话，会导致滚动弹框内容时，同时会触发弹框下面那层的页面容器也会一起滚动，解决此问题可以将弹框下面的容器使用scroll-view元素替代view元素
3、小程序测试和发布
由于服务器域名request合法域名每个月 只能修改5次 ，因此在本地开发小程序时，需要在微信调试工具中设置不校验合法域名。等小程序上线前再一次性将所有域名添加到小程序管理后台。
以上便是此次小程序开发中积累的一些经验，希望能给刚刚接触小程序的人提供一些思路方法，在以后的开发中，如果遇到新的问题，继续更新文档......
微信小程序中分数显示实现方法
最近在开发一款计算类的微信小程序——茄子计算器。下面的来介绍一下里面分数计算器的实现方法。
使用控件 :rich-text控件
原理: 利用rich-text支持Html富文本。用一个两行两列的表格来显示分数，第一列的两行合并显示带分数，第二列的第一行显示分子，第二列的第二行显示分母，将表格的边框不显示，仅显示第一行第二列单元格的下边框线。这样就实现了分数的显示形式。
实现效果如下图所示：
您可以在微信中搜索小程序“茄子计算器”查看效果。
微信小程序 加法计算器
1、新建目录calc
2、pages加上
"pages/calc/calc",
3、 calc.wxml
view class="62897842cd8436a6 container"
input placeholder="被加数" bindinput="bindInput1" /
input placeholder="加数" bindinput="bindInput2" /
button type="primary" bindtap="bindAdd"计算/button
input placeholder="结果" value="{{result}}" disabled /
/view
4、calc.wxss
/* pages/calc/calc.wxss */
.container{
justify-content: flex-start;
padding: 30rpx 0;
}
.container input{
background-color: #eee;
border-radius:3px;
text-align:left;
width:720rpx;
height:100rpx;
line-height:100rpx;
margin:20rpx;
}
.container button{
width:80%;
}
5、calc.json
{
"navigationBarBackgroundColor":"#00ff00",
"navigationBarTitleText":"加法计算器",
"navigationBarTextStyle":"white",
"usingComponents": {}
}
6、calc.js
// pages/calc/calc.js
Page({
/**
微信小程序开发计算器总结的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序计算器源码、微信小程序开发计算器总结的信息别忘了在本站进行查找喔。
