Skip to content

[WLLS]基于微信小程序开发所需的前后端需求,搭建以laravel,lavas,微信小程序基础代码为基线的平台

License

Notifications You must be signed in to change notification settings

pailjin/wechat-laravel-lavas-system

Repository files navigation

wechat-laravel-lavas-system【WLLS】

主要目的是在微信小程序系统的搭建初期,方便快速构建,前后台页面基本框架,基本的用户注册登录和图片/视频等资源的上传以及微信支付。

架构图

主要功能:

  • Laravel提供API基础功能(用户,七牛,微信支付,等)
  • Lavas后台admin网站登录使用微信小程序授权,并支持权限管理
  • 微信小程序用户自动注册和登录
  • Lavas集成UI插件(mint UI,muse UI),兼容PC和移动前端

写在最前:

  • 参考和使用的git代码:

laravel-boilerplate

小程序授权登录思路参考

微信小程序二维码官方介绍

Lavas百度官方介绍

另外,希望你是知道什么是laravel,lavas,微信小程序的基本开发过程.等,或者知道一些开源框架的基本使用。

(详细编写中...)

环境安装

基础环境要求:

代码运行

一、Laravel:

进入laravel目录

cd laravel

1配置config

  1. .env文件
  • 拷贝.evn.example为.evn,并修改关键参数:

  • 数据库mysql (提前创建一个空的数据库db,不需要创建table)

  • APP_NAME

  • JWT_SECRET(手动改一下,或者生成,或者不改)

  • APP_KEY(手动改一下,或者生成,或者不改。php artisan key:generate)

2安装依赖库

   composer install

3生成基础数据库migration

(先确保数据库db已经创建)

php artisan migrate

4配置自己平台的参数

目录:/laravel/config/

  • 七牛配置:qiniu.php

  • 微信配置(小程序和支付):weixinpay.php

  • 微信退款需要的证书目录,请更新自己的证书文件

laravel/app/wxpaycert

5对外api route说明

目录:laravel/routes/api.php 支持的api route列举在其中

(我关闭了标准的login/signup之类的api,因为微信小程序中使用wx.login自动注册登录【下面详细说】)

6本地测试。

建议使用valet(参见官方:https://laravel.com/docs/5.6/valet)

访问: http://[域名]/api/hello 如果可以访问则运行正常

7部署到服务器

整个laravel目录需要拷贝到服务器。配置php环境。 由于一般不会把vendor的依赖库和.evn 发布到您的git仓库。所以需要进入服务器把.evn 文件和vendor重新生成。 也就是:

拷贝.evn.example为.evn,并修改关键参数
composer install
注意:laravel/public 为网站服务器的root根目录[这些属于laravel的基本操作,其他的操作不赘述了]

8权限管理

配合pc后台管理,需要一个管理员/员工的权限管理,去限制数据库/api的某些操作。

  • 使用checkadmin middleware 路径为:

    laravel/app/Http/Middleware/checkadmin.php
    

    对应使用该middleware的controller有

    laravel/app/Api/V1/Controllers/UserController.php
    

    中的__construct

    可以参考修改checkadmin.php丰富您的权限管理

二、lavas后台架构

1安装lavas

参考lavas官方网站的步骤

npm install lavas -g

2进入lavas目录

cd lavas

3安装依赖库

npm install

4修改配置

(可选)关注本地测试时的api proxy【lavas/server.dev.js中的proxyTable】

5本地测试

lavas dev

访问http://localhost:3000/ 如果正常,则成功

lavas

6说明

当前只实现了‘登录’按钮功能(即授权登录)

7后台admin授权登录设计

参考附件:《微信小程序授权登录设计-0609.pptx》

PC授权登录

8部署到服务器

lavas build

生成dist/目录,该目录为需要发布到您服务器网站

三、微信小程序

基于微信官方开发工具生成的代码框架。

1修改参数

wechat/config.js中api域名和七牛域名

var host = 'https://api.abc.com';
var qiniudomain = 'https://qinius.abc.com';

wechat/project.config.json中微信小程序appid和project name

"appid": "xxxxxxxxxxxxxx",
"projectname": "WLLxcx",

2关键代码说明

自动登录(wechat/app.js)

wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId,但api并不会返回openid,而是直接自动登录,返回用户信息。并且自动注册和登录
    wx.request({
      url: config.service.requestUrl+'/wxlogin/'+res.code, //仅为示例,并非真实的接口地址
      data: {
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      method: 'GET',
      success: function(res) {
        console.log('wx.login---res==',res.data);

        if(res.data.status=='ok'){
          var ret = res.data.ret;
          _this.globalData.iflogin = true;
          _this.globalData.apitoken = ret.token;
          _this.globalData.userInfo = ret.userinfo;
          if (this.apiloginCallback) {
            this.apiloginCallback()
          }
        }else{
          _this.globalData.iflogin = false;
          _this.globalData.apitoken = '';
          _this.globalData.userInfo = null;
        }
      }
    })

注意代码段中的wx.request的使用,以及返回值。请对应去laravel API代码中controller对应的代码处理。

3七牛上传

实例代码路径:

wechat/pages/personalcenter/personalcenter.js的modifyUserIcon函数

最后

代码在完善中,也欢迎一起加入.

LICENSE

Released under the MIT License