前两天,腾讯释放了微信小程序公测的消息,和很多开发者一样,我也非常兴奋。十一期间没什么事,就试着写了一个微信小程序WeSJTU
,现在,终于可以在手机微信上跑起来了(以前是在电脑的微信开发者工具上模拟的)。
构思
微信小程序的文档,比较难的部分,如数据绑定,其思想和Angular
是非常相近的,而所谓的WXSS
,基本上可以认为是CSS
,只是不方便用SCSS
了——WXSS原则上不支持级联,所以整个文档看下来基本上就能上手了。
先从简单有意思的开始吧,所以我设想了三个Tab
:
- 同去。同去网是交大活动发布的主要阵地,它有很完善的API,可以通过GET请求返回活动列表、活动详情的JSON数据,另外还支持分页。
- 2048. 根据别人写的数字2048,打算改成文字2048——苟利国家生死以,岂因祸福避趋之,蛤蛤…
- 反馈。这一部分,想做一个简单的反馈功能,用户可以在小程序里反馈,我可以在网页上查看反馈内容列表。
代码
同去
活动列表页面,前端可以用小程序的列表渲染很方便地实现。
<scroll-view class="acts-list" scroll-y="true" bindscrolltolower="lower"> |
小程序的wx.request
发起的是HTTPS请求,在后端用Node.js
将请求转发一下。
const tqUrl = 'https://tongqu.me'; |
活动详情页面,由于活动内容有文字有图片,所以列表渲染的思路是——文字就渲染文字,图片就渲染图片。
<scroll-view class="act-contents" scroll-y="true"> |
为了配合前端,后端需要做好数据的处理。
router.get('/act', (req, res, next) => { |
2048
2048,代码的思路还是比较清晰的——通过触摸动作返回的坐标值判断手指滑动方向,然后移动合并,判断输赢,随机插入等。其中,数字转文字的代码是通过循环实现的,简单粗暴。
number2word: (arr) => { |
用模态框提醒游戏结束。
<modal class="modal" confirm-text="吼啊" cancel-text="不吼" hidden="{{failHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancle"> |
感觉膜得也太暴力了…
反馈
前端是一个表单,反馈内容由用户输入,反馈者的基本信息由小程序的wx.getUserInfo
获得。
<form class="feedback-form" bindsubmit="formSubmit"> |
后端将前端通过POST请求提交的表单数据写入到SQLite
中。
router.post('/feedback', function(req, res, next) { |
然后,通过网页就可以很方便地查看了。
<div class="feedback"> |
效果
同去
2048
反馈
小程序WeSJTU的前端代码已经在GitHub
上开源了——点此前往,欢迎学习交流。