zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页+我的

Browse Source
This commit is contained in:
始于初见
2024-04-19 10:35:20 +08:00
parent 1bcb13ce7a
commit 8407d51fb6
538 changed files with 934456 additions and 1635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
uni_modules/uni-combox/components/uni-combox/uni-combox.vue
View File

@@ -204,7 +204,7 @@
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
z-index: 2;
padding: 4px 0;
}

2
uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
View File

@@ -505,7 +505,7 @@
max-height: 50vh;
background-color: #fff;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
border-radius: 4px;
overflow: unset;
}

2
uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
View File

@@ -372,7 +372,7 @@
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
z-index: 3;
padding: 4px 0;
}

4
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker copy.vue
View File

@@ -961,7 +961,7 @@
top: 0;
z-index: 999;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
border-radius: 4px;
}
@@ -971,7 +971,7 @@
top: 0;
z-index: 999;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
border-radius: 4px;
}

4
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
View File

@@ -962,7 +962,7 @@
top: 0;
z-index: 999;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
border-radius: 4px;
}
@@ -972,7 +972,7 @@
top: 0;
z-index: 999;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.65);
border-radius: 4px;
}

2
uni_modules/z-loading/changelog.md Normal file
View File

@@ -0,0 +1,2 @@
## 1.0.0（2021-05-12）
1. 支持uni_modules

113
uni_modules/z-loading/components/z-loading/z-loading.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<view class="mask mask-show" v-if="loadingShow" @touchmove.stop.prevent="preventTouchMove">
<!-- 加载动画开始 -->
<view class="preloader">
<view class="loader"></view>
</view>
<!-- 加载动画结束 -->
<view class="title">加载中...</view>
</view>
</template>
<script scoped="true">
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['loadingShow'])
},
methods:{
preventTouchMove(){
console.log('stop user scroll it!');
return;
}
}
};
</script>
<style>
.mask {
/* pointer-events: none; */
position: fixed;
z-index: 99999;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.mask.mask-show {
background: rgba(255,255,255, 0.3);
}
.title {
color: #333;
font-size: 28rpx;
margin-top: 20rpx;
}
.loader {
display: block;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 3rpx solid transparent;
border-top-color: #3AB3AE;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader::before {
content: "";
position: absolute;
top: 5rpx;
left: 5rpx;
right: 5rpx;
bottom: 5rpx;
border-radius: 50%;
border: 3rpx solid transparent;
border-top-color: #5aa9ac;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.loader::after {
content: "";
position: absolute;
top: 15rpx;
left: 15rpx;
right: 15rpx;
bottom: 15rpx;
border-radius: 50%;
border: 3rpx solid transparent;
border-top-color: #c4e3ae;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>

78
uni_modules/z-loading/package.json Normal file
View File

@@ -0,0 +1,78 @@
{
"id": "z-loading",
"displayName": "加载中组件",
"version": "1.0.0",
"description": "加载中组件",
"keywords": [
"加载",
"加载中",
"加载组件"
],
"repository": "https://github.com/zhouwei1994/uni-app-demo",
"engines": {
"HBuilderX": "^3.0.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "465081029"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

27
uni_modules/z-loading/readme.md Normal file
View File

@@ -0,0 +1,27 @@
# 加载中组件
加载中组件
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
| ----------------------------|--------------------------- |
|![QQ交流群](http://qn.kemean.cn//upload/202004/14/15868301778472k7oubi6.png)|![微信交流群](https://qn.kemean.cn/upload/202010/13/weiXin_group_code.jpg)|
| QQ群号：607391225 |微信号：zhou0612wei|
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
### 案例一
```
<z-loading></z-loading>
```
### 用法第一步
```
// vuex里面注册loadingShow变量和setLoadingShow赋值方法
```
### 用法第二步
```
import store from '@/store';
//调用vuex方法打开加载动画
store.commit("setLoadingShow", true);
```

154
uni_modules/z-nav-bar/components/z-nav-bar/z-nav-bar.vue
View File

@@ -1,81 +1,108 @@
<template>
<view>
<view
:class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute': '', navShadow ? 'header_shadow': '', themeBgColorName]"
:style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue}]"
>
:class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute' : '', navShadow ? 'header_shadow' : '', themeBgColorName]"
:style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue }]">
<view class="header_content">
<view class="header_left_box">
<slot name="left">
<view class="header_left_info" :class="[isTwoBtn ? 'header_btnMongol' : '' , isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']" v-if="back || $slots.left || home">
<view class="header_left_back" :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]" v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png" mode="aspectFit"></image>
<view class="header_left_info"
:class="[isTwoBtn ? 'header_btnMongol' : '', isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']"
v-if="back || $slots.left || home">
<view class="header_left_back" :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png"
mode="aspectFit">
</image>
</view>
<text class="header_left_line" :class="[isWhite ? 'header_colorWhite_left_line' : '']" v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']" v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png" mode="aspectFit"></image>
<text class="header_left_line" :class="[isWhite ? 'header_colorWhite_left_line' : '']"
v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png"
mode="aspectFit">
</image>
</view>
</view>
</slot>
<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)" :style="{ color: navFontColor }">
<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)"
:style="{ color: navFontColor }">
<slot>
<text :style="{ color: navFontColor }">{{ navTitle }}</text>
</slot>
</view>
</view>
<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)" :style="{ color: navFontColor }">
<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)"
:style="{ color: navFontColor }">
<slot>
<text :style="{ color: navFontColor }">{{ navTitle }}</text>
</slot>
</view>
<view class="header_right_info"><slot name="right"></slot></view>
<view class="header_right_info">
<slot name="right"></slot>
</view>
</view>
</view>
<view
class="header_transparentFixed header_fixed"
v-if="type == 'transparentFixed'"
:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90}"
>
<view class="header_transparentFixed header_fixed" v-if="type == 'transparentFixed'"
:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90 }">
<view class="header_content">
<view class="header_left_box">
<slot name="transparentFixedLeft">
<view
class="header_left_info header_transparentFixed_left_info"
:class="[ isWhite ? 'header_transparentFixed_colorWhite_left_info' : '' ]"
v-if="back || $slots.left || home"
>
<view class="header_left_back" :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]" v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png" mode="aspectFit"></image>
<view class="header_left_info header_transparentFixed_left_info"
:class="[isWhite ? 'header_transparentFixed_colorWhite_left_info' : '']"
v-if="back || $slots.left || home">
<view class="header_left_back" :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png"
mode="aspectFit">
</image>
</view>
<text class="header_left_line" v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']" v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png" mode="aspectFit"></image>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png"
mode="aspectFit">
</image>
</view>
</view>
</slot>
<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor }">
<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)"
:style="{ color: navTransparentFixedFontColor }">
<slot name="transparentFixed">
<text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
</slot>
</view>
</view>
<view class="header_title header_title_center" v-if="titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor }">
<view class="header_title header_title_center"
v-if="titleCenter && (navTitle || $slots.transparentFixed)"
:style="{ color: navTransparentFixedFontColor }">
<slot name="transparentFixed">
<text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
</slot>
</view>
<view class="header_right_info"><slot name="transparentFixedRight"></slot></view>
<view class="header_right_info">
<slot name="transparentFixedRight"></slot>
</view>
</view>
</view>
<view v-if="type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="header_station"></view></view>
<view v-if="type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="header_station"></view>
</view>
</view>
</template>
<script>
import componentConfig from "@/config/componentConfig"
import {
mainPagePath,
homePath
} from "@/config/componentConfig"
//白色表达值
const whiteList = ['#FFF', '#fff', '#FFFFFF', '#ffffff', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
export default {
@@ -85,53 +112,53 @@ export default {
// 2000 不显示返回按钮
// 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
backState: {
type: [String, Number],
default: function() {
type: [String, Number],
default: function () {
return 1000;
}
},
//是否显示返回首页按钮
// 1000 显示首页按钮
// 2000 不显示首页按钮
// 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
// 1000 显示首页按钮
// 2000 不显示首页按钮
// 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
homeState: {
type: [String, Number],
default: function() {
default: function () {
return 2000;
}
},
//导航背景色，支持渐变
bgColor: {
type: [String, Array],
default: function() {
default: function () {
return '#FFFFFF';
}
},
// 导航背景色渐变角度
bgColorAngle: {
type: [String, Number],
default: function() {
default: function () {
return 90;
}
},
//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
fontColor: {
type: String,
default: function() {
default: function () {
return '#000000';
}
},
//标题是否居中
titleCenter: {
type: Boolean,
default: function() {
default: function () {
return true;
}
},
//标题
title: {
type: String,
default: function() {
default: function () {
return '';
}
},
@@ -141,28 +168,28 @@ export default {
//transparentFixed 透明固定的
type: {
type: String,
default: function() {
default: function () {
return 'fixed';
}
},
//透明固定的时候字体颜色
transparentFixedFontColor: {
type: String,
default: function() {
default: function () {
return '#000000';
}
},
// 屏幕滑动距离顶部距离(透明固定导航比传)
scrollTop: {
type: Number,
default: function() {
default: function () {
return 0;
}
},
// 是否显示阴影
shadow: {
type: Boolean,
default: function() {
default: function () {
return false;
}
}
@@ -192,7 +219,7 @@ export default {
back() {
return this.backState == 1000 || this.backState == 3000;
},
home() {
home() {
return this.homeState == 1000;
},
//导航固定
@@ -256,7 +283,7 @@ export default {
let currentPages = getCurrentPages();
let pageLen = currentPages.length;
//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
if (pageLen == 1 && !componentConfig.mainPagePath.includes(currentPages[0].route)) {
if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
this.firstPage = true;
}
},
@@ -272,13 +299,13 @@ export default {
},
//返回首页
onBackHome() {
if(this.homeState == 3000){
this.$emit('homeClick');
} else {
uni.reLaunch({
url: componentConfig.homePath
});
}
if (this.homeState == 3000) {
this.$emit('homeClick');
} else {
uni.reLaunch({
url: homePath
});
}
},
pageScroll(e) {
if (this.type == 'transparentFixed') {
@@ -300,10 +327,10 @@ export default {
if (this.type == 'transparent') {
this.navBgColor = '';
} else if (/^#|rgb\(|rgba\(/.test(val)) {
this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
} else {
this.themeBgColorName = val;
this.navBgColor = '';
this.themeBgColorName = val;
this.navBgColor = '';
}
} else if (Array.isArray(val) && val.length >= 2) {
let navBgColor = 'linear-gradient(' + this.bgColorAngle + 'deg';
@@ -440,7 +467,6 @@ export default {
}
.header_title {
width: 80%;
height: 88rpx;
font-size: 32rpx;
padding-left: 30rpx;
@@ -531,4 +557,4 @@ export default {
.header_colorWhite_left_line {
background-color: rgba(255, 255, 255, 0.3);
}
</style>
</style>

47
uni_modules/z-nav-bar/readme.md
View File

@@ -23,42 +23,57 @@
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
# `关键配置`（config/componentConfig.js）
### 本组件全局配置（位置：zhouWei-navBar/index.vue =>页面script）
1. 主页页面的页面路径
2. 首页页面路径
```
// 主页页面的页面路径
// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
const mainPagePath = ["pages/navList"];
//返回首页的地址
const homePath = "/pages/navList";
```
### 在main.js引入组件，并注册全局组件
```
import zhouWeiNavBar from "@/components/zhouWei-navBar";
Vue.component("nav-bar", zhouWeiNavBar);
```
### 或者在页面script中引入组件，并注册组件（nvue页面必须是这样引入）
```
import navBar from "@/components/zhouWei-navBar";
export default {
// 主页页面的页面路径
// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
mainPagePath: ['pages/home/home', 'pages/my/my', 'pages/demo/common', 'pages/template/common', 'pages/apiDemo/common', "pages/template/addTemplate"],
//返回首页的地址
homePath: '/pages/template/addTemplate'
components: {navBar}
}
```
### 案例一
默认特性：左上角有返回箭头，nav-bar导航固定在顶部、标题居中
```
<z-nav-bar>我的</z-nav-bar>
<nav-bar>我的</nav-bar>
```
### 案例二
特性：无返回箭头、字体色为白色、标题左对齐、nav-bar导航透明并不固定在顶部、右边插槽有按钮
```
<z-nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
<nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
<view class="icon_setUp" slot="right">设置</view>
</z-nav-bar>
</nav-bar>
```
### 案例三：颜色渐变导航
特性：颜色渐变导航
```
<z-nav-bar home :bgColor="['#f37402','#0f0']" bgColorAngle="90" fontColor="#FFF" title="颜色渐变导航"></z-nav-bar>
<nav-bar home :bgColor="['#f37402','#0f0']" bgColorAngle="90" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
```
### 案例四：颜色渐变导航
特性：颜色渐变导航
```
<z-nav-bar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></z-nav-bar>
<nav-bar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
<!-- bgColor值 -->
bgColorList:[
{color:"#f37402",scale:"0%"},
@@ -71,10 +86,10 @@ bgColorList:[
### 案例五：滑动透明导航
特性：有返回箭头、nav-bar导航透明并固定在顶部、透明状态字体为白色、页面想下滑动nav-bar导航条逐渐变白色、右边插槽有按钮
```
<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
<nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
<view class="transparent_fixed_preview" slot="transparentFixedRight" @click="onPreview">预览</view> //透明状态下的按钮
<view class="preview" slot="right" @click="onPreview">预览</view> //不状态下的按钮
</z-nav-bar>
</nav-bar>
```
```
//设置滚动值方法一：
@@ -95,13 +110,13 @@ onPageScroll (e) {
### 案例六：搜索框|地区选择
特性：无返回箭头、nav-bar导航固定在顶部、地区选择、搜索框
```
<z-nav-bar backState="2000">
<nav-bar backState="2000">
<view slot="left" class="address_select">深圳市</view>
<view slot="right" class="search_box" @click="onPageJump('/pages/home/search')">
<text class="icon_search"></text>
<text class="tips">搜索目的地/职位等</text>
</view>
</z-nav-bar>
</nav-bar>
```
### 属性

5
uni_modules/zhouWei-APPUpdate/changelog.md Normal file
View File

@@ -0,0 +1,5 @@
## 3.0.1（2021-05-13）
1. 跳转颜色和图标配置
2. 新增静默更新
## 3.0.0（2021-05-12）
1. 支持uni_modules

830
uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate.js Normal file
View File

@@ -0,0 +1,830 @@
// #ifdef APP-PLUS
import componentConfig from "@/config/componentConfig"
const platform = uni.getSystemInfoSync().platform;
// 主颜色
const $mainColor = componentConfig.appUpdateColor ? componentConfig.appUpdateColor : "FF5B78";
// 弹窗图标url
const $iconUrl = componentConfig.appUpdateIcon ? componentConfig.appUpdateIcon : "/uni_modules/zhouWei-APPUpdate/static/ic_ar.png";
// 获取当前应用的版本号
export const getCurrentNo = function(callback) {
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
callback && callback({
versionCode: inf.versionCode,
versionName: inf.version
});
});
}
// 从服务器下载应用资源包（wgt文件）
const getDownload = function(data) {
let dtask;
if(data.updateType == 'forcibly' || data.updateType == 'solicit'){
let popupData = {
progress: true,
buttonNum: 2
};
if(data.updateType == 'forcibly'){
popupData.buttonNum = 0;
}
let lastProgressValue = 0;
let popupObj = downloadPopup(popupData);
dtask = plus.downloader.createDownload(data.downloadUrl, {
filename: "_doc/update/"
}, function(download, status) {
if (status == 200) {
popupObj.change({
progressValue: 100,
progressTip:"正在安装文件...",
progress: true,
buttonNum: 0
});
plus.runtime.install(download.filename, {}, function() {
popupObj.change({
contentText: "应用资源更新完成！",
buttonNum: 1,
progress: false
});
}, function(e) {
popupObj.cancel();
plus.nativeUI.alert("安装文件失败[" + e.code + "]：" + e.message);
});
} else {
popupObj.change({
contentText: "文件下载失败...",
buttonNum: 1,
progress: false
});
}
});
dtask.start();
dtask.addEventListener("statechanged", function(task, status) {
switch (task.state) {
case 1: // 开始
popupObj.change({
progressValue:0,
progressTip:"准备下载...",
progress: true
});
break;
case 2: // 已连接到服务器
popupObj.change({
progressValue:0,
progressTip:"开始下载...",
progress: true
});
break;
case 3:
const progress = parseInt(task.downloadedSize / task.totalSize * 100);
if(progress - lastProgressValue >= 2){
lastProgressValue = progress;
popupObj.change({
progressValue:progress,
progressTip: "已下载" + progress + "%",
progress: true
});
}
break;
}
});
// 取消下载
popupObj.cancelDownload = function(){
dtask && dtask.abort();
uni.showToast({
title: "已取消下载",
icon:"none"
});
}
// 重启APP
popupObj.reboot = function(){
plus.runtime.restart();
}
} else if(data.updateType == "silent"){
dtask = plus.downloader.createDownload(data.downloadUrl, {
filename: "_doc/update/"
}, function(download, status) {
if (status == 200) {
plus.runtime.install(download.filename, {}, function() {
console.log("应用资源更新完成");
}, function(e) {
plus.nativeUI.alert("安装文件失败[" + e.code + "]：" + e.message);
});
} else {
plus.nativeUI.alert("文件下载失败...");
}
});
dtask.start();
}
}
// 文字换行
function drawtext(text, maxWidth) {
let textArr = text.split("");
let len = textArr.length;
// 上个节点
let previousNode = 0;
// 记录节点宽度
let nodeWidth = 0;
// 文本换行数组
let rowText = [];
// 如果是字母，侧保存长度
let letterWidth = 0;
// 汉字宽度
let chineseWidth = 14;
// otherFont宽度
let otherWidth = 7;
for (let i = 0; i < len; i++) {
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
if(letterWidth > 0){
if(nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth){
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
letterWidth = 0;
} else {
nodeWidth += chineseWidth + letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if(nodeWidth + chineseWidth > maxWidth){
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
}else{
nodeWidth += chineseWidth;
}
}
} else {
if(/\n/g.test(textArr[i])){
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 1;
nodeWidth = 0;
letterWidth = 0;
}else if(textArr[i] == "\\" && textArr[i + 1] == "n"){
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 2;
nodeWidth = 0;
letterWidth = 0;
}else if(/[a-zA-Z0-9]/g.test(textArr[i])){
letterWidth += 1;
if(nodeWidth + letterWidth * otherWidth > maxWidth){
rowText.push({
type: "text",
content: text.substring(previousNode, i + 1 - letterWidth)
});
previousNode = i + 1 - letterWidth;
nodeWidth = letterWidth * otherWidth;
letterWidth = 0;
}
} else{
if(nodeWidth + otherWidth > maxWidth){
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = otherWidth;
}else{
nodeWidth += otherWidth;
}
}
}
}
if (previousNode < len) {
rowText.push({
type: "text",
content: text.substring(previousNode, len)
});
}
return rowText;
}
// 是否更新弹窗
function updatePopup(data, callback) {
// 弹窗遮罩层
let maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
});
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//弹窗容器宽度
const popupViewWidth = screenWidth * 0.7;
// 弹窗容器的Padding
const viewContentPadding = 20;
// 弹窗容器的宽度
const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2));
// 描述的列表
const descriptionList = drawtext(data.versionInfo, viewContentWidth);
// 弹窗容器高度
let popupViewHeight = 80 + 20 + 20 + 90 + 10;
let popupViewContentList = [{
src: $iconUrl,
id: "logo",
tag: "img",
position: {
top: "0px",
left: (popupViewWidth - 124) / 2 + "px",
width: "124px",
height: "80px",
}
},
{
tag: 'font',
id: 'title',
text: "发现新版本" + data.versionName,
textStyles: {
size: '18px',
color: "#333",
weight: "bold",
whiteSpace: "normal"
},
position: {
top: '90px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "30px",
}
}];
const textHeight = 18;
let contentTop = 130;
descriptionList.forEach((item,index) => {
if(index > 0){
popupViewHeight += textHeight;
contentTop += textHeight;
}
popupViewContentList.push({
tag: 'font',
id: 'content' + index + 1,
text: item.content,
textStyles: {
size: '14px',
color: "#666",
lineSpacing: "50%",
align: "left"
},
position: {
top: contentTop + "px",
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: textHeight + "px",
}
});
if(item.type == "break"){
contentTop += 10;
popupViewHeight += 10;
}
});
if(data.updateType == "forcibly"){
popupViewContentList.push({
tag: 'rect', //绘制底边按钮
rectStyles:{
radius: "6px",
color: $mainColor
},
position:{
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "30px"
}
});
popupViewContentList.push({
tag: 'font',
id: 'confirmText',
text: "立即升级",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "30px"
}
});
} else {
// 绘制底边按钮
popupViewContentList.push({
tag: 'rect',
id: 'cancelBox',
rectStyles: {
radius: "3px",
borderColor: "#f1f1f1",
borderWidth: "1px",
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
});
popupViewContentList.push({
tag: 'rect',
id: 'confirmBox',
rectStyles: {
radius: "3px",
color: $mainColor,
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
});
popupViewContentList.push({
tag: 'font',
id: 'cancelText',
text: "暂不升级",
textStyles: {
size: '14px',
color: "#666",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
});
popupViewContentList.push({
tag: 'font',
id: 'confirmText',
text: "立即升级",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
});
}
// 弹窗内容
let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
tag: "rect",
top: (screenHeight - popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewHeight + "px",
width: "70%"
});
// 绘制白色背景
popupView.drawRect({
color: "#FFFFFF",
radius: "8px"
}, {
top: "40px",
height: popupViewHeight - 40 + "px",
});
popupView.draw(popupViewContentList);
popupView.addEventListener("click", function(e) {
let maxTop = popupViewHeight - viewContentPadding;
let maxLeft = popupViewWidth - viewContentPadding;
let buttonWidth = (viewContentWidth - viewContentPadding) / 2;
if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
if(data.updateType == "forcibly"){
if(e.clientX > viewContentPadding && e.clientX < maxLeft){
// 立即升级
maskLayer.hide();
popupView.hide();
callback && callback();
}
} else {
// 暂不升级
if (e.clientX > viewContentPadding && e.clientX < maxLeft - buttonWidth - viewContentPadding) {
maskLayer.hide();
popupView.hide();
} else if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
// 立即升级
maskLayer.hide();
popupView.hide();
callback && callback();
}
}
}
});
if(data.updateType == "solicit"){
// 点击遮罩层
maskLayer.addEventListener("click", function() { //处理遮罩层点击
maskLayer.hide();
popupView.hide();
});
}
// 显示弹窗
maskLayer.show();
popupView.show();
}
// 文件下载的弹窗绘图
function downloadPopupDrawing(data){
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//弹窗容器宽度
const popupViewWidth = screenWidth * 0.7;
// 弹窗容器的Padding
const viewContentPadding = 20;
// 弹窗容器的宽度
const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
// 弹窗容器高度
let popupViewHeight = viewContentPadding * 3 + 60;
let progressTip = data.progressTip || "准备下载...";
let contentText = data.contentText || "正在为您更新，请耐心等待";
let elementList = [
{
tag: 'rect', //背景色
color: '#FFFFFF',
rectStyles:{
radius: "8px"
}
},
{
tag: 'font',
id: 'title',
text: "升级APP",
textStyles: {
size: '16px',
color: "#333",
weight: "bold",
verticalAlign: "middle",
whiteSpace: "normal"
},
position: {
top: viewContentPadding + 'px',
height: "30px",
}
},
{
tag: 'font',
id: 'content',
text: contentText,
textStyles: {
size: '14px',
color: "#333",
verticalAlign: "middle",
whiteSpace: "normal"
},
position: {
top: viewContentPadding * 2 + 30 + 'px',
height: "20px",
}
}
];
// 是否有进度条
if(data.progress){
popupViewHeight += viewContentPadding + 40;
elementList = elementList.concat([
{
tag: 'font',
id: 'progressValue',
text: progressTip,
textStyles: {
size: '14px',
color: $mainColor,
whiteSpace: "normal"
},
position: {
top: viewContentPadding * 4 + 20 + 'px',
height: "30px"
}
},
{
tag: 'rect', //绘制进度条背景
id: 'progressBg',
rectStyles:{
radius: "4px",
borderColor: "#f1f1f1",
borderWidth: "1px",
},
position:{
top: viewContentPadding * 4 + 60 + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "8px"
}
},
]);
}
if (data.buttonNum == 2) {
popupViewHeight += viewContentPadding + 30;
elementList = elementList.concat([
{
tag: 'rect', //绘制底边按钮
rectStyles:{
radius: "3px",
borderColor: "#f1f1f1",
borderWidth: "1px",
},
position:{
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px"
}
},
{
tag: 'rect', //绘制底边按钮
rectStyles:{
radius: "3px",
color: $mainColor
},
position:{
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px"
}
},
{
tag: 'font',
id: 'cancelText',
text: "取消下载",
textStyles: {
size: '14px',
color: "#666",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
},
{
tag: 'font',
id: 'confirmText',
text: "后台下载",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
}
]);
}
if (data.buttonNum == 1) {
popupViewHeight += viewContentPadding + 40;
elementList = elementList.concat([
{
tag: 'rect', //绘制底边按钮
rectStyles:{
radius: "6px",
color: $mainColor
},
position:{
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
},
{
tag: 'font',
id: 'confirmText',
text: "关闭",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
}
]);
}
return {
popupViewHeight:popupViewHeight,
popupViewWidth:popupViewWidth,
screenHeight:screenHeight,
viewContentWidth:viewContentWidth,
viewContentPadding:viewContentPadding,
elementList: elementList
};
}
// 文件下载的弹窗
function downloadPopup(data) {
// 弹窗遮罩层
let maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
});
let popupViewData = downloadPopupDrawing(data);
// 弹窗内容
let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
tag: "rect",
top: (popupViewData.screenHeight - popupViewData.popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewData.popupViewHeight + "px",
width: "70%",
});
let progressValue = 0;
let progressTip = 0;
let contentText = 0;
let buttonNum = 2;
if(data.buttonNum >= 0){
buttonNum = data.buttonNum;
}
popupView.draw(popupViewData.elementList);
let callbackData = {
change: function(res) {
let progressElement = [];
if(res.progressValue){
progressValue = res.progressValue;
// 绘制进度条
progressElement.push({
tag: 'rect', //绘制进度条背景
id: 'progressValueBg',
rectStyles:{
radius: "4px",
color: $mainColor
},
position:{
top: popupViewData.viewContentPadding * 4 + 60 + 'px',
left: popupViewData.viewContentPadding + "px",
width: popupViewData.viewContentWidth * (res.progressValue / 100) + "px",
height: "8px"
}
});
}
if(res.progressTip){
progressTip = res.progressTip;
progressElement.push({
tag: 'font',
id: 'progressValue',
text: res.progressTip,
textStyles: {
size: '14px',
color: $mainColor,
whiteSpace: "normal"
},
position: {
top: popupViewData.viewContentPadding * 4 + 20 + 'px',
height: "30px"
}
});
}
if(res.contentText){
contentText = res.contentText;
progressElement.push({
tag: 'font',
id: 'content',
text: res.contentText,
textStyles: {
size: '16px',
color: "#333",
whiteSpace: "normal"
},
position: {
top: popupViewData.viewContentPadding * 2 + 30 + 'px',
height: "30px",
}
});
}
if(res.buttonNum >= 0 && buttonNum != res.buttonNum){
buttonNum = res.buttonNum;
popupView.reset();
popupViewData = downloadPopupDrawing(Object.assign({
progressValue:progressValue,
progressTip:progressTip,
contentText:contentText,
},res));
let newElement = [];
popupViewData.elementList.map((item,index) => {
let have = false;
progressElement.forEach((childItem,childIndex) => {
if(item.id == childItem.id){
have = true;
}
});
if(!have){
newElement.push(item);
}
});
progressElement = newElement.concat(progressElement);
popupView.setStyle({
tag: "rect",
top: (popupViewData.screenHeight - popupViewData.popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewData.popupViewHeight + "px",
width: "70%",
});
popupView.draw(progressElement);
}else{
popupView.draw(progressElement);
}
},
cancel: function() {
maskLayer.hide();
popupView.hide();
}
}
popupView.addEventListener("click", function(e) {
let maxTop = popupViewData.popupViewHeight - popupViewData.viewContentPadding;
let maxLeft = popupViewData.popupViewWidth - popupViewData.viewContentPadding;
if (e.clientY > maxTop - 40 && e.clientY < maxTop) {
if(buttonNum == 1){
// 单按钮
if (e.clientX > popupViewData.viewContentPadding && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
callbackData.reboot();
}
}else if(buttonNum == 2){
// 双按钮
let buttonWidth = (popupViewData.viewContentWidth - popupViewData.viewContentPadding) / 2;
if (e.clientX > popupViewData.viewContentPadding && e.clientX < maxLeft - buttonWidth - popupViewData.viewContentPadding) {
maskLayer.hide();
popupView.hide();
callbackData.cancelDownload();
} else if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
}
}
}
});
// 显示弹窗
maskLayer.show();
popupView.show();
// 改变进度条
return callbackData;
}
export default function(isPrompt = false) {
getCurrentNo(versionInfo => {
componentConfig.getServerNo(versionInfo, isPrompt, res => {
if (res.updateType == "forcibly" || res.updateType == "silent") {
if (/\.wgt$/i.test(res.downloadUrl)) {
getDownload(res);
} else if(/\.html$/i.test(res.downloadUrl)){
plus.runtime.openURL(res.downloadUrl);
} else {
if (platform == "android") {
getDownload(res);
} else {
plus.runtime.openURL(res.downloadUrl);
}
}
} else if(res.updateType == "solicit"){
updatePopup(res, function() {
if (/\.wgt$/i.test(res.downloadUrl)) {
getDownload(res);
} else if(/\.html$/i.test(res.downloadUrl)){
plus.runtime.openURL(res.downloadUrl);
} else {
if (platform == "android") {
getDownload(res);
} else {
plus.runtime.openURL(res.downloadUrl);
}
}
});
}
});
});
}
// #endif

79
uni_modules/zhouWei-APPUpdate/package.json Normal file
View File

@@ -0,0 +1,79 @@
{
"id": "zhouWei-APPUpdate",
"displayName": "APP版本更新、强制更新、静默更新、下载进度（wgt更新）",
"version": "3.0.1",
"description": "APP版本更新、强制更新、静默更新、漂亮弹窗、下载进度（wgt更新）",
"keywords": [
"APP版本更新",
"强制更新",
"版本更新",
"静默更新"
],
"repository": "https://github.com/zhouwei1994/uni-app-demo",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "465081029"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "<uses-permission android:name=\\\"android.permission.INSTALL_PACKAGES\\\"/> \n<uses-permission android:name=\\\"android.permission.REQUEST_INSTALL_PACKAGES\\\"/>"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "n",
"Android Browser": "n",
"微信浏览器(Android)": "n",
"QQ浏览器(Android)": "n"
},
"H5-pc": {
"Chrome": "n",
"IE": "n",
"Edge": "n",
"Firefox": "n",
"Safari": "n"
},
"小程序": {
"微信": "n",
"阿里": "n",
"百度": "n",
"字节跳动": "n",
"QQ": "n"
},
"快应用": {
"华为": "n",
"联盟": "n"
}
}
}
}
}

162
uni_modules/zhouWei-APPUpdate/readme.md Normal file
View File

@@ -0,0 +1,162 @@
# APP版本更新、强制更新、漂亮的更新界面、IOS更新（跳转IOS store）、wgt更新
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
| ----------------------------|--------------------------- |
|![QQ交流群](http://qn.kemean.cn//upload/202004/14/15868301778472k7oubi6.png)|![微信交流群](https://qn.kemean.cn/upload/202010/13/weiXin_group_code.jpg)|
| QQ群号：607391225 |微信号：zhou0612wei|
### [点击跳转-插件示例](https://ext.dcloud.net.cn/plugin?id=2009)
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
### 常见问题
1.安卓apk下载完成后没有更新APP?
答：问题是因为没有添加APP安装应用的权限，解决方法在`manifest.json`文件里面`APP模块权限配置`的`Android打包权限配置`勾选以下权限
```
<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/>
<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/>
```
若还有问题请看[安装apk无法执行的解决方案](https://ask.dcloud.net.cn/article/35703 "安装apk无法执行的解决方案")
2.APP更新后版本号没变，还是之前的版本号？
答：可能是更新的安装包没有升级版本号，`manifest.json`文件里面基本设置`应用版本号`和`应用版本名称`需要升高（保持一直减少问题）
3.APP更新后没有覆盖之前的APP？
答：可能是更新的安装包`包名`和APP的`包名`不一样
4.弹窗的图标不显示？
答：检查图片是不是放项目资源文件`static`，然后重新运行项目
5.版本号是在前端对比还是在后端接口对比？
答：当前案例是本地的版本号通过接口传递给后台，是后台对比的，若需要前端对比，请在接口返回数据的地方修改，不更新就不要调用`callback`方法
6.本地的版本号比接口的版本号高还弹窗升级窗口？
答：当前案例是本地的版本号通过接口传递给后台，后台对比是否需要升级，不需要升级就不要返回数据（特别是需要wgt更新的，建议这种方式）
### 第一步`关键`配置APP更新接口（可以参考上面的示例）
在项目目录下`config/componentConfig.js`里面如下配置
```
// 此方法是接口请求方法
import $http from '@/config/requestConfig'
export default {
// 发起ajax请求获取服务端版本号
getServerNo: (version, isPrompt = false, callback) => {
let httpData = {
version: version.versionCode,
// 版本名称
versionName: version.versionName,
// setupPage参数说明（判断用户是不是从设置页面点击的更新，如果是设置页面点击的更新，有不要用静默更新了，不然用户点击没反应很奇怪的）
setupPage: isPrompt
};
if (platform == "android") {
httpData.type = 1101;
} else {
httpData.type = 1102;
}
/* 接口入参说明
* version: 应用当前版本号（已自动获取）
* versionName: 应用当前版本名称（已自动获取）
* type：平台（1101是安卓，1102是IOS）
*/
/****************以下是示例*******************/
// 可以用自己项目的请求方法（接口自己找后台要，插件不提供）
$http.get("api/common/v1/app_version", httpData,{
isPrompt: isPrompt
}).then(res => {
/* res的数据说明
* | 参数名称 | 一定返回 | 类型 | 描述
* | -------------|--------- | --------- | ------------- |
* | versionCode | y | int | 版本号 |
* | versionName | y | String | 版本名称 |
* | versionInfo | y | String | 版本信息 |
* | updateType | y | String | forcibly = 强制更新, solicit = 弹窗确认更新, silent = 静默更新 |
* | downloadUrl | y | String | 版本下载链接（IOS安装包更新请放跳转store应用商店链接,安卓apk和wgt文件放文件下载链接） |
*/
if (res && res.downloadUrl) {
// 兼容之前的版本（updateType是新版才有的参数）
if(res.updateType){
callback && callback(res);
} else {
if(res.forceUpdate){
res.updateType = "forcibly";
} else {
res.updateType = "solicit";
}
callback && callback(res);
}
} else if (isPrompt) {
uni.showToast({
title: "暂无新版本",
icon: "none"
});
}
});
/****************以上是示例*******************/
},
// 弹窗主颜色（不填默认粉色）
appUpdateColor: "f00",
// 弹窗图标（不填显示默认图标，链接配置示例如： '/static/demo/ic_attention.png'）
appUpdateIcon: ''
}
```
### 第二步 使用方法
```
// App.vue页面
// #ifdef APP-PLUS
import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
onLaunch: function(e) {
// #ifdef APP-PLUS
APPUpdate();
// #endif
}
```
### 第三步 添加APP安装应用的权限
在`manifest.json`文件里面`APP模块权限配置`的`Android打包权限配置`勾选以下权限
```
<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/>
<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/>
```
### 修改弹窗的主题色或弹窗图标
在`APPUpdate/index.js`里面上面`$mainColor`常量中定义主题颜色，`$iconUrl`常量中定义图标地址
### 检查APP是否有新版本（一般在设置页面使用）
```
// #ifdef APP-PLUS
import APPUpdate, { getCurrentNo } from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
data() {
return {
version: "" // 版本号
};
},
//第一次加载
onLoad(e) {
// #ifdef APP-PLUS
getCurrentNo(res => {
// 进页面获取当前APP版本号（用于页面显示）
this.version = res.version;
});
// #endif
},
//方法
methods: {
// 检查APP是否有新版本
onAPPUpdate() {
// true 没有新版本的时候有提示，默认：false
APPUpdate(true);
}
}
}
```

BIN
uni_modules/zhouWei-APPUpdate/static/ic_ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

8
uni_modules/zhouWei-APPshare/changelog.md Normal file
View File

@@ -0,0 +1,8 @@
## 2.0.3（2021-07-12）
修改关闭回调bug
## 2.0.2（2021-06-25）
修复图标不显示问题
## 2.0.1（2021-06-07）
修改图片不显示bug
## 2.0.0（2021-05-12）
1. 支持uni_modules

400
uni_modules/zhouWei-APPshare/js_sdk/appShare.js Normal file
View File

@@ -0,0 +1,400 @@
// #ifdef APP-PLUS
let alphaBg, shareMenu, showState = false;
// 关闭弹窗
export const closeShare = function(){
alphaBg && alphaBg.close();
alphaBg && shareMenu.close();
if(showState){
showState = false;
return true
} else {
showState = false;
return false
}
}
// 复制
function onCopy(item, shareInfo,callback) {
let copyInfo = shareInfo.shareUrl || shareInfo.shareContent || shareInfo.shareImg;
if (copyInfo) {
uni.setClipboardData({
data: copyInfo,
success:() => {
uni.showToast({
title: "已复制到剪贴板",
icon: "none"
});
callback && callback(item);
}
});
}
}
// 更多
function onMore(item, shareInfo,callback) {
plus.share.sendWithSystem({
type: "text",
title: shareInfo.shareTitle || "",
href: shareInfo.shareUrl || "",
content: shareInfo.shareContent || "",
},function(res){
callback && callback(item);
},function(err){
console.log(err);
});
}
// 分享
function onShare(item, shareInfo,callback) {
if (shareInfo.type == undefined) {
shareInfo.type = item.type;
}
let shareObj = {
provider: item.provider,
type: shareInfo.type,
success: (res) => {
callback && callback(item);
console.log("success:" + JSON.stringify(res));
},
fail: (err) => {
console.log("分享失败，参数缺失 fail:" + JSON.stringify(err));
}
};
if (shareInfo.shareTitle) {
shareObj.title = shareInfo.shareTitle;
}else if(item.provider == "qq"){
uni.showToast({
title: "缺失分享的标题",
icon: "none"
});
return;
}
if(shareInfo.type == 0 || item.provider == "qq"){
if (shareInfo.shareUrl) {
shareObj.href = shareInfo.shareUrl;
}else{
uni.showToast({
title: "缺失分享的地址",
icon: "none"
});
return;
}
}
if([0,1,3,4].includes(shareInfo.type)){
if (shareInfo.shareContent) {
shareObj.summary = shareInfo.shareContent;
}else{
uni.showToast({
title: "缺失分享的描述",
icon: "none"
});
return;
}
}
if([0,2,5].includes(shareInfo.type)){
if (shareInfo.shareImg) {
shareObj.imageUrl = shareInfo.shareImg;
}else{
uni.showToast({
title: "缺失分享的图片",
icon: "none"
});
return;
}
}
if([3,4].includes(shareInfo.type)){
if (shareInfo.mediaUrl) {
shareObj.mediaUrl = shareInfo.mediaUrl;
}else{
uni.showToast({
title: "缺失分享的音视频地址",
icon: "none"
});
return;
}
}
if(shareInfo.type == 5){
if (shareInfo.appId && shareInfo.appPath && shareInfo.appWebUrl) {
shareObj.miniProgram = {
id:shareInfo.appId,
path:shareInfo.appPath,
webUrl:shareInfo.appWebUrl,
};
if(shareInfo.appType){
shareObj.miniProgram.type = shareInfo.appType;
}
}else{
uni.showToast({
title: "缺失分享小程序的参数",
icon: "none"
});
return;
}
}
if (item.scene) {
shareObj.scene = item.scene;
}
uni.share(shareObj);
}
let otherShareList = [
{
icon: "/uni_modules/zhouWei-APPshare/static/icon_copy.png",
text: "复制",
provider: "copy",
onClick: onCopy
},
{
icon: "/uni_modules/zhouWei-APPshare/static/icon_more.png",
text: "更多",
provider: "more",
onClick: onMore
}
];
let platformShareList = [];
// 获取服务商支持的分享
uni.getProvider({
service: 'share',
success: function (res) {
if (res.provider.includes('sinaweibo')) {
platformShareList = [{
icon: "/uni_modules/zhouWei-APPshare/static/icon_weibo.png",
text: "新浪微博",
onClick: onShare,
provider: "sinaweibo",
type: 0
}].concat(platformShareList);
}
if (res.provider.includes('qq')) {
platformShareList = [{
icon: "/uni_modules/zhouWei-APPshare/static/icon_qq.png",
text: "QQ",
onClick: onShare,
provider: "qq",
type: 1
}].concat(platformShareList);
}
if (res.provider.includes('weixin')) {
platformShareList = [{
icon: "/uni_modules/zhouWei-APPshare/static/icon_weixin.png",
text: "微信好友",
onClick: onShare,
provider: "weixin",
scene: "WXSceneSession",
type: 0
},
{
icon: "/uni_modules/zhouWei-APPshare/static/icon_pengyouquan.png",
text: "朋友圈",
onClick: onShare,
provider: "weixin",
scene: "WXSenceTimeline",
type: 0
},
{
icon: "/uni_modules/zhouWei-APPshare/static/ic_xiaochengxu.png",
text: "小程序",
onClick: onShare,
provider: "weixin",
scene: "WXSceneSession",
type: 5
}].concat(platformShareList);
}
}
});
// 根据type类型过滤掉不支持的平台
function platformFilter(data){
let platformList = [];
let supportList = [
["weixin","sinaweibo"],
["weixin","sinaweibo","qq"],
["weixin","sinaweibo","qq"],
["weixin","qq"],
["weixin","sinaweibo"],
["weixin"],
];
let currentSupport = [];
if(data.type >= 0 && data.type <= 5){
currentSupport = supportList[data.type];
}
platformShareList.forEach((item,index) => {
if(data.type >= 0 && data.type <= 5){
if(currentSupport.includes(item.provider)){
if(item.provider == "weixin"){
if(item.text == "小程序"){
if(data.type == 5){
platformList.push(item);
}
}else if(data.type !== 5){
platformList.push(item);
}
} else {
platformList.push(item);
}
}
}else{
if(item.provider == "weixin"){
if(item.text == "小程序"){
if(data.appId && data.appPath){
platformList.push(item);
}
}else {
platformList.push(item);
}
} else {
platformList.push(item);
}
}
});
return platformList.concat(otherShareList);
}
// 数据处理
function dataFactory(shareInfo = {}) {
let config = {
...shareInfo
};
config.shareTitle = shareInfo.shareTitle || "";
config.shareUrl = shareInfo.shareUrl || "";
config.shareContent = shareInfo.shareContent || "分享的描述";
config.shareImg = shareInfo.shareImg || "分享的图片";
return config;
}
export default function (shareInfo, callback) {
shareInfo = dataFactory(shareInfo);
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
let screenWidth = plus.screen.resolutionWidth
//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
//图标下的按钮文字距离图标5像素，文字大小12像素
//底部取消按钮高度固定为44px
//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
let marginTop = 25, //上间距
marginLeft = 25, //左间距
iconWidth = 55, //图标宽宽
iconHeight = 55, //图标高度
icontextSpace = 10, //图标与文字间距
textHeight = 12 //文字大小
let left1 = marginLeft / 360 * screenWidth;
let colNumber = Math.floor(screenWidth / (iconWidth + marginLeft));
let i = (screenWidth - (iconWidth + marginLeft) * colNumber - marginLeft) / (colNumber + 1);
let initMargin = marginLeft + i;
let itemWidth = iconWidth + initMargin;
let itemHeight = iconHeight + icontextSpace + textHeight + marginTop;
let textTop = iconHeight + icontextSpace;
alphaBg = new plus.nativeObj.View("alphaBg", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
});
alphaBg.addEventListener("click", function () { //处理遮罩层点击
alphaBg && alphaBg.close();
shareMenu && shareMenu.close();
if(showState){
showState = false;
} else {
showState = false;
}
});
let shareList = platformFilter(shareInfo);
shareMenu = new plus.nativeObj.View("shareMenu", { //创建底部图标菜单
bottom: '0px',
left: '0px',
height: Math.ceil(shareList.length / colNumber) * itemHeight + marginTop + 44 + 1 + 'px',
width: '100%',
backgroundColor: 'rgb(255,255,255)'
});
//绘制底部图标菜单的内容
shareMenu.draw([{
tag: 'rect', //菜单顶部的分割灰线
color: '#e7e7e7',
position: {
top: '0px',
height: '1px'
}
},
{
tag: 'font',
id: 'sharecancel', //底部取消按钮的文字
text: '取消分享',
textStyles: {
size: '14px'
},
position: {
bottom: '0px',
height: '44px'
}
},
{
tag: 'rect', //底部取消按钮的顶部边线
color: '#e7e7e7',
position: {
bottom: '45px',
height: '1px'
}
}
]);
shareList.map((v, k) => {
let time = new Date().getTime();
let row = Math.floor(k / colNumber);
let col = k % colNumber;
let item = [{
src: v.icon,
id: Math.random() * 1000 + time,
tag: "img",
position: {
top: row * itemHeight + marginTop,
left: col * itemWidth + initMargin,
width: iconWidth,
height: iconWidth
}
}, {
text: v.text,
id: Math.random() * 1000 + time,
tag: "font",
textStyles: {
size: textHeight
},
position: {
top: row * itemHeight + textTop,
left: col * itemWidth + initMargin,
width: iconWidth,
height: iconWidth
}
}];
shareMenu.draw(item);
});
shareMenu.addEventListener("click", function (e) { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
alphaBg && alphaBg.close();
shareMenu && shareMenu.close();
if(showState){
showState = false;
} else {
showState = false;
}
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
} else { //点击了图标按钮
let x = e.clientX;
let y = e.clientY;
let colIdx = Math.floor(x / itemWidth);
let rowIdx = Math.floor(y / itemHeight);
let tapIndex = colIdx + rowIdx * colNumber;
shareList[tapIndex].onClick(shareList[tapIndex], shareInfo,callback);
}
});
alphaBg.show();
shareMenu.show();
showState = true;
return {
close: function(){
alphaBg && alphaBg.close();
alphaBg && shareMenu.close();
if(showState){
showState = false;
return true
} else {
showState = false;
return false
}
}
};
};
// #endif

78
uni_modules/zhouWei-APPshare/package.json Normal file
View File

@@ -0,0 +1,78 @@
{
"id": "zhouWei-APPshare",
"displayName": "APP分享、微博分享、QQ分享、微信好友、朋友圈",
"version": "2.0.3",
"description": "APP分享、微博分享、QQ分享、微信好友、朋友圈",
"keywords": [
"APP分享",
"分享",
"微信分享"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "n",
"Android Browser": "n",
"微信浏览器(Android)": "n",
"QQ浏览器(Android)": "n"
},
"H5-pc": {
"Chrome": "n",
"IE": "n",
"Edge": "n",
"Firefox": "n",
"Safari": "n"
},
"小程序": {
"微信": "n",
"阿里": "n",
"百度": "n",
"字节跳动": "n",
"QQ": "n"
},
"快应用": {
"华为": "n",
"联盟": "n"
}
}
}
}
}

101
uni_modules/zhouWei-APPshare/readme.md Normal file
View File

@@ -0,0 +1,101 @@
# APP分享、微博分享、QQ分享、微信好友、朋友圈
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
| ----------------------------|--------------------------- |
|![QQ交流群](http://qn.kemean.cn//upload/202004/14/15868301778472k7oubi6.png)|![微信交流群](https://qn.kemean.cn/upload/202010/13/weiXin_group_code.jpg)|
| QQ群号：607391225 |微信号：zhou0612wei|
### [点击跳转-插件示例](https://ext.dcloud.net.cn/plugin?id=2009)
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
### 使用方法 第一步
在`manifest.json`文件里面的`App SDK配置`的`分享`配置对应的平台参数（`不配置参数`在自定义基座里面只会显示`复制`和`更多`， 配置之后要`重新打包`才`生效`）
### 常见问题
1. 运行示例报错
答：不要在H5、小程序等浏览器上面运行，此插件只适合在android、IOS上运行
2. 分享图标不显示
答：插件里面static文件里面的图片放到根目录的static文件里面， 直接导入插件，结构有问题
3. 分享出去的图片不显示
答：本分享插件使用的官方分享API，有分享问题，仔细研究官方的分享API
### 使用方法 第二步
```
<template>
<button type="default" @click="onShare">APP分享</button>
</template>
<script>
// 引入方法
import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
export default {
methods: {
onShare(){
let shareData = {
shareUrl:"https://kemean.com/",
shareTitle:"分享的标题",
shareContent:"分享的描述",
shareImg:"http://qn.kemean.cn//upload/202004/18/1587189024467w6xj18b1.jpg",
appId : "wxd0e0881530ee4444", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
appPath : "pages/home/home",
appWebUrl : "https://kemean.com/",
};
// 调用
let shareObj = appShare(shareData,res => {
console.log("分享成功回调",res);
// 分享成功后关闭弹窗
// 第一种关闭弹窗的方式
closeShare();
});
setTimeout(() => {
// 第二种关闭弹窗的方式
shareObj.close();
},5000);
}
}
}
</script>
```
### 插件说明
| 参数名称 | 类型 | 默认值 | 描述
| -------------- |---------- | ------------ | --------------------------------------- |
| shareUrl | String | -- | 分享的地址`（type 为 0 时必传）` |
| shareTitle | String | -- | 分享的标题 |
| shareContent | String | 分享的描述 | 分享的描述`（type 为 1 时必传）` |
| shareImg | String | 分享的图片 | 分享的图片`（type 为 0、2、5 时必传）` |
| mediaUrl | String | -- | 分享的音视频地址`（type 为 3、4 时必传）` |
| type | Number | 参考平台默认值| 分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等，具体参考下面type说明|
### type 值说明
| 值 | 说明 | 支持平台 |
| ------- |--------- | ------------- |
| 0 | 图文 | 微信、新浪微博 |
| 1 | 纯文字 | 全平台支持 |
| 2 | 纯图片 | 全平台支持 |
| 3 | 音乐 | 微信、QQ |
| 4 | 视频 | 微信、新浪微博 |
| 5 | 小程序 | 微信聊天界面 |
### 平台默认值
| 平台 | 默认值 |
| ---------- |--------- |
| 新浪微博 | 0 |
| 微信好友 | 0 |
| 微信朋友圈 | 0 |
| QQ | 1 |
| 微信小程序 | 5 |
### 分享小程序必传参数`（type 为 5 时必传）`
注意：`小程序必须是在微信开放平台与App绑定的才行`
| 参数名称 | 类型 | 默认值 | 描述
| -------------- |---------- | ------------ | --------------------------- |
| appId | String | -- | 微信小程序原始id (比传) |
| appPath | String | -- | 点击链接进入的页面 (比传) |
| appWebUrl | String | "" | 兼容低版本的网页链接(比传) |
| appType | Number | 0 | 微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0 |

BIN
uni_modules/zhouWei-APPshare/static/ic_xiaochengxu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_QQkongjian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_copy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_pengyouquan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_qq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_weibo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
uni_modules/zhouWei-APPshare/static/icon_weixin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB