本按鈕只針對H5版本講解,前端部分
1 demo下載
-
首先下載當前當前demo，並本地運行，由於網易雲信提供的是採用的是node中間件的模式，所以你如果直接運行 npm run dev 是運行的打包命令，你需要運行 npm run server，來運行他當前的demo
-
首先去網易雲信控制端註冊 註冊完成之後，進入控制檯，獲取APPkey，因爲這個是需要進行唯一通信的標識，把你當前的下載下來的demo，appkey 換成你申請的APPkey
![替換appkey]()
-
由於你不能直接引用他的代碼，所以你需要先創建一下你自己的項目 注意，vue版本不限制，vuecli 的版本需要是2.x 由於該demo引入的ui組件目前不支持vue cli3 所以你只能安裝vue cli2，webpack版本不限制，vux文檔地址
##2 創建自己項目 -
然後創建你的項目，vue2.x 的創建項目的方式是
npm install --global vue-cli
/*
*全局安裝腳手架
*/
vue init webpack my-project
/*
*創建基於webpack的項目，vuecli3 不是此方式注意
*後面就是npm run dev 跑起你的項目
*/
- 然後最簡單的方式就是把當前雲信項目下面的 Src目錄下的所有複製到你的項目中,當然你直接運行肯定會出問題，所以你可以先複製過去但是別加路由，先走你自己的登陸流程
- 你自己的請求登陸的流程無非就是，根據用戶名，密碼，進行與後端交互，然後後端 返回你一些需要的東西,
login () {
/*
* 這裏就是你需要做的一系列的登陸邏輯
* 然後下面的代碼是需要成功的時候去執行的東西
* 他的demo 是用了md5加密了，你真實的邏輯就不用去進行加密
/
let sdktoken = md5(this.password)
cookie.setCookie('uid', this.account.toLowerCase())
cookie.setCookie('sdktoken', sdktoken)
location.href = config.homeUrl
/*
*注意Cookie在瀏覽器端是ok 的，但是如果你需要打包成app 你需要替換成 localStorage，不然你
*後面的所有操作都無法進行，你只需要全局替換 幾個地方，第一就是所有的
*/
cookie.setCookie('uid') cookie.setCookie('sdktoken')包含這2個地方全部替換成
localStorage
/*
*接下來你就去走你的邏輯，你可以console.log()打印一下你console.log(this.account.toLowerCase())裏面的
*值，這些就是觸發sdk裏面的方法
},
##3 引入項目修改配置
- 然後接下來可以直接複製他的代碼入你的項目中，但是需要注意幾個事情
- 注意vux 的編碼格式，需要在webpac裏面配置
- 打開webpack.base.conf.js 修改配置，可以參考vux配置地址，具體根據文檔參考，以下是我配置修改的代碼，可參考
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// vux 必需品
// 原來的 webpack.base.js 配置
const vuxLoader = require('vux-loader')
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig,
},
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.css$/,
loader: 'style!css!postcss!postcss-cssnext',
include: [resolve('src/themes'), resolve('node_modules/vux/src')]
},
{
test: /\.less$/,
loader: 'style!css!less',
include: [resolve('src/themes')]
},
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
}
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}],
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
}
})
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
- 修改**.babelrc**編碼格式，也就是es6轉es5的，還有就是es6中的引入代碼的方式的編碼，修改一下就可以，以下是修改的代碼，可參考
{
"presets": [
["env", {
"modules": "commonjs",
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
},
"loose": true,
}],
"stage-2"
],
"plugins": ["add-module-exports","transform-vue-jsx", ["transform-runtime", {polyfill: true}]],
"comments": false
}
##4 手動觸發SDK請求
-
如果你第二次登陸之後，獲取的還是你的第一次的數據，那麼請你不要慌，手動觸發一下他的方法就好，不知道怎麼去觸發？很簡單打開vue中的APP.vue頁面下面有一句註釋可以看看
// 提交sdk連接請求 this.$store.dispatch('connect') this.$store.dispatch('updateRefreshState') -
你只需要在登錄的時候，也去觸發一下這個方法，那麼你就可以動態更新到你的數據了
##5 跨域解決辦法
- 如果遇到跨域問題，彆着急，你有三套解決辦法，第一套 webpack 代理，第二套 node 中間件代理，第三套 nigix
- webpack
- 打開vue項目路徑下的 config 地址下面的 index.js 中的 proxyTable
proxyTable: {
'/api/’: {
target: 'http://***’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
/
*此處的api 的名字就是代表http://47.110.146.12
*比如如果你需要去請求數據的時候就是
*/
axios.get(api+ ‘/api/code/img’)
.then(function(response) {
})
.catch(function(error) {
console.log(error);
});
/*此方法的唯一缺陷就是必須後端與前端端口一致，否則還是會報跨域錯誤
}
},
- node.js
```javascript
mkdir -p myproject
//創建一個項目
npm install --save-dev http-proxy-middleware
npm install --save express
//安裝一下依賴
const express = require('express');
const app = express();
var proxy = require('http-proxy-middleware');
var onProxyReq = function(proxyReq, req, res) {
// add new header to request
// proxyReq.setHeader('x-added', 'foobar')
}
var onError = function(err, req, res) {
console.log('Something went wrong.')
console.log('And we are reporting a custom error message.')
}
// proxy middleware options
var options = {
target: 'https://api.server.domain',
rejectUnauthorized:false,
changeOrigin: true,
onProxyReq: onProxyReq,
onError: onError,
logLevel: "debug"
};
// create the proxy (without context)
var exampleProxy = proxy('/api/**',options);
app.use(exampleProxy);
// create the listening
app.listen('3000', function() {
console.log('[DEMO] Server: listening on port 3000')
});
/*
*解釋:
*從前端訪問localhost:3000,地址以/api/開始的所有請求轉發到https://api.server.domain後端服務
*例如:
*localhost:3000/api/common/info => https://api.server.domain/api/common/info
*/
- nigix 這個我不是很會，哈哈哈，知道一點
##6 路由強制驗證
- 如果這些基本都已經ok，但是你突然發現，他路由做了一個強制跳轉，就是沒有 cookie 的時候，直接跳轉到你的登錄頁面去了，但是如果你第一次進入，肯定是需要進行，註冊的，但是你點擊註冊還是會跳轉登錄，這個怎麼辦了，很簡單，你在點擊註冊的時候，傳遞一個值
這個值得類型，那些都由你自己定義，這個驗證強制登錄跳轉的地方是在 src 目錄下面的 store下面的 actions下面的index
以下演示一個列子，肯定有其他辦法，這個僅供參考
function connectNim({state,commit,dispatch}, obj) {
let {
force
} = Object.assign({}, obj)
// 操作爲內容頁刷新頁面，此時無nim實例
if(!state.nim || force) {
let loginInfo = {
uid: localStorage.getItem('uid'),
sdktoken:localStorage.getItem('sdktoken'),
}
if(!loginInfo.uid) {
// 無cookie，直接跳轉登錄頁
let regist=sessionStorage.getItem('registred')
if(regist==99){
/*
*這裏這個就是如果當你點擊了註冊，或者找回密碼的時候，會傳遞一個名爲 99 的參數
*如果點擊了，這裏就會接收到 值，就不會強制跳轉登錄，會走你需要的流程，
*但是你記得登錄之後，必須要清除當前的 值，否則會出問題的，不然你下次沒有cookie 他也不會跳轉
*到你的登錄頁面了，
*此方法僅供參考
}else{
location.href = '#/login'
}
} else {
console.log("有空")
// 有cookie，重新登錄
dispatch('initNimSDK', loginInfo)
}
}
}
##7 圖片地址
-
如果你後端返回的圖片地址是一個完整的地址那麼你可以忽略此處，如果只是返回了一個IP 地址後半段的地址，那麼你就可以看看
- 如果你後端返回了的是 /upload_pic/29e10cb1b3de0497b84424c9379a025d?imageView&thumbnail=40z40 這樣一串，然後
你通過雲信返回的時候，會前面 多加一個 **HTTP//**我也不知道爲啥，雲信的客服也不知道爲啥，好吧，那就替換Ip 地址， ES6中出了一個判斷字符串是否含有另一個字符串的方法 includes 該方法的使用如下
<img v-if="session.avatar.includes('http:///upload_pic')" :src="http_api+session.avatar.slice(7)"> /* *此處就是替換圖片地址方法，由於這個是 vue 循環出來的了，不需要你在外面new 一個對象 *來進行，替換，直接採用,http_api dai 代表正確的ip 地址 *但是如果採用此方式，你必須多寫2個判斷， *因爲會存在 3種情況， 1返回的沒有 http:///upload_pic *2 會返回一個正確的圖片地址 *3 會只返回一個 /upload_pic/29e10cb1b3d 這樣的地址，前面沒有http *所以如果採用此方式你必須要寫三個判斷 *或者就是採用另一個方式，獲取當前的ip 在進行循環之前進行改變當前的值，來顯示當前的圖片地址，寫一個案例地址 */ let conter = [{ a: "http:192.168.2.158/img/12", b: 'kkk1', c: 'test1' }, { a: "http:195.168.2.158/img/34", b: 'kkk2', c: 'test' }, { a: "http:192.168.2.158/img/56", b: 'kkk3', c: 'test' } ] /* *這個模擬後端返回的數據 *先獲取當前的ip 地址 window.location.host; *然後再去循環當前的哪個數據 for foreach都可以 */ var contera = conter.forEach((r) => { var cen=new URL(r.a) console.log(cen) var imgadd=cen.pathname r.a=window.location.host+imgadd newcenter.push(r); return r; }) console.log(newcenter) /* *你可以打印看看 conter.a 的ip 地址都被換成一樣的了，然後你此時再去循環，就可以 *完美的解決這個問題，2種方式，你都可以選擇 *具體第二種關於一個new URL 之後會出現什麼請訪問以下網址 * http://nodejs.cn/api/url.html#url_url_strings_and_url_objects */ - 如果你後端返回了的是 /upload_pic/29e10cb1b3de0497b84424c9379a025d?imageView&thumbnail=40z40 這樣一串，然後
##8 打包
- 手機端webpack 打包的代碼，多看看webpack就可以了，主要是講一下桌面應用打包 打包桌面應用程序的軟件可以看看
[electronjs](https://electronjs.org/) 如果你只是需要打包 一個小項目不需要定製開發的話，可以忽略文檔，看這裏也行
- 首先你在你的vue項目中引入
```javascript
npm install electron --save-dev
npm install electron-builder --save-dev
/*
* 這個代碼的意思是引入這個打包的js
* 第二句的意思是進行打包命令
*/
- 引入完成之後,打開 package.json 文件在 script 中加入下面這2句代碼
"scripts": {
"electron_dev": "npm run build && electron build/electron.js",
"electron_build": "electron-packager ./dist/ IM --platform=win32 --arch=x64 -- icon=./src/assets/yizhu.ico --overwrite"
/*第一句代碼就相當於 npm run dev 一個意思
*進行預覽查看
*第二句代碼意思是進行打包命令
*語法：electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
*1. sourcedir 資源路徑，在本例中既是./dist/
*2. appname 打包出的exe名稱
*3. platform 平臺名稱（windows是win32）
*4. arch 版本，本例爲x64
*5. [optional flags…] 配置項選填，可以設置二進制打包等，默認沒有這些
},
##9 發佈桌面安裝包
- 首先你得去下載 打包工具，然後傻瓜式安裝
- 然後打開左上角的 File 跟着下面圖片走
![第一步]()
![第二步]()
![第三步]()
![第四步]()
![第五步]()
![第六步]()
![第七步]()
![第八步]()
![第九步]()
- 然後你去找到你對應安裝的目錄，就可以發送給別人進行安裝了
