README.md
# 目录结构
- components： 组件
- lib： 第三方库
- plugins： Vue插件
- scripts： js utils
- store： vuex module
# 快速使用
## 前置操作
- 引用项目
```bash
npm install ../uni-common
```
- 添加编译选项
如果uni-app根目录下还没有`vue.config.js`，在uni-app根目录下新建`vue.config.js`，然后添加如下编译选项：
```javascript
module.exports = {
chainWebpack(config) {
//若不添加该选项，编译后的组件路径会出现错误
config.resolve.symlinks(false)
},
//若不添加该选项，uni-common内的内容必须已经编译完成
transpileDependencies: ['uni-common']
}
```
## 初始化
库内部初始化过程如下
```javascript
let install = {
install(Vue, {
/**
* 在聊天内容窗口中可能包含别的小程序的邀请，这个跳转需要appid，那么已经是当前app则要使用不同的接口，所以需要知道当前小程序的appi，如若不提供，那么每次邀请都会跳到新的小程序，如果跳转的小程序是当前小程序则会无响应。
* 在线上版本中可以通过wx.getAccountInfo来获取小程序的appid，但是测试环境下是不可用的，再者uni没有该接口，不易兼容
*/
appId: '',
/**
* 暂时没用到的属性,
*/
initPage: 'index',
/**
* true则会自动配置一个拦截器用来自动将token插入，前提是登录部分使用该库来完成
*/
autoGetToken: true,
/**
* 当前preset有 mpgame
*/
preset: '',
/**
* preset为mpgame时生效
* 支持的type有 draw、spy 用于获取baseurl的配置文件
*/
type: '',
/**
* 页面地址，因为没有办法在项目中直接引入文件，而是引入组件的方式，所以这里需要提供页面的地址，地址具有默认值，使用了小驼峰
*/
pagesLocation: {
//聊天内容
chatRoom: 'chatRoom',
//设置
setting: 'setting',
//黑名单
blackList: 'blackList',
//用户协议
serviceAgreement: 'serviceAgreement',
},
// 设置ws的baseurl，房间wss连接的url
roomWSSURL: '',
}){
//将输出的scripts挂载到$common下
Vue.prototype.$common = _export
//对request函数拦截, 添加$interceptor
Vue.use(interceptor)
//增加一般的报错和信息函数, 添加$message
Vue.use(message)
//根据preset进行特殊的初始化
//mpgame 会对request进行自动拦截同时从配置文件中获取baseurl
//...
}
}
```
### step1
```javascript
//main.js
import Vue from 'vue'
import { install as common } from 'uni-common'
import 'uni-common/styles/index.less'
Vue.use(common, {
//当前项目的appid，如果当前小程序没有邀请内容可以不填，不填则聊天窗口的每个邀请都会跳转新的小程序，同时如果是当前小程序则会无响应
appId: 'wx76cc7501c878c863',
//参考内部初始化描述中提供的参数说明
preset: 'mpgame',
type: 'spy',
roomWSSURL: 'wss://imyintao.com/spyGame/voice',
})
```
### step2
store部分使用store插件进行初始化
```javascript
import { storePlugin } from 'uni-common'
export default new Vuex.Store({
state(){
return {
}
},
mutations: {
},
/**
* 设置了namespaced为true，命名空间均独立放在common域下
*/
plugins: [storePlugin]
})
```
## 引用组件
组件放在`components`文件夹，引用时需要全路径引用。如：
```javascript
import Avatar from 'uni-common/components/Avatar'
import NavigationBar from 'uni-common/components/NavigationBar'
import Transition from 'uni-common/components/Transition'
```
## 引用脚本
脚本已经通过index导出，可以直接es6引入
```javascript
import { user, im, utils } from 'uni-common'
utils.login()
```
## 引入chatroom.vue
### chatroom props
- session-id: String
- user: Object （传入user以减少一次request）
### 跳转chatroom
```javascript
import { utils } from 'uni-common'
/**
* 参数根据query传入页面的onLoad
*/
utils.goChatroom(sessionid, user)
```
### 参考页面chatRoom.vue
```vue
<template>
<chat-room :user="user" :session-id="sessionId"></chat-room>
</template>
<script>
import ChatRoom from 'uni-common/components/ChatRoom'
export default {
components: {
ChatRoom
},
data(){
return {
sessionId: '',
user: {},
}
},
onLoad(query){
let {sessionId, user} = query?query:{}
if(sessionId && user){
sessionId = decodeURI(sessionId)
this.sessionId = sessionId
try{
user = JSON.parse(decodeURI(user))
this.user = user
}catch(err){
console.error('user params error: ', err, user)
this.$message.error('参数错误')
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
}
}
}
</script>
```
## 登录模块
### feture
- dom响应式使用我的用户数据
- 获取我的用户数据时如果没有更新会自动更新
### 页面中获得userInfo
```javascript
// xxx vue component/page
export default{
//...
computed: {
...mapGetters('common', ['userInfo']),
}
}
```
### 在任何js中获得userInfo
```javascript
import { user } from 'uni-common'
user.getUserInfoPromise().then( user => {
console.log(user) // My info
})
```
- 微信小程序中，如果用户没有授权登录，那么promise会reject
- 通常其余小程序中会提示用户是否授权，如果拒绝则promise会reject
- 如果已经授权或有token，会在发送完请求后进入resolve回调，request api当前是写死的`/api/getMyInfo`
## 组件说明
### InputPage.vue
#### props
- preset: 'chatroom'|'dongtai'
- placeholder: String
#### events
- send(text)
- select-image(filePaths)
- select-voice(filePath)
#### examples
```html
<input-page
preset="chatroom"
@send="handleSend"
@select-image="handleSelectImage"
@select-voice="handleSelectVoice">
<!-- page-content -->
</input-page>
```
### ShareSliderService
#### methods
- share(options)
- @params { Boolean } options.preventDefaultShare 默认为`false`，wx图标的点击事件是否使用默认的分享行为，true时返回的promise中type可能是wechat
- @params { String } options.title 默认为`邀请`
- @return { Promise } 返回Promise, .e.g:`{ type: 'user', data: {_id: ...}}`
#### examples
```html
<share-slider-service ref="shareSliderService"></share-slider-service>
```
```javascript
//import { utils } from 'uni-common'
// utils.getShareSliderService()
// or
this.$refs.shareSliderService?.share({
title: '分享'
}).then(({data})=>{
console.log('selected user: ', data)
})
this.$refs.shareSliderService?.share({
preventDefaultShare: true
}).then(({ type, data })=>{
if(type === 'user'){
// selected a user
// data 放了user的数据, .e.g: data.nickname
}else if(type === 'wechat'){
// tap wechat icon
}
})
```