# 基礎配置
## 服務端安裝think-weichat中間件
[https://github.com/akira-cn/think-wechat](https://github.com/akira-cn/think-wechat)
~~~
$ npm install think-wechat
~~~
## 配置 middleware
* 編輯 config/middleware.js
~~~js
const path = require('path');
const wechat = require('think-wechat')
const isDev = think.env === 'development';
module.exports = [
{
handle: wechat,
match: '/home/weixin',
options: {
token: 'weixin',
appid: 'wxf23493b0cf5d0804',
//encodingAESKey: '', //測試號不需要配置
checkSignature: true, // 可選,默認為true。由于微信公眾平臺接口調試工具在明文模式下不發送簽名,所以如要使用該測試工具,請將其設置為false
},
},
{
handle: 'payload',
options: {
uploadDir: path.join(think.ROOT_PATH, 'runtime/data'),
},
},
];
~~~
**注意**:think-wechat 必須要在 payload 中間件前面加載,它會代替 payload 處理微信發過來的 post 請求中的數據。
* 根據 match 配置,增加對應的 controller 和 action
## 登陸微信官方開發者中心,配置接口信息
請填寫接口配置信息,此信息需要你有自己的服務器資源,填寫的URL需要正確響應微信發送的Token驗證,請閱讀[消息接口使用指南](http://mp.weixin.qq.com/wiki/index.php?title=%E6%B6%88%E6%81%AF%E6%8E%A5%E5%8F%A3%E6%8C%87%E5%8D%97)。
URL:[http://zengqingsong.oicp.net/home/weixin](http://zengqingsong.oicp.net/home/weixin)
Token:weixin
> 本地開發,可以使用花生殼做本地域名映射(微信公眾號開發必須80端口,所以需要有公網的服務器,本地開發使用花生殼做代理)
支持的 action 包括:textAction、imageAction、voiceAction、videoAction、shortvideoAction、locationAction、linkAction、eventAction、deviceTextAction、deviceEventAction。
## DEMO
增加控制器home/controller/weixin
```
const DEFULT_AUTO_REPLY = '功能正在開發中~';
const BaseController = require('./base.js');
module.exports = class extends BaseController {
constructor(ctx) {
super(ctx);
}
//支持的 action
// 包括:textAction、imageAction、voiceAction、videoAction、shortvideoAction、locationAction、linkAction、eventAction、deviceTextAction、deviceEventAction。
// https://github.com/akira-cn/think-wechat https://github.com/node-webot/wechat
//微信公眾號控制器
/**
* index action
* @return {Promise} []
*/
indexAction() {
///home/weixin/index?signature=6a8f855d69d080052142b85da4faafe149168a1d&echostr=7148202192707206511×tamp=1558920224&nonce=418613906
// 驗證開發者服務器
// 這里只是演示,所以沒做簽名校驗,實際上應該要根據微信要求進行簽名校驗
const echostr = this.get('echostr');
return echostr;
}
textAction() {
//發送文本消息
const {Content} = this.post();
//this.success('你發送給我的是:' + Content.trim());
this.success([
{
title: '你來我家接我吧',
description: '這是女神與高富帥之間的對話',
picurl: 'http://nodeapi.cloudfoundry.com/qrcode.jpg',
url: 'http://nodeapi.cloudfoundry.com/',
},
]);
}
eventAction() {
const message = this.post();
this.success(JSON.stringify(message));
}
__call() {
this.success(DEFULT_AUTO_REPLY);
}
};
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- 移動客戶端開發
- uni-app基礎
- 快速入門程序
- 單頁程序
- 底部Tab導航
- Vue語法基礎
- 模版語法
- 計算屬性與偵聽器
- Class與Style綁定
- 樣式與布局
- Box模型
- Flex布局
- 內置指令
- 基本指令
- v-model與表單
- 條件渲染指令
- 列表渲染指令v-for
- 事件與自定義屬性
- 生命周期
- 項目實踐
- 學生實驗
- 貝店商品列表
- 加載更多數據
- 詳情頁面
- 自定義組件
- 內置組件
- 表單組件
- 技術專題
- 狀態管理vuex
- Flyio
- Mockjs
- SCSS
- 條件編譯
- 常用功能實現
- 上拉加載更多數據
- 數據加載綜合案例
- Teaset UI組件庫
- Teaset設計
- Teaset使用基礎
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代碼模版
- 項目實踐
- 標簽組件
- 失物招領客戶端原型
- 發布頁面
- 檢索頁面
- 詳情頁面
- 服務端開發技術
- 服務端開發環境配置
- Koajs快速入門
- 快速入門
- 常用Koa中間件介紹
- 文件上傳
- RestfulApi
- 一個復雜的RESTful例子
- 使用Mockjs生成模擬數據
- Thinkjs快速入門
- MVC模式
- Thinkjs介紹
- 快速入門
- RESTful服務
- RBAC案例
- 關聯模型
- 應用開發框架
- 服務端開發
- PC端管理界面開發
- 移動端開發
- 項目實踐
- 失物招領項目
- 移動客戶端UI設計
- 服務端設計
- 數據庫設計
- Event(事件)
- 客戶端設計
- 事件列表頁面
- 發布頁面
- 事件詳情頁面
- API設計
- image
- event
- 微信公眾號開發
- ui設計規范