Yunshang Office System: WeChat 公式アカウント

ステーション B への直接アクセス (シリコンバレーのような) :
https://www.bilibili.com/video/BV1Ya411S7aT

このブログ投稿は主にコースに関連して公開されており、私自身の意見の一部を組み込んでおり、学習プロセスで遭遇する問題に対する適切な解決策を提供しています。一緒に学び、一緒に進歩しましょう！！！

ここにガイドがあります。ドメイン名をお持ちの場合は、そのドメイン名を直接使用できますが、ドメイン名をお持ちでない場合は、すぐにこの記事で、イントラネットの浸透と WeChat 公式アカウントの開発という非常に優れたテクノロジーを紹介します。次回の研究も楽しみにしています。

記事ディレクトリ

Yunshang Office System: WeChat 公式アカウント

1. 機能説明

従業員はWeChat公式アカウントを使用して承認操作を完了します。関連する機能には、カスタムメニュー、認証ログイン、メッセージが含まれます。

1. WeChat 公式アカウントの最初のレベルのメニューは、承認リスト、承認センター、マイ

2. 従業員は公式アカウントに注意し、従業員は初めて WeChat 公式アカウントにログインし、WeChat 承認ログインを通じて従業員アカウントをバインドします。

3.従業員はWeChat公式アカウントを通じて承認および承認情報を送信し、システムはWeChat公式アカウントに従って承認情報をプッシュし、承認プロセスをタイムリーにフィードバックします。

プロジェクトのスクリーンショット:

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-s3g1g1wf-1688014614430)(assets/1671689364185.png)]

2.公式アカウントメニュー管理

公式アカウント第一階層メニュー、データベースデフォルト初期化（承認リスト、承認センター、鉱山）

ページ効果は次のとおりです。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-MQRwGtld-1688014614432)(assets\image-20230216150123939.png)]$

1.メニュー管理CRUD

1.1、マッパー

package com.atguigu.wechat.mapper;

import com.atguigu.model.wechat.Menu;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface MenuMapper extends BaseMapper<Menu> {
    
    

}

1.2、サービスインターフェース

package com.atguigu.wechat.service;

import com.atguigu.model.wechat.Menu;
import com.atguigu.vo.wechat.MenuVo;
import com.baomidou.mybatisplus.extension.service.IService;
import java.util.List;

public interface MenuService extends IService<Menu> {
    
    

    List<MenuVo> findMenuInfo();

}

1.3. サービスインターフェースの実装

package com.atguigu.wechat.service.impl;

import com.atguigu.model.wechat.Menu;
import com.atguigu.vo.wechat.MenuVo;
import com.atguigu.wechat.mapper.MenuMapper;
import com.atguigu.wechat.service.MenuService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.Comparator;
import java.util.List;
import java.util.stream.Collectors;

@Service
public class MenuServiceImpl extends ServiceImpl<MenuMapper, Menu> implements MenuService {
    
    

    @Autowired
    private MenuMapper menuMapper;

    @Override
    public List<MenuVo> findMenuInfo() {
    
    
        List<MenuVo> list = new ArrayList<>();
        List<Menu> menuList = menuMapper.selectList(null);
        List<Menu> oneMenuList = menuList.stream().filter(menu -> menu.getParentId().longValue() == 0).collect(Collectors.toList());
        for (Menu oneMenu : oneMenuList) {
    
    
            MenuVo oneMenuVo = new MenuVo();
            BeanUtils.copyProperties(oneMenu, oneMenuVo);

            List<Menu> twoMenuList = menuList.stream()
                    .filter(menu -> menu.getParentId().longValue() == oneMenu.getId())
                    .sorted(Comparator.comparing(Menu::getSort))
                    .collect(Collectors.toList());
            List<MenuVo> children = new ArrayList<>();
            for (Menu twoMenu : twoMenuList) {
    
    
                MenuVo twoMenuVo = new MenuVo();
                BeanUtils.copyProperties(twoMenu, twoMenuVo);
                children.add(twoMenuVo);
            }
            oneMenuVo.setChildren(children);
            list.add(oneMenuVo);
        }
        return list;
    }
}

1.4、コントローラーインターフェイス

package com.atguigu.wechat.controller;

import com.atguigu.common.result.Result;
import com.atguigu.model.wechat.Menu;
import com.atguigu.wechat.service.MenuService;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/admin/wechat/menu")
@Slf4j
public class MenuController {
    
    

    @Autowired
    private MenuService menuService;

    //@PreAuthorize("hasAuthority('bnt.menu.list')")
    @ApiOperation(value = "获取")
    @GetMapping("get/{id}")
    public Result get(@PathVariable Long id) {
    
    
        Menu menu = menuService.getById(id);
        return Result.ok(menu);
    }

    //@PreAuthorize("hasAuthority('bnt.menu.add')")
    @ApiOperation(value = "新增")
    @PostMapping("save")
    public Result save(@RequestBody Menu menu) {
    
    
        menuService.save(menu);
        return Result.ok();
    }

    //@PreAuthorize("hasAuthority('bnt.menu.update')")
    @ApiOperation(value = "修改")
    @PutMapping("update")
    public Result updateById(@RequestBody Menu menu) {
    
    
        menuService.updateById(menu);
        return Result.ok();
    }

    //@PreAuthorize("hasAuthority('bnt.menu.remove')")
    @ApiOperation(value = "删除")
    @DeleteMapping("remove/{id}")
    public Result remove(@PathVariable Long id) {
    
    
        menuService.removeById(id);
        return Result.ok();
    }

    //@PreAuthorize("hasAuthority('bnt.menu.list')")
    @ApiOperation(value = "获取全部菜单")
    @GetMapping("findMenuInfo")
    public Result findMenuInfo() {
    
    
        return Result.ok(menuService.findMenuInfo());
    }
}

2. フロントエンドの実装

2.1. API インターフェースの定義

src/api/wechat/menu.js を作成する

import request from '@/utils/request'

const api_name = '/admin/wechat/menu'

export default {
    
    

  findMenuInfo() {
    
    
    return request({
    
    
      url: `${
      
      api_name}/findMenuInfo`,
      method: `get`
    })
  },

  save(menu) {
    
    
    return request({
    
    
      url: `${
      
      api_name}/save`,
      method: `post`,
      data: menu
    })
  },

  getById(id) {
    
    
    return request({
    
    
      url: `${
      
      api_name}/get/${
      
      id}`,
      method: `get`
    })
  },

  updateById(menu) {
    
    
    return request({
    
    
      url: `${
      
      api_name}/update`,
      method: `put`,
      data: menu
    })
  },

  removeById(id) {
    
    
    return request({
    
    
      url: `${
      
      api_name}/remove/${
      
      id}`,
      method: 'delete'
    })
  }
}

2.2. ページの実現

ビュー/wechat/menu/list.vue を作成する

<template>
  <div class="app-container">

    <!-- 工具条 -->
    <div class="tools-div">
      <el-button class="btn-add" size="mini" @click="add">添 加</el-button>
    </div>

    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children'}">

      <el-table-column label="名称" prop="name" width="350"></el-table-column>
      <el-table-column label="类型" width="100">
        <template slot-scope="scope">
          {
   
   { scope.row.type == 'view' ? '链接' : scope.row.type == 'click' ? '事件' : '' }}
        </template>
      </el-table-column>
      <el-table-column label="菜单URL" prop="url" ></el-table-column>
      <el-table-column label="菜单KEY" prop="meunKey"  width="130"></el-table-column>
      <el-table-column label="排序号" prop="sort"  width="70"></el-table-column>
      <el-table-column label="操作" width="170" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.parentId > 0" type="text" size="mini" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="scope.row.parentId > 0" type="text" size="mini" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">

        <el-form-item label="选择一级菜单">
          <el-select
            v-model="menu.parentId"
            placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="menu.name"/>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="menu.type">
            <el-radio label="view">链接</el-radio>
            <el-radio label="click">事件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="menu.type == 'view'" label="链接">
          <el-input v-model="menu.url"/>
        </el-form-item>
        <el-form-item v-if="menu.type == 'click'" label="菜单KEY">
          <el-input v-model="menu.meunKey"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="menu.sort"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import menuApi from '@/api/wechat/menu'
const defaultForm = {
  id: null,
  parentId: 1,
  name: '',
  nameId: null,
  sort: 1,
  type: 'view',
  meunKey: '',
  url: ''
}
export default {

  // 定义数据
  data() {
    return {
      list: [],
      dialogVisible: false,
      menu: defaultForm,
      saveBtnDisabled: false
    }
  },

  // 当页面加载时获取数据
  created() {
    this.fetchData()
  },

  methods: {
    // 调用api层获取数据库中的数据
    fetchData() {
      console.log('加载列表')
      menuApi.findMenuInfo().then(response => {
        this.list = response.data
        console.log(this.list)
      })
    },

    // 根据id删除数据
    removeDataById(id) {
      // debugger
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // promise
        // 点击确定，远程调用ajax
        return menuApi.removeById(id)
      }).then((response) => {
        this.fetchData(this.page)
        this.$message.success(response.message || '删除成功')
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    // -------------
    add() {
      this.dialogVisible = true
      this.menu = Object.assign({}, defaultForm)
    },

    edit(id) {
      this.dialogVisible = true
      this.fetchDataById(id)
    },

    fetchDataById(id) {
      menuApi.getById(id).then(response => {
        this.menu = response.data
      })
    },

    saveOrUpdate() {
      this.saveBtnDisabled = true // 防止表单重复提交

      if (!this.menu.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },

    // 新增
    saveData() {
      menuApi.save(this.menu).then(response => {
        this.$message.success(response.message || '操作成功')
        this.dialogVisible = false
        this.fetchData(this.page)
      })
    },

    // 根据id更新记录
    updateData() {
      menuApi.updateById(this.menu).then(response => {
        this.$message.success(response.message || '操作成功')
        this.dialogVisible = false
        this.fetchData(this.page)
      })
    }
  }
}
</script>

3. プッシュメニュー

バックグラウンドでメニューを構成した後、それを WeChat パブリックプラットフォームにプッシュします

3.1. アカウントの申請

Yunshang オフィスシステムには WeChat 決済などの高度な機能がないため、サービスアカウントを使用する必要はなく、テストアカウントを使用してテストを完了できます。

「WeChat パブリックプラットフォームインターフェイステストアカウント」を使用します。アプリケーションアドレス: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login。正式なアカウントを取得した後、直接切り替えるだけです。

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-PtyVZOJq-1688014614435)(assets/1671602358397.png)]

スキャンしてログインし、テスト番号情報を取得します: appID と appsecret

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-WD8LdEZW-1688014614437)(assets\image-20230216191450386.png)]$

「カスタムメニュー」API ドキュメントを参照してください。

https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html

プッシュメニューを実装するには 2 つの方法があります。

1. インターフェイスドキュメントの http メソッドに完全に従いますが、このメソッドは面倒です

2. weixin-java-mp ツールを使用します。これは直接使用できるパッケージ化されたツールで、便利で高速です。今後の開発にはこの方法を使用します。

3.2. 設定の追加

application-dev.yml に設定を追加します

wechat:
  mpAppId: wx13db7dcf69bc1223
  mpAppSecret: de3d7888d30febf84b64d0e6571e4027

3.3. ツールによる方法

3.3.1. 依存関係の導入

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-mp</artifactId>
    <version>4.1.0</version>
</dependency>

3.3.2. ツールと設定クラスの追加

ツール

package com.atguigu.wechat.config;

import lombok.Data;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Data
@Component
@ConfigurationProperties(prefix = "wechat")
public class WechatAccountConfig {
    
    

    private String mpAppId;

    private String mpAppSecret;

}

構成クラス

package com.atguigu.wechat.config;

import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
import me.chanjar.weixin.mp.config.WxMpConfigStorage;
import me.chanjar.weixin.mp.config.impl.WxMpDefaultConfigImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;

@Component
public class WeChatMpConfig {
    
    

    @Autowired
    private WechatAccountConfig wechatAccountConfig;

    @Bean
    public WxMpService wxMpService(){
    
    
        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
        return wxMpService;
    }

    @Bean
    public WxMpConfigStorage wxMpConfigStorage(){
    
    
        WxMpDefaultConfigImpl wxMpConfigStorage = new WxMpDefaultConfigImpl();
        wxMpConfigStorage.setAppId(wechatAccountConfig.getMpAppId());
        wxMpConfigStorage.setSecret(wechatAccountConfig.getMpAppSecret());
        return wxMpConfigStorage;
    }
}

3.3.3、プッシュインターフェイスの実装

操作クラス: MenuServiceImpl

@Autowired
private WxMpService wxMpService;

@Override
public void syncMenu() {
    
    
    List<MenuVo> menuVoList = this.findMenuInfo();
    //菜单
    JSONArray buttonList = new JSONArray();
    for(MenuVo oneMenuVo : menuVoList) {
    
    
        JSONObject one = new JSONObject();
        one.put("name", oneMenuVo.getName());
        if(CollectionUtils.isEmpty(oneMenuVo.getChildren())) {
    
    
            one.put("type", oneMenuVo.getType());
            one.put("url", "http://oa.atguigu.cn/#"+oneMenuVo.getUrl());
        } else {
    
    
            JSONArray subButton = new JSONArray();
            for(MenuVo twoMenuVo : oneMenuVo.getChildren()) {
    
    
                JSONObject view = new JSONObject();
                view.put("type", twoMenuVo.getType());
                if(twoMenuVo.getType().equals("view")) {
    
    
                    view.put("name", twoMenuVo.getName());
                    //H5页面地址
                    view.put("url", "http://oa.atguigu.cn#"+twoMenuVo.getUrl());
                } else {
    
    
                    view.put("name", twoMenuVo.getName());
                    view.put("key", twoMenuVo.getMeunKey());
                }
                subButton.add(view);
            }
            one.put("sub_button", subButton);
        }
        buttonList.add(one);
    }
    //菜单
    JSONObject button = new JSONObject();
    button.put("button", buttonList);
    try {
    
    
        wxMpService.getMenuService().menuCreate(button.toJSONString());
    } catch (WxErrorException e) {
    
    
        throw new RuntimeException(e);
    }
}

3.3.4、コントローラーインターフェイス

//@PreAuthorize("hasAuthority('bnt.menu.syncMenu')")
@ApiOperation(value = "同步菜单")
@GetMapping("syncMenu")
public Result createMenu() {
    
    
    menuService.syncMenu();
    return Result.ok();
}

3.4 フロントエンドの実装

3.4.1、APIインターフェース

api/wechat/menu.js に追加

syncMenu() {
    
    
  return request({
    
    
    url: `${
      
      api_name}/syncMenu`,
    method: `get`
  })
},

3.4.2. メニューリストに同期機能を追加

1.追加ボタン

<el-button class="btn-add" size="mini" @click="syncMenu" >同步菜单</el-button>

2. メソッドの追加

syncMenu() {
    
    
  this.$confirm('你确定上传菜单吗, 是否继续?', '提示', {
    
    
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    
    
    return menuApi.syncMenu()
  }).then((response) => {
    
    
    this.$message.success(response.message)
  }).catch(error => {
    
    
    console.log('error', error)
    if (error === 'cancel') {
    
    
      this.$message.info('取消上传')
    }
  })
}

4. プッシュメニューの削除

4.1. インターフェースの削除

4.1.1、サービスインターフェース

void removeMenu();

4.1.2. サービスインターフェースの実装

@SneakyThrows
@Override
public void removeMenu() {
    
    
    wxMpService.getMenuService().menuDelete();
}

4.1.3、コントローラーインターフェイス

@PreAuthorize("hasAuthority('bnt.menu.removeMenu')")
@ApiOperation(value = "删除菜单")
@DeleteMapping("removeMenu")
public Result removeMenu() {
    
    
    menuService.removeMenu();
    return Result.ok();
}

4.2. フロントエンドの実装

4.2.1、APIインターフェース

api/wechat/menu.js に追加

removeMenu() {
    
    
    return request({
    
    
      url: `${
      
      api_name}/removeMenu`,
      method: `delete`
    })
  }

4.2.2. メニューリストに同期機能を追加

1.追加ボタン

<el-button class="btn-add" size="mini" @click="removeMenu">删除菜单</el-button>

2. メソッドの追加

removeMenu() {
    
    
  menuApi.removeMenu().then(response => {
    
    
    this.$message.success('菜单已删除')
  })
}

3. WeChat 認証ログイン

現在のバックグラウンド従業員アカウントは WeChat アカウントに関連付けられていないため、WeChat メニューをクリックするときに、ログインするかどうかを決定する必要があります。初めての訪問の場合は、WeChat アカウントと従業員アカウント間のバインドを確立するための関連付けレイヤーがポップアップ表示されます。
ここに画像の説明を挿入

1. サーバー側インターフェースの開発

ここに画像の説明を挿入

1.1. イントラネットペネトレーションの設定 (ngrok)

1.1.1. 登録ユーザー

URL: https://ngrok.cc/login/register

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-TUUfTP9z-1688014614439)(assets\image-20220302155428572.png)]$

1.1.2. 実名認証

(1) 登録が成功したら、システムにログインして実名認証を実行します、認証料金は 2 元です、認証に合格した場合にのみトンネルを開くことができます

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-6LN4fwsE-1688014614441)(assets\image-20220302155551084.png)]$

1.1.3. トンネルを開く

(1) [トンネル管理] -> [トンネルを開く] を選択します。

最後のサーバーは無料サーバーです。無料サーバーはユーザーが多く、ドロップされることが多いため、月額10元の有料サーバーを選択することをお勧めします。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-oAe9D89e-1688014614444)(assets\image-20220302155753120.png)]$

(2) 「今すぐ購入」をクリック -> 関連情報を入力します

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-wtZVhQqw-1688014614446)(assets\image-20220302160247603.png)]$

(3) 開通に成功したら、開通したトンネルを確認します

ここで 2 つのトンネルが開かれます。1 つはバックエンドインターフェイス呼び出し用、もう 1 つは公式アカウントフロントエンド呼び出し用です。

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-p4GNWZCr-1688014614448)(assets\image-20220307092222322.png)]$

1.1.4、トンネルを開始します

(1) クライアントツールをダウンロードする

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-tlEWEmVi-1688014614450)(assets\image-20220302160737471.png)]$

(2) Windowsのバージョンを選択します

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-qgCSD91r-1688014614451)(assets\image-20220302160834683.png)]$

(3) 解凍してbatファイルを見つけ、ダブルクリックして起動します。

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-3s0cMkiD-1688014614453)(assets\image-20220302160924245.png)]$

(4) トンネル ID を入力し、複数をカンマで区切って、最後に Enter キーを押して開始します。

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-Hbrwf4Eh-1688014614456)(assets\image-20220307092329552.png)]$

1.2. 「認可されたコールバックページのドメイン名」を設定する

自分の ID とドメイン名に従って入力し、間違って使用しないように注意してください。！！！！

「[基本的なユーザー情報を取得するための Web ページの認証]」の後に「変更」をクリックし、「認証コールバックページのドメイン名」(ローカル使用イントラネットペネトレーションアドレス)を追加します。

ここに画像の説明を挿入

1.3. ユーザー情報インターフェースアドレスを取得するための認可コールバックの設定

wechat:
  mpAppId: wx13db7dcf69bq1233
  mpAppSecret: de3d7888d30febf84b64d041231e4027
  # 授权回调获取用户信息接口地址
  userInfoUrl: http://ggkt2.vipgz1.91tunnel.com/admin/wechat/userInfo

1.4、コントローラーインターフェイス

package com.atguigu.wechat.controller;

import com.alibaba.fastjson.JSON;
import com.atguigu.common.jwt.JwtHelper;
import com.atguigu.common.result.Result;
import com.atguigu.model.system.SysUser;
import com.atguigu.system.service.SysUserService;
import com.atguigu.vo.wechat.BindPhoneVo;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import me.chanjar.weixin.common.api.WxConsts;
import me.chanjar.weixin.common.bean.WxOAuth2UserInfo;
import me.chanjar.weixin.common.bean.oauth2.WxOAuth2AccessToken;
import me.chanjar.weixin.mp.api.WxMpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.net.URLEncoder;

@Controller
@RequestMapping("/admin/wechat")
@Slf4j
public class WechatController {
    
    

    @Resource
    private SysUserService sysUserService;

    @Autowired
    private WxMpService wxMpService;

    @Value("${wechat.userInfoUrl}")
    private String userInfoUrl;

    @GetMapping("/authorize")
    public String authorize(@RequestParam("returnUrl") String returnUrl, HttpServletRequest request) {
    
    
        //由于授权回调成功后，要返回原地址路径，原地址路径带“#”号，当前returnUrl获取带“#”的url获取不全，因此前端把“#”号替换为“guiguoa”了，这里要还原一下
        String redirectURL = wxMpService.getOAuth2Service().buildAuthorizationUrl(userInfoUrl, WxConsts.OAuth2Scope.SNSAPI_USERINFO, URLEncoder.encode(returnUrl.replace("guiguoa", "#")));
        log.info("【微信网页授权】获取code,redirectURL={}", redirectURL);
        return "redirect:" + redirectURL;
    }

    @GetMapping("/userInfo")
    public String userInfo(@RequestParam("code") String code,
                           @RequestParam("state") String returnUrl) throws Exception {
    
    
        log.info("【微信网页授权】code={}", code);
        log.info("【微信网页授权】state={}", returnUrl);
        WxOAuth2AccessToken accessToken = wxMpService.getOAuth2Service().getAccessToken(code);
        String openId = accessToken.getOpenId();
        log.info("【微信网页授权】openId={}", openId);

        WxOAuth2UserInfo wxMpUser = wxMpService.getOAuth2Service().getUserInfo(accessToken, null);
        log.info("【微信网页授权】wxMpUser={}", JSON.toJSONString(wxMpUser));

        SysUser sysUser = sysUserService.getOne(new LambdaQueryWrapper<SysUser>().eq(SysUser::getOpenId, openId));
        String token = "";
        //null != sysUser 说明已经绑定，反之为建立账号绑定，去页面建立账号绑定
        if(null != sysUser) {
    
    
            token = JwtHelper.createToken(sysUser.getId(), sysUser.getUsername());
        }
        if(returnUrl.indexOf("?") == -1) {
    
    
            return "redirect:" + returnUrl + "?token=" + token + "&openId=" + openId;
        } else {
    
    
            return "redirect:" + returnUrl + "&token=" + token + "&openId=" + openId;
        }
    }

    @ApiOperation(value = "微信账号绑定手机")
    @PostMapping("bindPhone")
    @ResponseBody
    public Result bindPhone(@RequestBody BindPhoneVo bindPhoneVo) {
    
    
        SysUser sysUser = sysUserService.getOne(new LambdaQueryWrapper<SysUser>().eq(SysUser::getPhone, bindPhoneVo.getPhone()));
        if(null != sysUser) {
    
    
            sysUser.setOpenId(bindPhoneVo.getOpenId());
            sysUserService.updateById(sysUser);

            String token = JwtHelper.createToken(sysUser.getId(), sysUser.getUsername());
            return Result.ok(token);
        } else {
    
    
            return Result.fail("手机号码不存在，绑定失败");
        }
    }
}

1.5、インターセプトを除く

WebSecurityConfig クラスで除外インターセプトを構成する

   /**
     * 配置哪些请求不拦截
     * 排除swagger相关请求
     * @param web
     * @throws Exception
     */
    @Override
    public void configure(WebSecurity web) throws Exception {
    
    
        web.ignoring().antMatchers("/admin/modeler/**","/diagram-viewer/**","/editor-app/**","/*.html",
                "/admin/processImage/**",
                "/admin/wechat/authorize","/admin/wechat/userInfo","/admin/wechat/bindPhone",
                "/favicon.ico","/swagger-resources/**", "/webjars/**", "/v2/**", "/swagger-ui.html/**", "/doc.html");
    }

2. モバイルフロントエンド処理

2.1、APIインターフェースを追加

src/api/userInfo.jsにメソッドを追加

bindPhone(bindPhoneVo) {
    
    
  return request({
    
    
    url: `/admin/wechat/bindPhone`,
    method: 'post',
    data: bindPhoneVo
  })
},

2.2. 結合関係

モバイル端末上のすべてのページは認証とログイン後にアクセスする必要があるため、処理用のエントリページ scr/App.vue に処理業務を配置します。

<template>
  <div id="app">
    <router-view />

    <el-dialog title="绑定手机" :visible.sync="dialogVisible" width="80%" >
      <el-form ref="dataForm" :model="bindPhoneVo" size="small">
        <h4>绑定你的手机号，建立云尚办公系统关联关系</h4>
        <el-form-item label="手机号码">
          <el-input v-model="bindPhoneVo.phone"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-check" @click="saveBind()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import userInfoApi from '@/api/userInfo'
export default {
  data() {
    return {
      show: true,
      dialogVisible: false,
      bindPhoneVo: {
        openId: '',
        phone: ''
      }
    };
  },

  created() {
    // 处理微信授权登录
    this.wechatLogin();
  },

  methods: {
    wechatLogin() {
      // 处理微信授权登录
      let token = this.getQueryString('token') || '';
      let openId = this.getQueryString('openId') || '';
      // token === '' && openId != '' 只要这种情况，未绑定账号
      if(token === '' && openId != '') {
        // 绑定账号
        this.bindPhoneVo.openId = openId
        this.dialogVisible = true
      } else {
        // 如果绑定了，授权登录直接返回token
        if(token !== '') {
          window.localStorage.setItem('token', token);
        }
        token = window.localStorage.getItem('token') || '';
        if (token == '') {
          let url = window.location.href.replace('#', 'guiguoa')
          window.location = 'http://oa.atguigu.cn/admin/wechat/authorize?returnUrl=' + url
        }
      }
    },

    saveBind() {
      if(this.bindPhoneVo.phone.length != 11) {
        alert('手机号码格式不正确')
        return
      }
      userInfoApi.bindPhone(this.bindPhoneVo).then(response => {
        window.localStorage.setItem('token', response.data);
        this.dialogVisible = false
        window.location = 'http://oa.atguigu.cn'
      })
    },

    getQueryString (paramName) {
      if(window.location.href.indexOf('?') == -1) return '';

      let searchString = window.location.href.split('?')[1];
      let i, val, params = searchString.split("&");

      for (i=0;i<params.length;i++) {
        val = params[i].split("=");
        if (val[0] == paramName) {
          return val[1];
        }
      }
      return '';
    }
  }
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

2.3. WeChat js リファレンスの追加

public/index.html に js 参照を追加します。

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>

2.4. request.jsの調整

import axios from "axios";

// 创建axios实例
const service = axios.create({
    
    
  baseURL: "http://oa.atguigu.cn", // api 的 base_url
  timeout: 30000 // 请求超时时间
});

// http request 拦截器
service.interceptors.request.use(config => {
    
    
    let token = window.localStorage.getItem("token") || "";
    if (token != "") {
    
    
      config.headers["token"] = token;
    }
    return config;
  },
  err => {
    
    
    return Promise.reject(err);
  });
// http response 拦截器
service.interceptors.response.use(response => {
    
    
    if (response.data.code == 208) {
    
    
      // debugger
      // 替换# 后台获取不到#后面的参数
      let url = window.location.href.replace('#', 'guiguoa')
      window.location = 'http://oa.atguigu.cn/admin/wechat/authorize?returnUrl=' + url
    } else {
    
    
      if (response.data.code == 200) {
    
    
        return response.data;
      } else {
    
    
        // 209没有权限 系统会自动跳转授权登录的，已在App.vue处理过，不需要提示
        if (response.data.code != 209) {
    
    
          alert(response.data.message || "error");
        }
        return Promise.reject(response);
      }
    }
  },
  error => {
    
    
    return Promise.reject(error.response);   // 返回接口返回的错误信息
  });

export default service;

2.5. テスト

ここに画像の説明を挿入

4. ニュースプッシュ

承認待ちの情報については、承認者に承認を通知する必要があり、承認者が承認した後は、提出申請者に情報を閲覧するよう通知する必要があります。

メッセージのプッシュには「WeChat テンプレートメッセージ」インターフェイスを使用します

1. WeChat テンプレートメッセージを構成する

1. 承認待ち: { {first.DATA}} 承認番号: { {keyword1.DATA}} 提出時刻: { {keyword2.DATA}} { {content.DATA}}

2. 承認は処理されました: { {first.DATA}} 承認番号: { {keyword1.DATA}} 提出時刻: { { keyword2.DATA}} 現在の承認者: { {keyword3.DATA}} 承認ステータス: { {keyword4.DATA}} { {content.DATA}}

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-vAqaRaxM-1688014614461)(assets/1671609701750.png)]

2. インターフェースを定義する

package com.atguigu.wechat.service;

public interface MessageService {
    
    

    /**
     * 推送待审批人员
     * @param processId
     * @param userId
     * @param taskId
     */
    void pushPendingMessage(Long processId, Long userId, String taskId);

    /**
     * 审批后推送提交审批人员
     * @param processId
     * @param userId
     * @param status
     */
    void pushProcessedMessage(Long processId, Long userId, Integer status);

}

3. サービスインターフェースの実装

package com.atguigu.wechat.service.impl;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.atguigu.model.process.Process;
import com.atguigu.model.process.ProcessTemplate;
import com.atguigu.model.system.SysUser;
import com.atguigu.process.service.ProcessService;
import com.atguigu.process.service.ProcessTemplateService;
import com.atguigu.security.custom.LoginUserInfoHelper;
import com.atguigu.system.service.SysUserService;
import com.atguigu.wechat.service.MessageService;
import lombok.SneakyThrows;
import lombok.extern.slf4j.Slf4j;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.bean.template.WxMpTemplateData;
import me.chanjar.weixin.mp.bean.template.WxMpTemplateMessage;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;

import javax.annotation.Resource;
import java.util.Map;

@Slf4j
@Service
public class MessageServiceImpl implements MessageService {
    
    

    @Resource
    private WxMpService wxMpService;

    @Resource
    private ProcessService processService;

    @Resource
    private ProcessTemplateService processTemplateService;

    @Resource
    private SysUserService sysUserService;

    @SneakyThrows
    @Override
    public void pushPendingMessage(Long processId, Long userId, String taskId) {
    
    
        Process process = processService.getById(processId);
        ProcessTemplate processTemplate = processTemplateService.getById(process.getProcessTemplateId());
        SysUser sysUser = sysUserService.getById(userId);
        SysUser submitSysUser = sysUserService.getById(process.getUserId());
        String openid = sysUser.getOpenId();
        //方便测试，给默认值（开发者本人的openId）
        if(StringUtils.isEmpty(openid)) {
    
    
            openid = "omwf25izKON9dktgoy0dogqvnGhk";
        }
        WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder()
        .toUser(openid)//要推送的用户openid
        .templateId("KvOVeW7jz4-DZgQ_WuXjMZO5I4pPA7L7fflVNwC_ZQg")//模板id
        .url("http://oa.atguigu.cn/#/show/"+processId+"/"+taskId)//点击模板消息要访问的网址
        .build();
        JSONObject jsonObject = JSON.parseObject(process.getFormValues());
        JSONObject formShowData = jsonObject.getJSONObject("formShowData");
        StringBuffer content = new StringBuffer();
        for (Map.Entry entry : formShowData.entrySet()) {
    
    
            content.append(entry.getKey()).append("：").append(entry.getValue()).append("\n ");
        }
        templateMessage.addData(new WxMpTemplateData("first", submitSysUser.getName()+"提交了"+processTemplate.getName()+"审批申请，请注意查看。", "#272727"));
        templateMessage.addData(new WxMpTemplateData("keyword1", process.getProcessCode(), "#272727"));
        templateMessage.addData(new WxMpTemplateData("keyword2", new DateTime(process.getCreateTime()).toString("yyyy-MM-dd HH:mm:ss"), "#272727"));
         templateMessage.addData(new WxMpTemplateData("content", content.toString(), "#272727"));
        String msg = wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage);
        log.info("推送消息返回：{}", msg);
    }

    @SneakyThrows
    @Override
    public void pushProcessedMessage(Long processId, Long userId, Integer status) {
    
    
        Process process = processService.getById(processId);
        ProcessTemplate processTemplate = processTemplateService.getById(process.getProcessTemplateId());
        SysUser sysUser = sysUserService.getById(userId);
        SysUser currentSysUser = sysUserService.getById(LoginUserInfoHelper.getUserId());
        String openid = sysUser.getOpenId();
        if(StringUtils.isEmpty(openid)) {
    
    
            openid = "omwf25izKON9dktgoy0dogqvnGhk";
        }
        WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder()
                .toUser(openid)//要推送的用户openid
                .templateId("I0kVeto7T0WIDP6tyoHh-hx83wa9_pe7Nx9eT93-6sc")//模板id
                .url("http://oa.atguigu.cn/#/show/"+processId+"/0")//点击模板消息要访问的网址
                .build();
        JSONObject jsonObject = JSON.parseObject(process.getFormValues());
        JSONObject formShowData = jsonObject.getJSONObject("formShowData");
        StringBuffer content = new StringBuffer();
        for (Map.Entry entry : formShowData.entrySet()) {
    
    
            content.append(entry.getKey()).append("：").append(entry.getValue()).append("\n ");
        }
        templateMessage.addData(new WxMpTemplateData("first", "你发起的"+processTemplate.getName()+"审批申请已经被处理了，请注意查看。", "#272727"));
        templateMessage.addData(new WxMpTemplateData("keyword1", process.getProcessCode(), "#272727"));
        templateMessage.addData(new WxMpTemplateData("keyword2", new DateTime(process.getCreateTime()).toString("yyyy-MM-dd HH:mm:ss"), "#272727"));
        templateMessage.addData(new WxMpTemplateData("keyword3", currentSysUser.getName(), "#272727"));
        templateMessage.addData(new WxMpTemplateData("keyword4", status == 1 ? "审批通过" : "审批拒绝", status == 1 ? "#009966" : "#FF0033"));
        templateMessage.addData(new WxMpTemplateData("content", content.toString(), "#272727"));
        String msg = wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage);
        log.info("推送消息返回：{}", msg);
    }

}

4. プッシュコール

4.1. プロセスインスタンスインターフェースの開始

コードセグメント

@Autowired
private MessageService messageService;

@Transactional
public Process startUp(ProcessFormVo processFormVo) {
    
    
    ...

    //计算下一个审批人
    List<Task> taskList = this.getCurrentTaskList(processInstanceId);
    if (!CollectionUtils.isEmpty(taskList)) {
    
    
        List<String> assigneeList = new ArrayList<>();
        for(Task task : taskList) {
    
    
            SysUser sysUser = sysUserService.getByUsername(task.getAssignee());
            assigneeList.add(sysUser.getName());

            //推送消息给下一个审批人
            messageService.pushPendingMessage(process.getId(), sysUser.getId(), task.getId());
        }
        process.setDescription("等待" + StringUtils.join(assigneeList.toArray(), ",") + "审批");
    }

    processMapper.updateById(process);
    return process;
}

4.2. 承認インターフェース

コードセグメント

public void approve(ApprovalVo approvalVo) {
    
    
    ...

    //计算下一个审批人
    Process process = this.getById(approvalVo.getProcessId());
    List<Task> taskList = this.getCurrentTaskList(process.getProcessInstanceId());
    if (!CollectionUtils.isEmpty(taskList)) {
    
    
        List<String> assigneeList = new ArrayList<>();
        for(Task task : taskList) {
    
    
            SysUser sysUser = sysUserService.getByUsername(task.getAssignee());
            assigneeList.add(sysUser.getName());

            //推送消息给下一个审批人
            messageService.pushPendingMessage(process.getId(), sysUser.getId(), task.getId());
        }

        process.setDescription("等待" + StringUtils.join(assigneeList.toArray(), ",") + "审批");
        process.setStatus(1);
    } else {
    
    
        ...
    }
    //推送消息给申请人
    messageService.pushProcessedMessage(process.getId(), process.getUserId(), approvalVo.getStatus());
    this.updateById(process);
}

11. Yunshang Office System - WeChat 公式アカウント

Yunshang Office System: WeChat 公式アカウント

記事ディレクトリ

1. 機能説明

2.公式アカウントメニュー管理

1.メニュー管理CRUD

1.1、マッパー

1.2、サービスインターフェース

1.3. サービスインターフェースの実装

1.4、コントローラーインターフェイス

2. フロントエンドの実装

2.1. API インターフェースの定義

2.2. ページの実現

3. プッシュメニュー

3.1. アカウントの申請

3.2. 設定の追加

3.3. ツールによる方法

3.3.1. 依存関係の導入

3.3.2. ツールと設定クラスの追加

3.3.3、プッシュインターフェイスの実装

3.3.4、コントローラーインターフェイス

3.4 フロントエンドの実装

3.4.1、APIインターフェース

3.4.2. メニューリストに同期機能を追加

4. プッシュメニューの削除

4.1. インターフェースの削除

4.1.1、サービスインターフェース

4.1.2. サービスインターフェースの実装

4.1.3、コントローラーインターフェイス

4.2. フロントエンドの実装

4.2.1、APIインターフェース

4.2.2. メニューリストに同期機能を追加

3. WeChat 認証ログイン

1. サーバー側インターフェースの開発

1.1. イントラネットペネトレーションの設定 (ngrok)

1.1.1. 登録ユーザー

1.1.2. 実名認証

1.1.3. トンネルを開く

1.1.4、トンネルを開始します

1.2. 「認可されたコールバックページのドメイン名」を設定する

1.3. ユーザー情報インターフェースアドレスを取得するための認可コールバックの設定

1.4、コントローラーインターフェイス

1.5、インターセプトを除く

2. モバイルフロントエンド処理

2.1、APIインターフェースを追加

2.2. 結合関係

2.3. WeChat js リファレンスの追加

2.4. request.jsの調整

2.5. テスト

4. ニュースプッシュ

1. WeChat テンプレート メッセージを構成する

2. インターフェースを定義する

3. サービスインターフェースの実装

4. プッシュコール

4.1. プロセスインスタンスインターフェースの開始

4.2. 承認インターフェース

おすすめ

1. WeChat テンプレートメッセージを構成する