Taro教程之相亲类微信小程序开发实战-02基础配置
在前面我们已经把开发环境搭建好了，接下来进行简单的架构设计。
小程序结构调整
在开发功能之前通常我们要做一些项目结构的规划和调整，一般会按照程序代码架构进行区分，比如控制器、模型、视图等等，将实现上述功能代码按照文件夹的形式区分，再然后将业务代码按照既定架构的设计，依次开始写入代码。
通常的软件开发包括需求分析、概设、详设、数据库设计、UI设计等等内容，每个公司的开发步骤并不相同，所以不会严格的按照上述来进行。
虽然不一定要按照上述的步骤走，但是一些核心的功能一定要确定下来，后续只是核心功能的补充而已。
这个相亲类的微信小程序基本功能如下：个人中心、我的好友、私信、相亲对象市场等等（目前只开发这些，后续迭代再加）
由于 Taro 只是提供了简单的项目结构划分，为了统一我们需要细微的调整一下。
QQ20181229-223241.png
注意调整的时候，相应的引入路径也要变动
首先在 store 的文件夹下面新建一个入口文件 index.js，代码如下：
import counterStore from './counter'
export default {
counterStore
}
然后在 app.js 中调整代码，如下：
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/mobx'
import Index from './pages/index'
import store from './store' //此处为调整部分
import './app.less'
// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
// require('nerv-devtools')
// }
class App extends Component {
config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
}
Taro.render(<App />, document.getElementById('app'))
Phalapi2.0安装与配置
我们通过 Composer 安装 PhalApi,如果没有安装 Composer，请自行百度安装。
$ composer create-project phalapi/phalapi
nginx配置
server {
listen 80;
server_name dev.phalapi.net;
root /path/to/phalapi/public;
charset utf-8;
location / {
index index.php;
}
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
access_log logs/dev.phalapi.net.access.log;
error_log logs/dev.phalapi.net.error.log;
}
Apache配置
如果使用的是Apache，可参考以下配置。目录结构：
htdocs
├── phalapi
└── .htaccess
.htaccess内容：
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} ^dev.phalapi.net$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/phalapi/public/
RewriteRule ^(.*)$ /phalapi/public/$1
RewriteRule ^(/)?$ index.php [L]
</IfModule>
上述配置是官方提供的，老夫使用的是 apache 的配置，不同的是老夫的配置是在 httpd-vhosts.conf,参考配置如下：
<VirtualHost *:8888>
ServerName 127.0.0.1
DocumentRoot "/Users/lxl/Documents/taro/project/phalapi/public"
<Directory "/Users/lxl/Documents/taro/project/phalapi/public">
DirectoryIndex index.php
</Directory>
#ErrorLog "logs/dummy-host.example.com-error_log"
#CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>
注意 apache 默认端口是 80，如果新增 8888 端口，需要在 httpd.conf 中增加如下配置：
#Listen 12.34.56.78:80
Listen 80
Listen 8888 #新增
接下来启动 Apache , 然后在浏览器中访问如下路径：http://localhost:8888/,如果浏览器返回如下结果：
{
"ret":200,
"data":{
"title":"Hello PhalApi",
"version":"2.4.2",
"time":1546270434
},
"msg":""
}
恭喜您已经成功安装 PhalApi 。
EasyWechat安装与配置
EasyWeChat 是一个开源的 微信 非官方 SDK
EasyWeChat 的安装非常简单，因为它是一个标准的 Composer 包，这意味着任何满足下列安装条件的 PHP 项目支持 Composer 都可以使用它。
环境要求：
-
PHP >= 7.0
-
PHP cURL 扩展
-
PHP OpenSSL 扩展
-
PHP SimpleXML 扩展
-
PHP fileinfo 拓展
安装
$ composer require overtrue/wechat:~4.0 -vvv
设置国内镜像
因为一些众所周知的原因，上述命令如何安装很慢或者失败，我们可以首先设置国内镜像,设置命令如下：
$ composer config repo.packagist composer https://packagist.phpcomposer.com
然后再执行如下命令：
$ composer require overtrue/wechat:~4.0 -vvv
这里我们在 phalapi 的根目录下面执行上述命令,见下图：
QQ20181231-235449.png
安装成功后，现在写一个接口进行测试。
小程序接口测试
这里我们写一个小程序登录获取 session_key 和 openid 的接口，这个接口后续会经常用到。
我们需要把 EasyWechat 引入到 Phalapi 中,然后就可以愉快的使用EasyWechat的 api 了。
首先，需要配置小程序的 appid 和 appsecret, 在 Phalapi\config\app.php 中配置，代码如下：
/**
* 接口服务白名单，格式：接口服务类名.接口服务方法名
*
* 示例：
* - *.* 通配，全部接口服务，慎用！
* - Site.* Api_Default接口类的全部方法
* - *.Index 全部接口类的Index方法
* - Site.Index 指定某个接口服务，即Api_Default::Index()
*/
'service_whitelist' => array(
'Site.Index',
),
/**
* 小程序的appid 和 appsecret
*/
'miniProgram' => array(
'app_id' => 'wxfa0fwec232892ef5f26',
'secret' => 'e5300cfcb34sdfewe1ldkwd4954c05',
// 下面为可选项
// 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
'response_type' => 'array',
'log' => [
'level' => 'debug',
'file' => __DIR__.'/wechat.log',
],
),
```
然后在 Phalapi\public\index.php 中增加如下代码：
```php
use EasyWeChat\Factory; // +
require_once dirname(__FILE__) . '/init.php';
global $miniApp; // +
$miniProgram = PhalApi\DI()->config->get("app.miniProgram"); // +
$miniApp = Factory::miniProgram($miniProgram); // +
$pai = new \PhalApi\PhalApi();
$pai->response()->output();
至此就可以全局引用了。
现在我们开始正式的进入撸代码阶段。
在 Phalapi\src\app\Api 的文件夹下新增 Core.php 的文件，代码如下：
<?php
namespace App\Api;
use PhalApi\Api;
/**
* 小程序核心接口服务类
*
* @author: pythonsir <baidu211@vip.qq.com>
* @weixin: cxyzxh1388
*/
class Core extends Api{
public function getRules() {
return array(
'getSession3rd' => array(
'code' => array('name' => 'code'),
),
);
}
/**
* 通过小程序code 获取 session_key 和 openid
*/
public function getSession3rd(){
global $miniApp;
$code = $this->code;
$result = $miniApp->auth->session($code);
return array('res' => $result);
}
}
然后在 Taro 的项目Miai\src 新增 config\api.js,代码如下：
const apiRoot = "http://localhost:8888/"
export default {
apiRoot,
getSession3rd: apiRoot + "?s=Core.GetSession3rd"
}
在Miai\src\app.js中引入上述文件，新增如下代码：
componentWillMount () {
Taro.login().then(res => {
Taro.request({
url:api.getSession3rd,
data:{'code' : res.code},
success:function(res){
console.log(res)
}
})
}).catch(err => {
console.log(err)
})
}
现在还没有业务逻辑，只是单纯的输出获取到的 session_key 和 openid。
现在返回到微信开发工具中查看访问服务器端接口，可以看到我们已经成功的获取到了服务器的数据。现在小程序已经和后台接口完全打通，后续就能愉快的撸代码了。
搜索微信公众号：老夫撸代码 回复数字 1002 获取完整教程以及代码仓库地址
关注微信公众号：老夫撸代码
老夫撸代码
