找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序综合交流

关注:51

所属分类: 微信开发 微信小程序综合交流

微信小程序用户交流版块,希望同学们积极发言,不过大家不要恶意发布广告哦!

[经验分享] 如何利用WAFER进行全栈开发(入门级教程)

[复制链接]
查看: 465|回复: 10
最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-9 16:47:34 | 显示全部楼层 |阅读模式
本帖最后由 乐在乐哉 于 2017-8-14 21:40 编辑

微信小程序大大降低了应用开发的门槛。但是由于全栈开发涉及到多种语言、数据库、服务器设置、域名等一大堆问题,因此在学习过程中还是会碰到一大堆坑。
是不是有办法减少碰到的坑呢,方法还是有的。下面准备通过一个实际的例子来说明一下。主要讲这么几部分内容:
1、利用腾讯云的优惠政策,快速搭建一个WAFER示例,调试一下。
2、稍微懂得一点服务器端的“框架”(这里是CI框架)(其实也就是分析一下腾讯云资源中的框架)
3、完成一个小目标,往后台数据库里面插入几条数据。
4、上传一个文件看看。
5、腾讯小程序新的审核机制的最大特点就是“不要扰民”,充分尊重这个规则(如何用户“静默登录”)。
6、WAFER程序的学习(对以后的开发有用)。

开始说第一个内容吧:
现在腾讯云有一个3月新购活动,https://www.qcloud.com/solution/la
也就是3元,能够购买2台服务器(应用服务器+会话服务器)、一台数据库服务器的一个月的使用权。(半年内都有大幅优惠,一般这三台设备一个月大致需要300元左右吧)。
也就是说,花上3块钱,你可以在一个月里面,体会一下全栈开发的过程,衡量一下这种开发是否对你胃口。
这3块钱里面还包括了WAFER环境的搭建,这个WAFER,全称是 Weapp Application Fullstack Essential Resources,即微信小程序全栈基础资源。
这个大概是目前能够最快启动的微信小程序全栈环境了。
选这个环境的最大好处,除了省钱之外。就是你能够真的把它搭起来、让它运行起来。
我们看很多资料,告诉你怎么搭一个微信小程序后台运行环境,看上去很美,但是按照他们的说法去搭的时候,可能会碰到很多困难。因为作者的能力和我们不在一个层次上面,他们认为是非常基础的问题,在我们这里,可能是一无所知。碰到问题,也没有人能够帮助你,所以,很多时候,一个小问题卡半天,甚至几天都有可能。慢慢的你的毅力也就被消耗掉了。
腾讯云比较到位的地方,就是你购买了WAFER这个3元的云资源包之后,他后台就帮你把一切准备好了,你按照说明文档,这个环境已经可以跑起来了。最关键的是,如果跑不起来,你可以在平台上发工单,腾讯工程师会帮你迅速解决问题

所以,第一步,就是花3元钱,去买这个腾讯云的特惠套餐吧(https://www.qcloud.com/solution/la)。
这里再给一个建议,如果你真的想做小程序这个方向坚持一下,建议第一次购买的时候,购买半年的吧(充分利用他们的优惠政策)
还有一个建议,选择语言的时候,建议选择PHP,因为不管哪种语言,会话服务器都是PHP写的,所以PHP这个语言是绕不过的。如果你对其他语言也不熟悉的话,那就选PHP吧。


以WAFER为基础开发的微信小程序应该已经很多了。
但是可能对外直接说是基于这个资源的人不多,目前我看到的主要有2个:
最好的例子是徐佳义的小打卡,这个程序现在发展非常好,可以看到的资料很多,而且徐总在github上做了一件非常好的事情,当微信小程序平台有新的举措影响WAFER的时候,他会第一时间给出解决的办法。(www.sharedaka.com/ 百度搜一下“小打卡”就可以了)


今天看到一个新例子是“养车记录本小程序”:https://www.qcloud.com/community/article/412763  看上去作者也是抱这比较开放的心态来做这个事情的。

还有一个就是我自己的小程序,是一个方言小程序,因为功能简单,实际上WAFER给出的能力没有全部用足。主要就是觉得目前手机使用方便了,可以通过手机来收集各地的方言,各地方言各有自己的特色,收集比较方言也是一个非常有意义也非常有乐趣的事情。
这次讲的也就是开发这个小程序中碰到的问题和一些解决的办法。欢迎大家使用这个小程序,帮助录一下方言资料,同时帮忙提一下建议吧。

我的方言小程序

我的方言小程序





回复

使用道具 举报

最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-10 21:26:07 | 显示全部楼层
2、稍微懂得一点服务器端的“框架”

腾讯云的2台服务器,用的都是centos操作系统,用的web服务器不一样。不过服务器端的代码框架都是用的codeigniter,这又让编程的难度小了一点。学习一个框架也要花一点时间,从熟悉到熟练应用,都是需要花精力上去的。
codeigniter本身有很好的中文网站,现在服务器端代码的开发普遍使用框架,实际上框架已经为我们节省了非常多的精力,我们要做的,就是理解框架的逻辑。对于CI来说,首先就是要搞明白它的URL的含义。耐心看一下中文手册,基本弄明白就可以了。
我们其实不太需要关注那些很复杂的东西,我们要解决的问题是:
第一、如果我想写一个响应客户端请求的页面,该怎么写,写完了放在那里?
第二、客户端该怎么来发起请求,服务器端才会响应。

腾讯云给了2个服务器,一个是应用服务器,一个是会话服务器。我们以应用服务器为例子,因为从层次结构上来说,应用服务器是面对客户端需求的。在这个服务器里面,我们关注的目录是:/data/release/php-weapp-demo/application/controllers
整个/data/release/php-weapp-demo/目录是WAFER的应用服务器端的代码,我们如果要添加代码,实际上就是添加一个应用控制器。

/data/release/php-weapp-demo/application/controllers这个目录下原来有个Login.php
内容很简单
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

use \QCloud_WeApp_SDK\Auth\LoginService as LoginService;

class Login extends CI_Controller {
    public function index() {
        $result = LoginService::login();
        // notes: do not echo anything
    }
}
是用来响应客户端的登录请求的。
我们现在在同一个目录中写一个Test01.php
内容再精简一些,比上面的区别是注释掉了登录的内容,加了一条返回数据的语句。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class test01 extends CI_Controller {
    public function index() {
        echo json_encode('Hello world!', JSON_FORCE_OBJECT);
    }
}
好,现在在浏览器里面输入https://xxxxxx.qcloud.la/test01 (其中xxxxxx是腾讯云分配给你的二级域名)
浏览器里面是不是出现了一行“Hello world!”

这里注意2点:一个是控制器的名字第一个字符是大写(Test01),但是在浏览器里的链接相关的字符是小写(test01)
另外一个就是Test01.php中的类名也是小写“test01”。

如果昨天我发帖子的时候,你去花3元钱买了一个腾讯云的小程序解决方案优惠包,那现在你也可以这么试验一下。试验下来之后,是不是对后面编程的信心比较足了。比较人家已经帮咱们铺好了路了啊。
回复 支持 反对

使用道具 举报

最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-11 08:33:24 | 显示全部楼层
本帖最后由 乐在乐哉 于 2017-8-11 08:41 编辑

2、稍微懂得一点服务器端的框架
好了,现在我们手里有2台腾讯云服务器可用,仔细看一下,这2台服务器都是centos系统,但是web服务器不一样,不过因为有腾讯云帮你管这些基础的东西,因此这些差别基本可以不去管它,如果服务器出问题了,简单,发工单报修就行了。我们现在只需要管我们自己的业务核心。
那么从哪里着手呢?

WAFER资源的好处是2个服务器都用了CICodeigniter)框架,服务器端的编程框架很多,熟悉一个框架也要读一些文档,现在我们只需要熟悉CI,网上有现成的CI中文手册,先读一下入门的东西,看看URL的构成,看看里面的页面路由逻辑。

WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。直接可以登录到服务器,当作一个文件夹浏览器来用。
我们先登录到应用服务器上看看,毕竟应用服务器是负责应对微信小程序客户端的请求的,必须要了解它,才能开始服务器端的编程。

首先,我们到/data/release/php-weapp-demo/这个目录下看看。这个目录中部署的是WAFER的应用服务器端的代码。里面的有CI框架的标准文件和WAFER中的服务器端的文件。我们最需要关心的,是下面这个目录:/data/release/php-weapp-demo/application/controllers,这个目录就是所有的“控制器”,也就是应对客户端需求的程序的家。我们打开里面原来有的一个页面Login.php。这个页面就是WAFER中负责处理客户端的login请求的,它长这样:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
use \QCloud_WeApp_SDK\Auth\LoginService as LoginService;
class Login extends CI_Controller {
    public function index() {
        $result = LoginService::login();
        // notes: do not echo anything
    }
}

很简单,对吧。为了便于了解CI的处理逻辑,我们弄一个更简单的。我们把这个文件另存为Test01.php,然后再简化一下,变成下面这个样子:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class test01 extends CI_Controller {
    public function index() {
        echo json_encode('Hello world!', JSON_FORCE_OBJECT);
    }
}

然后,我们假设你拿到的腾讯2级域名是12345678.qcloud.la,现在你在浏览器地址栏输入:
https:// 12345678.qcloud.la/test01
我们是不是看到了“Hello world!”?

对,就怎么简单。CIweb服务器合作,判断你发到这个域名的请求,发现是test01(他们管这个叫控制器、类,就是这个意思吧),就把请求交给controller目录下面的Test01.php来负责应答。Test01.php中有一个test01的类,你可以在里面写一些语句,解析请求的内容,然后根据情况返回数据。
上面的例子中,我们什么也没有解析,只是简单第返回了“Hello world!”这么一个问候。
这次就先说这些,下次我们试着去连数据库,并且存取一点数据。

回复 支持 反对

使用道具 举报

最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-13 22:11:33 | 显示全部楼层
3、往后台数据库里面插入几条数据。
在总览里面,现在总览里面可以看到有2台服务器和1个数据库。
数据库01.png
点击数据库,进入数据库管理页面,点击右侧的登录链接,输入数据库用户名密码登录。
之后看到的是一个数据的健康情况的一个图表页面,在上边有一排链接,点击“返回PMA”。
出现的就是mysql的管理界面,和单机版的管理界面一致。
我们就用可视化工具先建一个名叫test的数据库,在这个数据库里面建一张名叫userinfo的表,只有2列,一列是username、一列是userinfo都是varchar类型,长度100
现在我们修改Test01.php来输入一点数据。

首先是要配置一下数据库,让程序知道怎样去连接这个数据库。
/data/release/php-weapp-demo/application/config/database.php 这个就是数据库配置文件了。
我们拿default的数据库配置,稍微修改一下,红色的就是需要修改的地方。 其他地方不必动它。
$db['test'] = array(
       'dsn' => '',
       'hostname' => '你的数据库IP地址或者hostname',
       'username' => '你的用户名',
       'password' => '你的密码',
       'database' => 'test',
       'dbdriver' => 'mysqli',
       'dbprefix' => '',
       'pconnect' => FALSE,
       'db_debug' => (ENVIRONMENT !== 'production'),
       'cache_on' => FALSE,
       'cachedir' => '',
       'char_set' => 'utf8',
       'dbcollat' => 'utf8_general_ci',
       'swap_pre' => '',
       'encrypt' => FALSE,
       'compress' => FALSE,
       'stricton' => FALSE,
       'failover' => array(),
       'save_queries' => TRUE
);

然后就是操作数据库,我们修改一下Test01.php:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class test01 extends CI_Controller {
    public function index() {
        $this->load->database('test');//连接数据库
        $queryStr = 'insert into userinfo (username, userinfo) values (\'Tom\', \'Tom Cat\')'; //编写SQL语句,用途是插入一条数据。
        $query = $this->db->query($queryStr);//执行SQL语句
        $response = $query;//数据库返回执行结果
        echo json_encode($response, JSON_FORCE_OBJECT);
    }
}
现在你在浏览器地址栏输入:https:// 12345678.qcloud.la/test01(我们还是假设你拿到的腾讯2级域名是12345678.qcloud.la
浏览器里面看到一个单词“true”,这个是数据库操作的结果,说明操作成功了。
现在再到数据库里看看,在userinfo这个表中已经有一条username为“Tom”,userinfo为“Tom Cat”的数据了。

回复 支持 反对

使用道具 举报

最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-14 21:29:53 | 显示全部楼层
4、上传一个任意类型的文件看看
服务器端的程序开发使用现成的框架的一大好处,在文件上传上完全体现出来了。本来,文件的上传原来是一件挺麻烦的事情。我们现在完全可以抛开具体的数据流的处理,只要简单地把一些参数弄对就可以了。特别是在CI的最新版本里面,问题变的非常简单。
在CI的用户手册中,查找“文件上传”,找到文件上传类,仔细看一下,跟着做一次就基本知道了:
http://codeigniter.org.cn/user_guide/libraries/file_uploading.html?highlight=upload#CI_Upload
注意,例子中上传文件的类型是这样写的:
$config['allowed_types']    = 'gif|jpg|png';
那么如果传的文件不是gif|jpg|png怎么办呢,现在这个版本非常简单了,直接就是*就行了
$config['allowed_types']    = '*';
用手册中的例子,实现的功能是打开网页后,提示选择一个文件上传。那么现在在微信小程序中该如何上传文件呢?用wx.uploadFile()就可以了,微信开发文档中有比较详细的介绍,比较关键的地方是需要上传的文件路径,另外注意接受信息的控制器的URL别写错就可以了。
回复 支持 反对

使用道具 举报

最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-25 20:46:00 | 显示全部楼层
5. 不扰人(不强制登录)

WAFER框架本来是针对会话写的,因此要求正式登陆,获得用户的头像、昵称等等,都很顺理成章。电商类的应用中,登录也是一个必然的要求。
不过很多数应用可以先不必强制登录,在不扰民的情况下,微信告诉你说,你一样能得到用户的openid、unionid之类的(当然,如果你的名下只有一个小程序,没有其他公众号、小程序,不需要互通,就没有unionid返回值了)。
在用WAFER框架的时候,只要在用qcloud.request的时候把 login: true注释掉,它就不会强制登录了。当然,由于不必强制登录,实际上你可以把后台代码改的更简洁一些。
   onLaunch() {
       qcloud.setLoginUrl(config.service.loginUrl);
       wx.login({
         success: res => {
           // 发送 res.code 到后台换取 openId, sessionKey, unionId
           qcloud.request({
              // 要请求的地址
              url: config.service.getOpenidUrl,
              method: 'POST',
              //自定义的头部信息
              data: {
                jscode: res.code
              },
              // 请求之前是否登陆,如果该项指定为 true,会在请求之前进行登录
              //login: true,
              success(result) {
                //showSuccess('请求成功完成');
                console.log('review submitsuccess', result['data']['openid']);
                wx.setStorageSync('openid',result['data']['openid']);
                //      wx.navigateBack({})
              },
              fail(error) {
                //showModel('请求失败',error);
                console.log('request fail',error);
              },
              complete() {
                console.log('requestcomplete');
              }
           })
         }
       })
   },


后台程序看上去可能是这个样子:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

use \QCloud_WeApp_SDK\Auth\LoginService as LoginService;
use \Exception as Exception;
use \QCloud_WeApp_SDK\Helper\Util as Util;
use \QCloud_WeApp_SDK\Helper\Logger as Logger;

class Getopenid extends CI_Controller {

    public function __construct()
    {
        require_once('http_util.php');
    }
        public function index() {

        $contents = Util::getPostPayload();
        $body = json_decode($contents, TRUE);
        $code =$body['jscode'];
               
        //别忘了在下面的语句中把你自己的appid和secret替换进去!!!
        $url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' . $appid . '&secret=' . $secret . '&js_code=' . $code . '&grant_type=authorization_code';

        $http_util = new http_util();
        $return_message = $http_util->http_get($url);
               
        $returndata = json_decode($return_message);
        $openid=$returndata->openid;
        $returnopenid =new StdClass;
        $returnopenid ->openid = $openid;
        echo json_encode($returnopenid , JSON_FORCE_OBJECT);
    }
}


回复 支持 反对

使用道具 举报

最佳答案
1 

5

主题

56

帖子

1393

积分

专家路上

积分
1393
 楼主| 发表于 2017-8-26 20:22:33 | 显示全部楼层
6. WAFER程序的学习
小打卡的作者 徐佳义 写过一篇很好的文章题目是:
《微信小程序快速开发,两周内从创意到上线》,链接:http://www.jianshu.com/p/e7fd6ae1429b
参考资料、编程工具、代码部署等各方面的注意点都点到了,有兴趣进行全栈开发的,可以重点看看这篇文章。会有不少收获。

当然,程序员最喜欢的,还是自己看源代码:
https://github.com/tencentyun/wafer

通过仔细学习源代码,可以比较快的深入到前后端的编程中去。

最后推荐一本书《兄弟连,细说PHP(第二版)》,编程的书实在太多,其实一般来说,选一本正规出版社出版的,应该就可以了。兄弟连的这本书,好在把全栈开发的一些关键知识都讲到了,在一本书里面讲全这些东西,当然逻辑性会强一些。不必东翻西找的,可以省很多功夫。

回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

63

帖子

436

积分

略知一二

积分
436
发表于 2017-8-26 23:27:16 来自手机 | 显示全部楼层
好详细啊,学习了
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

227

积分

新人求带

积分
227
发表于 2017-8-28 09:03:33 | 显示全部楼层
谢谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

88

帖子

970

积分

专家路上

积分
970
发表于 2017-9-3 15:22:42 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com