如何在微信小程序中快速添加一个论坛

原创

群鱼湾A哥-找搭子找人脉

发布于 2025-07-18 21:51:03

15900

代码可运行

运行总次数：0

代码可运行

论坛核心程序
1. 核心程序Flarum 我们之所以选择Flarum因为它足够轻便，而且前端具有自适应性，不管在电脑端还是手机端都能获得很好的展现效果，头顶的banner彩虹色，每个人，每个话题可以显示不同的颜色，非常适合年轻人使用，还有庞大的插件市场，我们就减少了自己造轮子。
2. Flarum要求环境：
  - PHP7.3以上并开启以下扩展：curl、dom、fileinfo、gd、json、mbstring、openssl、pdo_mysql、tokenizer、zip。
  - Apache（需要启用 mod_rewrite 重写模块) 或 Nginx
  - MySQL 5.6+ 或 MariaDB 10.0.5+
3. 选择服务器为了能够流畅地运行Flarum，我们建议2核CPU，4G内存以上的服务器，带宽8M以上。
4. 安装宝塔为了方便管理及安装PHP、mysql等，我们选择使用宝塔。到宝塔官网选择适合自己操作系统的版本进行安装，我们这里使用的是centos，以下以centos为例，SSH方式登录服务器后，复制相关安装命令：

url=https://download.bt.cn/install/install_panel.sh;if [ -f /usr/bin/curl ];then curl -sSO $url;else wget -O install_panel.sh $url;fi;bash install_panel.sh ed8484bec

在小程序webview中打开论坛
1. 在小程序中添加webview页面由于微信小程序的webview页面默认是全屏的，而且没得调，所以我们只能在uniapp的pages.json,页面添加使用默认导航栏,方便显示webview的后退按钮。
2. 向小程序传递论坛网站的url 向webview页面传递的src参数里包含了论坛的URL,在webview页面的onLoad(options)里获取src的内容 this.webViewSrc = decodeURIComponent(options.src) || '' 到这里已经可以在webview中打开论坛。
如何自动注册论坛用户
1. Flarum注册用户 Flarum注册用户必须要有csrf_token，所以我们在注册之前必须先访问一遍论坛，获取到论坛返回来的cookie和csrf_token，在webview页面中需要写一个访问论坛的方法：

async httpFlarum(params) {
  return new Promise(await
                     function(resolve, reject) {
                       uni.request({
                         ...params,
                         success(res) {
                           resolve(res)
                         },
                         fail(e) {
                           console.log('请求失败', e);
                           uni.showToast({
                             title: '网络不稳定，请重试',
                             icon: 'none'
                           })
                           reject({
                             'message': '网络不稳定'
                           })
                         },
                         complete() {
                           console.log('完成请求')
                         }
                       })
                     })

}

把返回的cookie和csrf_token获取到，并保存：

setBBSCookie(data) {
				this.header['X-CSRF-Token'] = data["X-CSRF-Token"]
				this.header.cookie = data['Set-Cookie']
				uni.setStorageSync('flarum_session', data["Set-Cookie"])
				uni.setStorageSync('X-CSRF-Token', data['X-CSRF-Token'])
			}

设置头部信息，然后访问论坛的用户注册api:

async registerBBSUser() {

				this.params.url = this.bbsUrl + '/api/users'
				this.params.header = {
					...this.header
				}
				this.params.data = {
					"data": {
						 "attributes": {
                 "username": "YongHuMing",
                 "email": "flarum@example.com",
                 "password": "MiMa"
             }
					}
				}
				this.params.method = 'post'


				await this.httpFlarum(this.params).then((res) => {
					//注册成功就保存信息并登录
					if (res.statusCode === 200) {
						this.setBBSCookie(res.header)
						this.loginBBS()
					}
				})
			}

email是必须的，而且还要激活，这需要在论坛写一个自动激活的扩展，我不想写成扩展包，就直接写在扩展文件里。

return [
    // Register extenders here to customize your forum!
    (new Extend\Event())
        ->listen(Registered::class, function (Registered $event) {
            $request = resolve('Illuminate\Http\Request');
            $user = $event->user;
            //用户注册自动激活
            $user->is_email_confirmed = true;
            $user->save();
        })
];

用户名和邮箱地址不重复的情况下现是就可以完成用户自动注册并激活的功能。注册成功后该api会返回一个token和一个userId，cookie和csrf_token也被更新。

如何实现论坛用户就可以自动登录由于我们使用小程序webview，并不能像官网文档一样拿到token就可以访问，因为小程序的webview不允许设置header,所以我们访问登录api得到的token无法通过header传递，因此我们只能写自己的扩展来完成登录功能，我们只能通过URL向论坛传递参数，只有这个办法是最现实的，其他通过事件的方法都不现实，因为小程序webview加载事件里传不了参数过去，其他事件需要用户分享、或返回才触发就非常不现实。
1. 通过api接口登录 Flarum的登录接口是/api/token，我们也可以post到/login进行登录，必须post的内容如下：

{
    "identification": "张三",
    "password": "张三的密码"
}

用户名密码正确的情况下会返回token、userId：

{
    "token": "YACub2KLfe8mfmHPcUKtt6t2SMJOGPXnZbqhc3nX",
    "userId": "1"
}

class WechatAutoLoginController implements RequestHandlerInterface
{
    protected $authenticator;


    public function __construct(SessionAuthenticator $authenticator) {
        $this->authenticator = $authenticator;
    }

    public function handle(Request $request): Response
    {
        $token = ($request->getQueryParams())['token'];
        //去除多余字符串
        $token = explode("/", $token);
        // 验证令牌并登录用户（伪代码）
        $accessToken = AccessToken::findValid($token);
        if (!$accessToken) {
            return new HtmlResponse('<h1>Token无效或已过期</h1>',403);
        }
        $this->authenticator->login($request->getAttribute('session'),$accessToken);
        return new RedirectResponse('/', 302);
    }
}

在这里我们先获取到URL请求中的token参数，然后使用Flarum自带的AccessToken：：findValid验证token,如果token过期或无效就返回403，如果token有效就验证用户的登录状态，最后把页面重定向回论坛主页，给用户一种刚刚打开主页的感觉。

修改composer.json 我们已经添加了处理业务逻辑的类，但这个类目前还不起作用，php也找不到它，为了能让项目自动找得到它，我们需要修改composer.json,在里面添加以下代码，其中 "Qyw\\Bbs\\"这两个字符随便你取名，后面的src/正确就行。

"autoload": {
        "psr-4": {
            "Qyw\\Bbs\\": "src/"
        }
    }

(new Extend\Routes('forum'))
        ->get('/wechatlogin', 'wechat.login', WechatAutoLoginController::class),

注意引入自己写的扩展类才可以使用，这里的意思是我们添加一个"/wechatlogin"的路由，这个路由的业务由我们自己写的类处理。

访问测试登录我们可以通过访问自己网站：“http://bbs.qunyuwan.com/wechatlogin?token=XXX”来测试登录是否成功，如果能跳转到首页，并且能显示用户名就说明登录成功。我们使用过期的token或不存在的token测试一下是不是返回403，如果能正常返回403就说明这个业务处理正常。
在webview中访问登录在webview打开页面前我们必须完成以上工作，然后我们把webview的src改为：http://bbs.qunyuwan.com/wechatlogin?token=XXX，这样就可以实现用户自动登录。

如何实现用户昵称、头像与小程序同步
1. 昵称同步我们可以很容易获得微信小程序的用户昵称，但我们怎么同步到论坛呢，其实flarum有一个修改用户信息的API，但在我们使用这个API前我们必须先获得token,所以我们在用户登录后，紧接着就要写修改用户昵称的代码，修改用户的API使用的是patch方法，接口是：/api/users,请求头必须把登录返回的token带上，Authorization: Token 你的_API_秘钥_值; userId=1，修改信息和注册信息的写法相同：

"data": {
						"attributes": {
							"nickname":  "张三",
						}
					}

protected $settings;

    public function __construct(SettingsRepositoryInterface $settings)
    {
        $this->settings = $settings;
    }

    public function handle(Saving $event)
    {
        $user = $event->user;
        $data = $event->data;
        $actor = $event->actor;
        $attributes = Arr::get($data, 'attributes', []);

        if (isset($attributes['avatar'])) {
            $actor->assertCan('editNickname', $user);

            $avatar = $attributes['avatar'];


            if ($user->avatar_url !== $avatar) {
                $user->avatar_url = $avatar;
            }
        }
    }

在这个类中我们监听用户保存信息，当用户保存时我们把请求中获得的昵称和头像都添加到用户属性里并保存。

在extend.php中添加监听事件

(new Extend\Event())
    ->listen(Saving::class, SaveAvatarToDatabase::class)

这样我们就可以监听用户保存事件了，我们从小程序传递头像信息过来时就会触发用户保存事件。

发布后的效果如下

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序

小程序云开发

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度

如何在微信小程序中快速添加一个论坛

如何在微信小程序中快速添加一个论坛

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐