要搞一個小型的cms內容發布系統
因為小程序上線之后，直接對數據庫進行操作的話，慧出問題的，所以一般都會做一個管理系統，讓工作人員通過這個管理系統來對這個數據庫進行增刪改查
微信小程序其實給我們提供了這樣的能力了
（也就是可以在自己已有的服務器來進行雲操作，所以就可以通過這個CMS內容管理系統來對雲數據庫進行修改）
我們就要建立自己的web服務器--》搭建一個簡易的服務器
https://koa.bootcss.com/
這個是要node版本是7以上，可以在node官網去搭建，我這邊之前按照過了，直接cmd打開，通過 node -v查看版本
然后還要下載一個 cnpm，這個主要是下載第三方模塊用的
https://www.cnblogs.com/biglovevolcaner/p/6707746.html
打開cmd，直接輸入這位大佬博客里面的語句進行安裝即可了
這些都准備好了之后，就可以開始koa2的服務器搭建了
我們選擇koa的腳手架 koa-generator
https://blog.csdn.net/sinat_39049092/article/details/104575018
（跟這個博客到第三步就行）
然后我們就可以到想要搭建系統的文件中（我在d盤新建了一個weapp文件）
在cmd中輸入 D:\weapp 之后輸入 d：即可跳轉
輸入 koa2 miaomiao-cms -e
（后面的-e表示的是選擇ejs模板）
然后安裝提示，我們進入到這個建立的東西 cd miaomiao-cms
然后安裝一些初始的模塊
輸入 cnpm i
創立完之后，就可以去啟動了，我們通過 npm start
啟動好之后，我們在網頁中 輸入 localhost:3000
如果看到了這個界面的話，說明web服務器就已經搭建好了，就可以在這個web服務器下做一個簡易的cms系統了
之后就可以在d盤找到這個文件了
其中的public主要是放一些靜態資源的
在vscode里面打開我們的文件
這個index其實就是類似於可以在前端顯示的
實現引入 axios.min.js 可以通過npm安裝，也可以使用網上開源的
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
通過設置：
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <h1><%= title %></h1> <p>EJS Welcome to <%= title %></p> <label for=""> 上傳圖片 : <input type="file" id="uploadBtn"> </label> </body> </html>
我們可以看到
注意：假如網頁打不開，或者是沒更新出現的html結構的話，就重新的在這個miaomiao.cms下面 npm start重新打開
隨便選一張圖片，onchange就是只要選擇了圖片的話，就會觸發這個事件了，file就是拿到的我們上傳的文件了
拿到這個圖片要怎么傳輸給后台呢，這個時候就要進行文件操作了FormData這個對象來實現了
通過append 給這個param對象添加一個key為file value為 。也就是通過這個append來產生一個鍵值對
然后把這個對象通過axios來傳輸到后端
這就是axios中傳輸給后端文件的代碼
在傳輸之前，先對 config 配置文件 進行設置，告訴我們后端這個是一個文件數據流
配置好了之后，就可以通過post把圖片傳輸給后台的接口 uploadBannerImg
通過下面的代碼
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <h1>與你相遇-CMS管理系統</h1> <label for=""> 上傳圖片 : <input type="file" id="uploadBtn"> </label> <script> var uploadBtn = document.getElementById('uploadBtn'); uploadBtn.onchange = function(ev){ var file = ev.target.files[0]; var param = new FormData(); param.append('file' , file); var config = { headers : { 'Content-Type' : 'multipart/form-data' } }; axios.post('/uploadBannerImg' , param , config).then((res)=>{ console.log( res.data ); }); }; </script> </body> </html>
然后就是開始搞 定義 uploadBannerImg 這個接口了
在routes-》index.js里面，添加上這個代碼
router.post('/uploadBannerImg' , async(ctx , next)=>{
var files = ctx.request.files;
console.log( files );
})
我們添加一個圖片，然后可以看到在后端中
會發現404了，我們再通過 npm start來開啟
先要結束上面的操作，通過 ctrl+c 彈出
然后輸入y之后，通過npm start，然后再次上傳圖片
打印出來了這個，說明file為undefined 也就是沒拿到這個圖片了
這個是因為koa默認是得不到我們上傳文件的東西的，還需要下載一個第三方的模塊來輔助完成這個功能才行
通過在miaomiao-cms目錄下的cmd 輸入 cnpm i -S koa-body
下載好了之后，在app.js里面，引入koa-body
const koaBody = require('koa-body')
然后在app.js里面做一個簡單的配置
app.use(koaBody({ multipart : true,//指定是否可以上傳多張
formidable : { maxFileSize : 200*1024*1024 //設置上傳文件大小最大限制，默認2M } }))
（不配置這個，用默認的也是可以的）
搞好之后，再把項目 npm start啟動一下
上傳圖片之后，還是顯示 undefined
原因就是index.js里面的files少了一個s
二、把拿到的文件上傳到雲開發中
c
這里的use多了一個r
把這兩個代碼書寫錯誤改好了之后，再上傳就可以看到結果了
所以就實現了把圖片傳給后台了，然后我們就要把這個信息傳給雲平台了（以上完成了前台的文件傳輸到了后台）
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html
通過：
POST https://api.weixin.qq.com/tcb/uploadfile?access_token=ACCESS_TOKEN
通過這個代碼其實是進行身份驗證拿到一個通行證Token，才可以使用這樣的功能
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html
通過：
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
可見它需要的是APP 的id還有密鑰，這兩個都可以在
https://mp.weixin.qq.com/wxamp/wxaalarm/get_jserr?token=590850009&lang=zh_CN
開發-》開發設置（就可以拿到id和密鑰了）
兩個都拿到的話，就可以通過get來獲得Token了，然后再用post即可了
首先在
在外層寫一個配置文件，因為這個id和密鑰都是比較隱私的，為了不讓其他人看到的話，最好就是寫一個配置文件了
把用戶名和密鑰都寫到這個配置文件中去，然后開始打碼
先在config.js里面提供一個對外接口
（里面的數據寫入自己的即可）
module.exports = { appid : '', secret : '' };
然后在index.js里面引入這個配置文件
const config = require('./config.js');
然后在koa2中，我們用的是request和request-promise，這樣的一些第三方的模塊，如果要安裝的話，可以在github里面看看
https://github.com/request/request-promise
然后我們把后台關掉，開始下載一下這些東西
輸入 cnpm i -S request request-promise
就可以安裝這兩個東西了
就可以看到已經下載成功，我們就可以開始使用了
const request = require('request-promise');
還有一個內置的fs用來操作文件的模塊，我們可以直接引入，就不用下載了
const fs = require('fs');
然后在路由的index.js文件中的router.post里面添加：
try{ let options = { uri: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + config.appid + '&secret=' + config.secret + '', json : true } let {access_token} = await request(options) console.log( access_token ); } catch(err){ console.log(err.stack) }
但是出現了報錯
少了一個點，要。。/才行
這樣的話我們就拿到了access_token了（注意 哪個密匙的話最好用最新的，重新更新一下不然可能調用失敗的）
得到這個access_token之后我們就可以用post請求了來得到我們要用到的信息
這個env就是指定了雲環境id ，我們這里通過一個date設置時間戳的文件地址給filepath ，然后我們就把options拿去請求了，請求成功的話就返回賦值給res
這個res包括什么，可以在微信開發文檔里面看到的
拿到這些數據之后，就要調用下一個接口了，來返回最新的數據
注意有些參數 是 uri 而不是url的
然后把我們res拿到的值映射到，下面這些參數中去
const router = require('koa-router')()
const config = require('../config.js');
const request = require('request-promise');
const fs = require('fs');
router.get('/', async (ctx, next) => {
await ctx.render('index', {
title: 'Hello Koa 2!'
})
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
ctx.body = {
title: 'koa2 json'
}
})
router.post('/uploadBannerImg' , async(ctx , next)=>{
// console.log( ctx.request )
var files = ctx.request.files;
// console.log( files );
try{
let options = {
uri: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+config.appid + '&secret=' + config.secret + '',
json : true
}
let {access_token} = await request(options);
// console.log( access_token );
let fileName = `${Date.now()}.jpg`;
let filePath = `banner/${fileName}`;
options = {
method : 'POST',
uri : 'https://api.weixin.qq.com/tcb/uploadfile?access_token=' + access_token + '',
body : {
"env" : 'gogocj-6skcv',
"path" : filePath,
},
json : true
}
let res = await request(options);
options = {
method : 'POST',
uri : res.url,
formData : {
"Signature" : res.authorization ,
"key" : filePath,
"x-cos-security-token" : res.token,
"x-cos-meta-fileid" : res.cos_file_id,
"file" : {
value : fs.createReadStream(file.path),
options : {
filename : fileName,
contentType : file.type
}
}
}
}
await request(options);
ctx.body = res;
} catch(err){
console.log(err.stack)
}
})
module.exports = router
綜上所述其實我們要調用三個接口，先用get來拿到我們的token，然后通過post來拿到我們其他上傳的具體信息，然后通過這些res的具體信息來調用另外一個接口賴完成最終上傳的任務
但是我們在雲開發中 查看存儲的時候，並沒有看到我們上傳過來的東西（最后就是在前端也加上一些提示）就不用來看數據庫了
在數據庫的存儲中沒有生成 banner
上面黑圖中，后面其實都是一些報錯的
這里少了一句對file進行定義的語句了，寫上之后，全部的報錯都消失了
然后在雲開發的存儲中：
就上傳成功了
POST https://api.weixin.qq.com/tcb/databaseadd?access_token=ACCESS_TOKEN
這樣也是通過傳入access_token 來傳入
所以以上就實現了在web服務器端把圖片上傳到雲開發的存儲中，但是我們的目的是要在前端在banner中把這個圖片放在輪播圖上的，但是無法直接從存儲中讀取出來，要把存儲文件的這個id寫入到數據庫中（表單中）
我們在雲開發的數據庫中新建一個叫做 banner 的集合
也就是說不僅要上傳到雲開發的存儲中，還要上傳到這個banner集合中
查看開發文檔：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/database/databaseAdd.html
const router = require('koa-router')()
const config = require('../config.js');
const request = require('request-promise');
const fs = require('fs');
router.get('/', async (ctx, next) => {
await ctx.render('index', {
title: 'Hello Koa 2!'
})
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
ctx.body = {
title: 'koa2 json'
}
})
router.post('/uploadBannerImg' , async(ctx , next)=>{
// console.log( ctx.request )
var files = ctx.request.files;
var file = files.file;//這個file就是文件的一個二進制的數據了
// console.log( files );
try{
let options = {
uri: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+config.appid + '&secret=' + config.secret + '',
json : true
}
let {access_token} = await request(options);
// console.log( access_token );
let fileName = `${Date.now()}.jpg`;
let filePath = `banner/${fileName}`;
options = {
method : 'POST',
uri : 'https://api.weixin.qq.com/tcb/uploadfile?access_token=' + access_token + '',
body : {
"env" : 'gogocj-6skcv',
"path" : filePath,
},
json : true
}
let res = await request(options);
let file_id = res.file_id;
options = {
method : 'POST',
uri : 'https://api.weixin.qq.com/tcb/databaseadd?access_token=' + access_token + '',
body : {
"env" : 'gogocj-6skcv',
"query" : "db.collection(\"banner\").add({data:{fileId:\""+ file_id+"\"}})"
},
json : true
}
await request(options)
options = {
method : 'POST',
uri : res.url,
formData : {
"Signature" : res.authorization ,
"key" : filePath,
"x-cos-security-token" : res.token,
"x-cos-meta-fileid" : res.cos_file_id,
"file" : {
value : fs.createReadStream(file.path),
options : {
filename : fileName,
contentType : file.type
}
}
}
}
await request(options);
ctx.body = res;
} catch(err){
console.log(err.stack)
}
})
module.exports = router
我們再次上傳的時候，就發現語句寫入到banner這個集合里面了
然后我們再上傳第二張圖片試試
可以看到也是上傳成功的了，這兩條數據都是比較簡單的，保存的就只是一個fileId的
然后就可以回到微信開發者工具去打代碼了，就可以直接讀取banner這個集合里面的圖片了
在index.js里面對那個imgurl進行操作
其實可以在getBannerList函數里面定義我們從集合中限制拿幾張圖片的
（注意記得給這個banner數據庫集合設置 好權限，不然可能就訪問不到了
在index.js里面的onready中觸發這個函數
getBannerList(){ db.collection('banner').get().then((res)=>{ console.log( res.data ); }); }
通過這個，我們打印出東西來看看
然后我們就可以把得到的數組映射到data里面的imgUrl即可了
然后還要在wxml中，把src變成是item.fileId才行
所以通過代碼：
getBannerList(){ db.collection('banner').get().then((res)=>{ // console.log( res.data ); this.setData({ imgUrls : res.data }); }); }
<block wx:for="{{imgUrls}}" wx:key="{{index}}"> <swiper-item> <image src="{{item.fileId}}" ></image> </swiper-item> </block>
得到的效果就是：
這兩個圖片就是我們通過cms內容管理系統上傳的圖片了
其實雖然這個系統實現的功能就一個，但是是可以擴展的，比如用來管理用戶，就是用戶的頭像如果是違規的話
或者是發布一些系統的消息或者是公告的東西了（就是好友消息和系統消息都是可以有的，然后做一個好友消息和系統消息切換的分支即可）
以上就完成了這個項目的初始內容了，下面就是通過預覽，或者是通過真機調試（實時監聽用戶的操作）所以在調試完了之后，就是發布了，發布就是點擊上傳按鈕
上傳代碼完成之后，就可以在微信公眾平台，打開版本管理，可以先不用上傳審核，而是變成是一個體驗的版本，就可以得到一個二維碼了
這個體驗的權限就是通過（成員管理-》體驗成員設置，
當體驗的感覺沒問題之后，就可以提交審核了（如果審核不通過，就可能使banner中的圖片和我們餓內容使不符合的，就使要把這個小程序改成和實際差不多的再進行提交審核才行的
審核通過之后就會生成一個線上版本，這樣的話如何的用戶都可以進行訪問了
以上就是小程序發布的流程了的
下面就是把代碼上傳到github中進行共享，我們把cms的文件和這個小程序的代碼文件放一起
文件放一起之后，就可以打開gitbub進行上傳了
如何我們通過git插件來上傳的，可以下載一個git插件
https://git-scm.com/downloads
如然后在要上傳的文件里面，右鍵點擊git bash
可以在這個頁面中查看我們如何通過git插件來實現代碼的上傳的了
https://github.com/gogocj/wxproject-miaomiao
也就是點開git工具，然后輸入 git init
然后查看狀態 git status
然后就是 git add . (注意后面是一個空格然后一個點）
然后就是 git commit -m "up 1"
上傳好了之后，就可以通過git status 來看看我們是否已經上傳成功了
之后就可以設置一下遠端了（remote）
輸入：git remote add origin https://github.com/gogocj/wxproject-miaomiao.git
上傳完畢之后，刷新一下就可以看到上傳的東西了
可以看到我們上傳的東西都在這里了，但是蝦米那的這個README.md其實是小程序中默認的，我們可以修改一下的
可以直接在github里面對這個文件在線的編輯
https://github.com/gogocj/wxproject-miaomiao
這就是我上傳到github上面的代碼了
感謝大家！