前言

最近在研究微信小程序的相关技术,就想着将自己的这个博客用小程序来实现一下,顺带着练练手。好吧,其实微信小程序的官方开发API也越来越完善,而且研究过Vue.js的童鞋,想必上手会更简单,基本写法很相似,所以开发的难度不是很大。

至于微信小程序的适合哪些应用场景,有没有必要去开发微信小程序,这里不做讨论,不过作为个人学习使用还是蛮有乐趣的。

技术难点

整个开发过程中,要说难点的话,我觉得首先是对于我一个后端开发人员来说,布局相关方面的技术还得好好补补,像微信小程序里主要用到的flex布局等;其次,应该是如何将开发完成的代码如何上传、如何设置体验版、如何提交审核和发布上线等整个流程吧,而这些其实都可以从官方文档上获得。最后落到敲代码上,对于一般的功能(想自己的这个博客),代码也没有啥好讲的,至于在小程序中实现在线支付、直播等功能,这个博主将继续进行研究。

核心代码

这里就贴上一段使用promise封装的get和post请求的方法吧:

/** 
    * 自定义post请求函数,返回Promise
  **/
http_post: function (url, data) {
var promise = new Promise((resolve, reject) => {
//init
var that = this;
var postData = data;
//网络请求
wx.request({
url: url,
data: postData,
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: function (res) {//返回取得的数据
resolve(res);
},
error: function (e) {
reject('网络出错');
}
})
});
return promise;
}
/** 
    * 自定义get请求函数,返回Promise
    */
http_get: function (url, data) {
var promise = new Promise((resolve, reject) => {
//init
var that = this;
var postData = data;
//网络请求
wx.request({
url: url,
data: postData,
method: 'GET',
header: { 'content-type': 'application/json' },
success: function (res) {//返回取得的数据
resolve(res);
},
error: function (e) {
reject('网络出错');
}
})
});
return promise;
}


项目预览

这里还是直接上图吧:

手机上的实际效果:

写在最后

由于个人注册的微信小程序账号无法发布,所以此版本尚未正式上线,目前只提供体验版,若有无聊想体验一下的,请在下方留言处留下您的微信号,并扫一下下面的这个二维码即可,此码扫一次即可,长期有效:

作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: 微信小程序
posted 阅读(80 ) 评论(0 )

评论内容: