置顶 Taro教程之开发一款相亲类微信小程序-基础配置
发布于 4 个月前 作者 JavaBird 259 次浏览 最后一次编辑是 3 个月前 来自 分享

在前面我们已经把开发环境搭建好了,接下来进行简单的架构设计。

小程序结构调整

在开发功能之前通常我们要做一些项目结构的规划和调整,一般会按照程序代码架构进行区分,比如控制器、模型、视图等等,将实现上述功能代码按照文件夹的形式区分,再然后将业务代码按照既定架构的设计,依次开始写入代码。

通常的软件开发包括需求分析、概设、详设、数据库设计、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](/user/author): pythonsir <baidu211@vip.qq.com> 
 * [@weixin](/user/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。

现在返回到微信开发工具中查看访问服务器端接口,可以看到我们已经成功的获取到了服务器的数据。现在小程序已经和后台接口完全打通,后续就能愉快的撸代码了。 搜索微信公众号:老夫撸代码 回复数字 1003 获取完整教程以及代码仓库地址

关注微信公众号:老夫撸代码

老夫撸代码


版权声明:未经授权,不得转载

回到顶部