从有这个想法开始，到用代码实现，以及UI图标的搜索，只用了周末两天时间。首先看下最终的成果：
成就表：
积分表：
主要使用场景：是为了鼓励孩子养成良好的生活习惯，而做的一个小demo，其中的成就表用于，当孩子完成成就表中列的某项任务后，就会获得相应的积分。这些积分可以积累，查看一共有多少积分，有两种方式，一种方式是，完成某项任务后，点击，跳转到第二个页面，就会有总积分显示，或者去商店查看。商店是用来进行积分兑换的。孩子做任务不能白做，要有奖励，才会让孩子更有兴趣的坚持下去，在商店里可以用积分购买相应的奖励，比如说玩王者荣耀一局。
疑问一：跳转到下一个页面的时候，如何知道来自哪个成就图标点击跳转到的？
这就需要用到这个代码：
tocelebrate:function(e){
wx.navigateTo({
url: '../celebrate/celebrate?id='+e.currentTarget.id,
})
},
其中的重点就是这个id，这个id是哪来的？来自与wxml文件绑定的数据，这个数据在同一个文件夹下的js文件。
data: {
"req":[
{ id:1,title: "考试80分以上",score:30,thumb:"/images/Test_paper.png"},
{ id:2,title: "看望外公外婆", score: 30,thumb:"/images/grandma.png"},
{ id:3,title: "看望爷爷奶奶", score: 30,thumb:"/images/grandpa.png"},
{ id:4,title: "看书一小时", score: 10,thumb:"/images/open_book.png"},
{ id:5,title: "收拾屋子", score: 10,thumb:"/images/broom_brush.png"},
{ id:6,title: "运动一小时", score: 10,thumb:"/images/fat_run.png"},
{ id:7,title: "按时睡觉", score: 5,thumb:"/images/sleep.png"},
{ id:8,title: "吃蔬菜", score: 5 ,thumb:"/images/Eggplant.png"},
{id:9,title: "看电影一部", score: 5, thumb: "/images/film.png" }
]
},
这里面的数据时需要传给wxml的
疑问二：界面如何布局？
代码如下：
<view class="listMall">
<block wx:for="{{req}}" wx:key="index">
<view bindtap="tocelebrate" id="{{item.id}}">
<view class="img"><image src="{{item.thumb}}" mode="aspectFill"/></view>
<view class="name">{{item["title"]}}</view>
<view>
<text class="now_price">{{item["score"]}}分</text>
</view>
</view>
</block>
</view>
注意其中的id绑定的位置。这个xml代码主要用来绑定js，page中的data数据。
有了这些还有一个需要考虑，如果数据一个页面不能盛开，这时就要考虑滑动了。
这时候就需要用scroll-view了，具体方法可以参见小程序开发文档。用scroll-view把上面的代码包裹进去就可以了。
疑问三：在没有服务器的情况下，积分如何保存？
没有条件，我们就自己创造条件，没有服务器，积分可以保存在本地，微信小程序提供10M的localstore，而我们连1M都用不了，这些数据只要不换手机，不会轻易销毁，对于一个不太严肃的小demo，可以了。
wx.getStorage({
key: 'total',
success: function (res) {
sum = util.accAdd(res.data, score)
that.setData({
sum: util.accAdd(res.data, score)
})
wx.setStorage({
key: 'total',
data: sum,
})
}
})
},
存储的格式很常见，就是普通的key-value格式。微信小程序开发器可以很方便的查看storage：
疑问四：上面代码中的accAdd函数是什么？
微信小程序有一个统一的位置来放置各种函数，accAdd就是一个具有加法功能的函数。放置函数的位置是：utils文件夹。当然也可以自己定义其他的文件夹。比如在其中添加如下代码。
//加法运算中级解决办法
function accAdd(a, b) {
var c, d, e;
try {
c = a.toString().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = b.toString().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = Math.pow(10, Math.max(c, d)), (a * e + b * e) / e;
}
疑问五：存储数据并不是那么容易，这个存储的数据来自哪？
当真正操作数据的时候，就会有一个难点，同一个js文件中数据的作用域，比如data中的数据，同一个js文件中就不能用，data中定义的数据好像是专门给wxml来用的。那在疑问三中我们的数据来自哪呢？
代码：
var req = [
{ id: 1, title: "考试80分以上", score: 30, thumb: "/images/Test_paper.png" },
{ id: 2, title: "看望外公外婆", score: 30, thumb: "/images/grandma.png" },
{ id: 3, title: "看望爷爷奶奶", score: 30, thumb: "/images/grandpa.png" },
{ id: 4, title: "看书一小时", score: 10, thumb: "/images/open_book.png" },
{ id: 5, title: "收拾屋子", score: 10, thumb: "/images/broom_brush.png" },
{ id: 6, title: "运动一小时", score: 10, thumb: "/images/fat_run.png" },
{ id: 7, title: "按时睡觉", score: 5, thumb: "/images/sleep.png" },
{ id: 8, title: "吃蔬菜", score: 5, thumb: "/images/Eggplant.png" },
{ id: 9, title: "看电影一部", score: 5, thumb: "/images/film.png" }
]
var id = options.id
var score=req[id-1].score
var title=req[id-1].title
var that = this
var sum = 0
this.setData({
score: score,
title:title
})
对，单独声明的。
疑问六：底部的tabBar如何设置？
很简单，在全局的json文件中加入下面的代码。selectedIconPath是选中时的图片的路径。
"tabBar": {
"selectedColor": "#F5B223",
"color": "#9A9A9A",
"list": [
{
"pagePath": "pages/choice/choice",
"text": "成就",
"iconPath":"images/ok.png",
"selectedIconPath": "images/ok.png"
},
{
"pagePath": "pages/user/user",
"text": "商店",
"iconPath":"images/shop.png",
"selectedIconPath": "images/shop.png"
}
]
}
疑问7：代码运行没问题，但上传代码时报错，谷歌没有类似问题，去群里提问，也没有回答能够解决，怎么办？
我的方法是新建一个文件，看看能不能上传，如果能够上传，就说明代码中还是有错误，这时候就把问题定位到了代码中，而不是其他什么编辑器，网络的毛病，这时候就走一步删一点，自己调试就好了。
总结：微信小程序API还是比较友好的，能快速的实现想法的实现。审核也不叫慢，我的三天给过了，有些上午提交，下午就给过了。把很多功能封装好直接调用也越来越成为主流。在去年的时候就想着哪天微信自己把当时流行的AR、VR等技术研究好了，直接把API开放给开发者直接调用就好了。结果到了今年苹果在iOS11中就开放了AR的API文档，看iOS开发者的评价，说API还算是蛮简单的。微信要加快脚步啊。
网友评论